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: 0.3px;
        }

        body {
            font-family: Arial, sans-serif;
        }

        .city {
            font: 11px sans-serif;
        }

        .city text {
            text-anchor: middle;
        }

        .legend {
            font-size: 12px;
        }

        .shade {
            stroke: #fff;
            stroke-width: 2.75px;
            fill: #fff;
            text-shadow: 0 0 2px white;
        }

        rect {
            opacity: 0.8;
            stroke: #000;
            stroke-width: 0.3px;
        }
    </style>
</head>
<body>
<script type='text/javascript'>
    var width = 960, height = 500
    var ext_color_domain = d3.range(0, 1501, 300)
    var color_domain = ext_color_domain.slice(1)
    var legend_labels = ['< 300', '300 +', '600 +', '900 +', '1200 +', '> 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').attr('class', 'shade')
        city.append('text')
        city.selectAll('text')
            .attr('y', function (d) {
                if (d.City == 'Красноярск') return 13
                return -7
            })
            .text(function (d) { return d.City })
    }
    function ready(error, map, data, cities) {
        var svg = d3.select('body').append('svg')
                .attr('width', width * 0.67 * 0.59)
                .attr('height', height)
                .style('margin', '10px auto')

        var projection = d3.geo.albers()
                .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.geo.albers()
                .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)

        var ls_w = 20, ls_h = 20

        var legend = svg2.selectAll('g.legend')
            .data(ext_color_domain)
            .enter().append('g')
            .attr('class', 'legend')

        legend.append('rect')
            .attr('x', 200)
            .attr('y', function (d, i) { return i * ls_h })
            .attr('width', ls_w)
            .attr('height', ls_h)
            .style('fill', function (d, i) { return color(d) })

        legend.append('text')
            .attr('x', 230)
            .attr('dy','-4')
            .attr('y', function (d, i) { return i * ls_h + ls_h })
            .text(function (d, i) { return legend_labels[i] })

        svg.append('text')
            .text('× 2')
            .attr('x', width * 0.37)
            .style('opacity', 0.5)
            .attr('y', 20)
    }
</script>
</body>
</html>