D3 Examples - germany_tilegram_example

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  path {
    stroke: black;
  }
  .party-1 {
    fill: red;
  }
  .party-2 {
    fill: blue;
  }
  .party-3 {
    fill: purple;
  }
  div.tooltip {
    position: absolute;
    text-align: center;
    padding: 2px 8px;
    min-width: 50px;
    font: 12px sans-serif;
    background: #fff;
    border: 0px;
    pointer-events: none;
    border: 1px solid #bdbdbd;
  }
</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 tooltip = d3.select('body')
  .append('div')
  .classed('tooltip', true)
  .style('opacity', 0)
​
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] })
    .on('mouseover', function(d) {
      var ev = d3.event
      tooltip.text('Party: ' + results[d.id])
        .style('opacity', 1)
        .style('left', ev.pageX + 20 + 'px')
        .style('top', ev.pageY + 20 + 'px')
    })
    .on('mouseout', function(d) {
      tooltip.text('').style('opacity',0)
    })
}
​
</script>
</body>
​
    