Car accidents

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Accidents on the Road - Choropleth</title>
    <script src='https://d3js.org/d3.v4.js'></script>
    <script src='https://d3js.org/topojson.v1.js'></script>
    <script src='https://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, 'https://d3.devg.ru/data/russia.json')
  .defer(d3.csv, 'https://d3.devg.ru/data/accidents.csv')
  .defer(d3.tsv, 'https://d3.devg.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)
    .attr('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')
    .attr('font-family', 'sans-serif')
    .attr('font-size', '11px')
    .attr('text-anchor', 'middle')
    .attr('stroke', 'white')
    .attr('fill', 'white')
    .attr('stroke-width', 3)
    .style('text-shadow', '0 0 2px white')
  
  city.append('text')
    .attr('font-family', 'sans-serif')
    .attr('font-size', '11px')
    .attr('text-anchor', 'middle')
  
  city.selectAll('text')
    .attr('y', function (d) {
      if (d.City == 'Красноярск') return 13
      return -7
    })
    .text(function (d) { return d.City })
}
  
function drawLegend(svg) {
  
  var legendSize = 20
  var legendLabels = [
    '< 300', '300-600', '600-900', '900-1200', '1200-1500', '> 1500'
  ]
  var legendDomain = d3.range(0, 1501, 300)

var legend = svg.selectAll('g.legend')
    .data(legendDomain)
    .enter().append('g')
    .attr('class', 'legend')

legend.append('rect')
    .attr('x', 200)
    .attr('y', function (d, i) {
      return i * legendSize
    })
    .attr('width', legendSize)
    .attr('height', legendSize)
    .attr('fill', function (d, i) { return color(d) })
    .attr('opacity', 0.8)
    .attr('stroke', 'black')
    .attr('stroke-width', 0.3)

legend.append('text')
    .attr('x', 230)
    .attr('dy','-4')
    .attr('font-family', 'sans-serif')
    .attr('font-size', '12px')
    .attr('y', function (d, i) {
      return (i + 1) * legendSize
    })
    .text(function (d, i) {
      return legendLabels[i]
    })

}
  
function ready(error, map, data, cities) {
  var svg = d3.select('body')
    .append('svg')
    .attr('width', width * 0.39)
    .attr('height', height)
  
  var projection = d3.geoAlbers()
    .rotate([-105, 0])
    .center([-10, 65])
    .parallels([52, 64])
    .scale(1000)
    .translate([width * 0.675, height * 0.7])

var svg2 = d3.select('body')
    .append('svg')
    .attr('width', width * 0.5)
    .attr('height', height)
    .style('border-left', '1px solid #000')
    .style('margin', '10px auto')

var projection2 = d3.geoAlbers()
    .rotate([-105, 0])
    .center([-10, 65])
    .parallels([52, 64])
    .scale(500)
    .translate([width * 0.1425, height * 0.65])

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

drawMap(svg, map, cities, rateById, projection)
  drawMap(svg2, map, cities.filter(function (a) {
    return a.lon > 70
  }), rateById, projection2)

drawLegend(svg2)
  svg.append('text')
    .attr('font-family', 'sans-serif')
    .text('× 2')
    .attr('x', width * 0.36)
    .attr('opacity', 0.5)
    .attr('y', 20)
}
</script>
</body>
</html>

Modified http://d3js.org/d3.v4.js to a secure url

Modified http://d3js.org/topojson.v1.js to a secure url

Modified http://d3js.org/colorbrewer.v1.js to a secure url

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

https://d3js.org/topojson.v1.js

https://d3js.org/colorbrewer.v1.js