index.html

## index.html
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Accidents on the Road - Choropleth</title>
    <script src='http://d3js.org/d3.v3.js'></script>
    <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>
    <style>
        path {
            stroke: white;
            stroke-width: 1px;
        }

        .city text {
            font: 11px sans-serif;
            text-anchor: middle;
        }
    </style>
</head>
<body>
<script type='text/javascript'>
    var width = 960, height = 500
    var ext_color_domain = [0, 50, 150, 350, 750, 1500]
    var color_domain = ext_color_domain.slice(1)
    var legend_labels = ['< 50', '50 +', '150 +', '350 +', '750 +', '> 1500']
    var color = d3.scale.threshold()
        .range(colorbrewer['YlOrRd'][6])
        .domain(color_domain)
    queue()
        .defer(d3.json, 'http://nemetz.devg.ru/d3/russia_1e-7sr.json')
        .defer(d3.csv, 'http://nemetz.devg.ru/d3/Accidents.csv')
        .defer(d3.tsv, 'http://nemetz.devg.ru/d3/cities.tsv')
        .await(ready)

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

        var city = svg.selectAll('g.city')
            .data(cities)
            .enter()
            .append('g')
            .attr('class', 'city')
            .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('y', -7)
            .text(function (d) { return d.City })
    }
    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.geo.albers()
            .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>