China tile grid map

Inspired by Maarten Lambrecht's Europe example, using geo2rect by Sebastian Meier. Geojson data for China map is from china-geojson.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
  <script src="geo2rect.js"></script>

path{
      fill:transparent;
      stroke:rgba(0,0,0,0.3);
    }

#nav-container {
      display: flex;
      justify-content: center;
      cursor: pointer;
    }

#toggle {
      background: #ddd;
      padding: 5px 10px;
    }
  </style>
</head>

<body>
<div id="nav-container">
  <div id="toggle">toggle</div>
</div>

// svg container
var svg = d3.select('body')
  .append('svg')
  .attr('width',config.width)
  .attr('height',config.height);

// colour scale
var colours = d3.scaleQuantile()
  .range(['#ffffe0','#ffd59b','#ffa474','#f47461','#db4551','#b81b34','#8b0000']);

var g2r = new geo2rect.draw();

d3.queue()
  .defer(d3.json, "china.geojson")
  .defer(d3.csv, "electricity2015.csv", function(d) {
    d.value = +d.value;
    return d;
  })
  .await(ready);

function ready(error, provinces, electricity) {
  var geojson = geo2rect.compute(provinces);
  g2r.config = config;
  g2r.data = geojson;
  g2r.svg = svg.append('g');
  g2r.draw();

colours.domain(d3.extent(electricity, function(d) { return d.value; }))

electricity.forEach(function(d) {
    d3.selectAll("svg .id-" + d.code)
      .style("fill", colours(d.value))
  })
}

d3.select('#toggle').on('click', function(){
  g2r.toggle();
  g2r.draw();
  // console.log(g2r.mode);
});

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

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

https://npmcdn.com/@turf/turf/turf.min.js