JSFiddle - React, Tailwind, and code Playground

by devgru

HTML

<script src='http://d3js.org/topojson.v1.js'></script>
<script src='http://d3js.org/queue.v1.js'></script>
<script src='http://d3js.org/colorbrewer.v1.js'></script>

JavaScript

var color = d3.scale.threshold()
    .domain([300, 600, 900, 1200, 1500])
    .range(colorbrewer['YlOrRd'][6])

var width = 960, height = 500
var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)

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

queue()
    .defer(d3.json, '//nemetz.devg.ru/d3/russia_1e-7sr.json')
    .defer(d3.csv, '//nemetz.devg.ru/d3/Accidents.csv')
    .await(ready)

function ready(error, map, data) {
    var rateById = {}
    data.forEach(function (d) {
        rateById[d.RegionCode] = Number(d.Deaths)
    })
    var path = d3.geo.path().projection(projection)
    var data = topojson.feature(map, map.objects.russia).features
svg.selectAll('path')
    .data(data)
    .enter()
    .append('path')
    .attr('d', path)
    .style('fill', function (d) {
        return color(rateById[d.properties.region])
    })
}