D3 Examples - germany_tilegram

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  path {
    stroke: black;
  }
  .party-1 {
    fill: red;
  }
  .party-2 {
    fill: blue;
  }
  .party-3 {
    fill: purple;
  }
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://d3js.org/topojson.v2.min.js"></script>
<script>
​
var WIDTH = 500
var HEIGHT = 500
​
var svg = d3.select('body').append('svg')
    .attr('width', WIDTH)
    .attr('height', HEIGHT)
​
d3.queue()
    .defer(d3.json, 'tiles.topo.json')
    .defer(d3.csv, 'results.csv')
    .await(ready)
​
function ready(error, tilegram, results) {
  if (error) throw error
​
  // convert results to hash for quick lookup
  results = results.reduce(function (a, b) {
    a[b.geoId] = b.party
    return a
  }, {})
​
  var tiles = topojson.feature(tilegram, tilegram.objects.tiles)
​
  var transform = d3.geoTransform({
    point: function(x, y) {
      this.stream.point(x, -y)
    },
  })
​
  var path = d3.geoPath().projection(transform)
​
  var g = svg.append('g')
    .attr('transform', 'translate(' + -WIDTH / 8 + ',' + HEIGHT + ')scale(0.5)')
​
  g.selectAll('.tiles')
    .data(tiles.features)
    .enter().append('path')
    .attr('d', path)
    .attr('class', function(d) { return 'party-' + results[d.id] })
}
​
</script>
</body>
​
    