演習問題2-1: 日本の主な都市の人口を円形で表して、地図上で可視化しましょう!

問題1. 下記コードを編集して円形の面積を人口に比例するようにしてください.

<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">
  <title>2015/11/12 BODIKセミナー 演習2-1</title>

  <!-- jQuery(AJAXのために使う) -->
  <script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>

  <!-- Leaflet(地図ライブラリ)ファイル -->
  <script type="text/javascript" src="../leaflet/leaflet.js"></script>
  <link rel="stylesheet" href="../leaflet/leaflet.css">

  <style>
  body { padding: 0; margin: 0; }
  h1 { margin-left: 1em; font-family: sans-serif; font-weight: lighter; }
  #map { width: 100%; height: 400px; padding: 0; margin: 0; }
  </style>
</head>

<body>

<h1>演習2-1:日本の主な都市の人口を円形で表して、地図上で可視化しましょう!</h1>

<div id="map"></div>

<pre id="sandbox">
</pre>

<script type="text/javascript">
var map = L.map('map').setView([33.6833, 139.7667], 5);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var sparql_query = [
  'prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>',
  'prefix dbpedia:<http://dbpedia.org/resource/>',
  'prefix dbpedia-p:<http://dbpedia.org/property/>',
  'prefix dbpedia-o:<http://dbpedia.org/ontology/>',
  'prefix rdfs:<http://www.w3.org/2000/01/rdf-schema#>',
  'select ?name ?pop ?lon ?lat {',
  '  ?s a dbpedia-o:City ;',
  '  dbpedia-o:timeZone dbpedia:Japan_Standard_Time ;',
  '  rdfs:label ?name ;',
  '  dbpedia-p:populationTotal ?pop ;',
  '  geo:long ?lon ;',
  '  geo:lat ?lat .',
  '  FILTER(lang(?name)="ja" && ?pop > 100000 )',
  '} ORDER BY DESC(?pop)',
].join("\n")

$.post(
  'http://dbpedia.org/sparql?format=json',
  {
    query: sparql_query
  },
  function(data, status, jqXHR) {
    $("#sandbox").text("HTTP/1.1 " + jqXHR.status + " " + jqXHR.statusText + "\n" + jqXHR.getAllResponseHeaders() + "\n" + jqXHR.responseText)

    var bindings = data.results.bindings;

    for(var i=0; i<bindings.length; i++){
      var b = bindings[i]
      var name = b.name.value
      var pop = parseInt(b.pop.value)
      var lon = parseFloat(b.lon.value)
      var lat = parseFloat(b.lat.value)

      var circle_radius = 10000
      var circle_fill_color = 'red'

      var circle = L.circle([lat, lon], circle_radius, {
          fillColor: circle_fill_color,
          color: false,
          fillOpacity: 0.75
      }).addTo(map)
      .bindPopup("<h3>"+name+"</h3>人口:"+pop+"人");
    }
  }
).fail(function(jqXHR){
  $("#sandbox").text("HTTP/1.1 " + jqXHR.status + " " + jqXHR.statusText + "\n" + jqXHR.getAllResponseHeaders() + "\n" + jqXHR.responseText)
})

</script>
</body>
</html>
// 72行目を以下のように編集してください.
var circle_radius =  10*Math.sqrt(pop)

問題2. 色を人口に応じて変更してください.

// 73行目を以下のように編集してください.
var circle_fill_color = 'hsl('+Math.min(360*Math.sqrt(pop)/1500, 360)+',80%,75%)'