演習問題3: 棒グラフで日本の主な都市の人口を可視化しましょう!

問題1. 棒グラフに人口を表示するラベルを追加してください.

  • クラスはnumeric-labelをご利用ください

<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">
  <title>2015/11/12 BODIKセミナー 演習3-1</title>
  
  <!-- jQuery(AJAXのために使う) -->
  <script type="text/javascript" src="../jquery/jquery-2.1.4.min.js"></script>

  <!-- D3.js -->
  <script type="text/javascript" src="../d3/d3.min.js"></script>
  

  <style>
  body { padding: 0; margin: 0; }
  h1 { margin-left: 1em; font-family: sans-serif; font-weight: lighter; }
  #graph { width: 700px;padding: 0; margin: 0; }
  #graph > div { margin: 0; }
  #graph .label { color: black; font-family: sans-serif; margin: 0 1em 0 0; padding: 0; height: 1em; width: 5em; text-align: right; display: inline-block;}
  #graph .numeric-label { font-size: small; margin: 0 0 0 0.5em; display: inline-block; }
  #graph .bar { background-color:red; height: 1em; display: inline-block;}
  </style>
</head>

<body>

<h1>演習3-1:棒グラフで日本の主な都市の人口を可視化しましょう!</h1>

<div id="graph"></div>

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

<script type="text/javascript">

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;
    var data = []
    
    for(var i=0; i<bindings.length; i++) {
      var b = bindings[i]
      var pop = parseInt(b.pop.value)
      var name = b.name.value
      data.push({pop: pop, name: name})
    }
    var max_population = d3.max($.map(data, function(d) {return d.pop} ))

    var scale_x = d3.scale.linear()
      .domain([0, max_population])
      .range([0, 400]);
    
    var div = d3.select("#graph")
      .selectAll("div")
      .data(data)
      .enter()
      .append("div")
      
    div.append("p")
      .attr("class", "label")
      .text(function(d) { return d.name } )
    div.append("div")
      .attr("class", "bar")
      .style("width", function(d) { return scale_x(d.pop) + "px" } )
    
    // ここにコードを追加してください.
  }
).fail(function(jqXHR){
  $("#sandbox").text("HTTP/1.1 " + jqXHR.status + " " + jqXHR.statusText + "\n" + jqXHR.getAllResponseHeaders() + "\n" + jqXHR.responseText)
})

</script>
</body>
</html>

// 91行目に以下のコードを追加する.

div.append("p")
      .attr("class", "numeric-label")
      .text(function(d) { return d.pop + "人" } )