JSFiddle - React, Tailwind, and code Playground

by Sergey Kalashnikov

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 tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")

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(1000)
    .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')
    .defer(d3.tsv, '//nemetz.devg.ru/d3/cities.tsv')
    .await(ready)

function ready(error, map, data, city) {
    var rateById = {}
    var accidentsById = {}
    data.forEach(function (d) {
        rateById[d.RegionCode] = Number(d.Deaths)
        accidentsById[d.RegionCode] = Number(d.CarAccidents)
    })
//    var coordCity={}
//    city.forEach(function (d) {
//        coordCity[d.City] = projection(d.lat,d.lon)
//    })
    city.forEach(function (c) {
        c.lat = Number(c.lat)
        c.lon=Number(c.lon)
        c.location=projection([c.lon,c.lat])
    })
    
    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])
    })
// обработчик по наведению курсора
.on("mouseover", function(d){
//    tooltip.text(accidentsById[d.properties.region])
    tooltip.text("Deaths> "+
                 rateById[d.properties.region]+" \n\rAccid-s>"+accidentsById[d.properties.region])
    return tooltip.style("visibility", "visible")})
.on("mousemove", function(){return tooltip.style("top",
   ...