Car accidents in Russia — bare+cities by devgru

index.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Accidents on the Road - Choropleth</title>
    <script src='//d3js.org/d3.v4.js'></script>
    <script src='//d3js.org/topojson.v1.js'></script>
    <script src='//d3js.org/colorbrewer.v1.js'></script>
</head>
<body>
<script type='text/javascript'>
var width = 960
var height = 500
var colorDomain = d3.range(300, 1501, 300)

var color = d3.scaleThreshold()
  .range(colorbrewer['RdYlGn'][6].reverse())
  .domain(colorDomain)

d3.queue()
  .defer(d3.json, '//d3-js.ru/data/russia.json')
  .defer(d3.csv, '//d3-js.ru/data/accidents.csv')
  .defer(d3.tsv, '//d3-js.ru/data/cities.tsv')
  .await(ready)

function drawMap(svg, map, cities, rateById, projection) {
  var path = d3.geoPath()
    .projection(projection)
  var mapData = topojson.feature(map, map.objects.russia).features
  
  svg.append('g')
    .attr('class', 'region')
    .selectAll('path')
    .data(mapData)
    .enter()
    .append('path')
    .attr('stroke', 'white')
    .attr('stroke-width', 1)
    .attr('d', path)
    .style('fill', function (d) {
      return color(rateById[d.properties.region])
    })

  var city = svg.selectAll('g')
    .data(cities)
    .enter()
    .append('g')
    .attr('transform', function (d) {
      return 'translate(' + projection([d.lon, d.lat]) + ')'
    })

  city.append('circle')
    .attr('r', 1.5)
    .style('fill', 'white')

  city.append('text');
  city.selectAll('text')
    .attr('dy', -7)
    .text(function (d) { return d.City })
    .attr('font-family', 'sans-serif')
    .attr('font-size', '11px')
    .attr('text-anchor', 'middle')
}

function ready(error, map, data, cities) {
  var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .style('margin', '10px auto')

  var projection = d3.geoAlbers()
    .rotate([-105, 0])
    .center([-10, 65])
    .parallels([52, 64])
    .scale(700)
    .translate([width * 0.5, height * 0.5])

  var rateById = {}
  data.forEach(function (d) {
    rateById[d.RegionCode] = Number(d.Deaths)
  })

  drawMap(svg, map, cities, rateById, projection)
}
</script>
</body>
</html>