D3 Examples - Japan Teeanbau Choropleth

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
​
.japan {
  fill: none;
  /*opacity: 0.6;*/
  stroke: #000;
  stroke-width: 0.5;
}
​
.q0-4 { fill:rgb(237,248,233); }
.q1-4 { fill:rgb(186,228,179); }
.q2-4 { fill:rgb(116,196,118); }
.q3-4 { fill:rgb(35,139,69); }
​
</style>
<body>
<div id="map"></div>
<h1 id="japanState">Präfektur</h1>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript">
​
var width = 600,
    height = 600;
​
var lon = -138.0;
var lat = 36;
​
var rateById = d3.map();
​
var quantize = d3.scale.threshold()
.domain([143, 692, 18700])
.range(d3.range(4).map(function(i) {  return "q" + i + "-4";  }));
​
var projection = d3.geo.albers()
.center([0, lat])
.rotate([lon, 0])
.parallels([23, 46])
.scale(1700).translate([width / 2, height / 2]);
​
var path = d3.geo.path().projection(projection);
​
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
​
queue()
    .defer(d3.json, "japan.json")
    .defer(d3.tsv, "japanTea.tsv", function(d) { rateById.set(d.id, +d.GrowingArea); })
    .await(ready);
​
function ready(error, japan) {
  svg.append("g")
      .attr("class", "japan")
    .selectAll("path")
      .data(topojson.feature(japan, japan.objects.japan).features)
    .enter().append("path")
      .attr("class", function(d) { return quantize(rateById.get(d.properties.NAME_1)); })
      .attr("d", path)
      .attr("d", path).on("mouseover", function(d) {
      return d3.select("#japanState").text(d.properties.NAME_1).style("opacity", "1");
    }).on("mouseout", function(d) {
      return d3.select("#japanState").text("Präfektur").style("opacity", "0.4");
    });
​
}
​
</script>
</body>
    