Japan Teeanbau Choropleth

TopoJSON Japan, generiert aus naturalearthdata

Statistik Teeanbau in den Präfekturen: jap. Ministerium für Landwirtschaft et al.

<!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);

}

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js