D3 Examples - Japan geojson

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
  <script>
​
    var width = 960,
    height = 700;
​
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
    var xym = d3.geo.albers();
    var path = d3.geo.path().projection(xym);
​
    xym.origin([134, 25])
    xym.translate([350, 745])
    xym.parallels([24.6, 43.6])
    xym.scale(1980)
​
    d3.json("japan.json", function(data) {
        svg.selectAll("path").data(data.features)
        .enter().append("path")
        .attr("d", path)
        .style("fill", function() { return "#44aaee" })
        .on("mouseover", function(e){d3.select(this).style("fill", "#5522aa")})
        .on("mouseout", function(e){d3.select(this).style("fill", "#44aaee")})
      });
  </script>
    