/index.html

## index.html
<!DOCTYPE html>
<body>
<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>

<script>
var color = d3.scale.threshold()
.domain([50, 150, 350, 750, 1500])
.range(colorbrewer['Reds'][6]);

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

var divcounter = d3.select('body').append('div')
.attr('class', 'counter');


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

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);


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


function ready(error, map, data, cities) {
    var rateById ={}, titles={};
    data.forEach(function(d){
        rateById[d.RegionCode] = +d.Deaths;
        titles[d.RegionCode] = d.RegionName;
    });

    var path = d3.geo.path().projection(projection);
    svg.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])})


       .on('click', function(d){
           s = d3.select(this).style('stroke-width');
           d3.select(this).style('stroke-width', s == '1px'?'0px':'1px');

           if (d3.select(this).style('stroke-width') == '0px')
               {divcounter.text(Number(divcounter.text())-rateById[d.properties.region])}
           else {divcounter.text( Number(divcounter.text())+rateById[d.properties.region])}


           if (Number(divcounter.text())==0) {d3.select('div.counter').style('opacity', 0)}
           else {d3.select('div.counter').style('opacity', 1)}
       })

        .on('mouseover', function(d){
            var title = titles[d.properties.region];
            div.transition()
                .duration(200)
                .style("opacity", .9);
            div.html('<b>'+title+'</b><br>'+rateById[d.properties.region])
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY) + "px");
         })

            .on('mouseout', function(d){
            div.transition()
                .duration(200)
                .style("opacity", 0);
         })

         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', 'cityName');
        city.selectAll('text')
            .text(function (d) { return d.City });
}

</script>
<style>
div.tooltip {
  position: absolute;
  text-align: center;
  width: 120px;
  padding: 2px;
  font: 8pt sans-serif;
  background: orange;
  border: 1px solid white;
  border-radius: 8px;
  pointer-events: none;
  color: white;
}

.counter{
  position: absolute;
  left: 130px;
  top: 320px;
  text-align: left;
  width: 120px;
  padding: 2px;
  font: 16pt sans-serif;
  color: black;
  height: 20px;
}


path {
    stroke: steelBlue;
    stroke-width: 0px;
}

text.cityName {
    font: 6pt sans-serif;
    color: white;
}

</style>
</body>
</html>
	<!DOCTYPE html>
	<body>
	<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>

	<script>
	var color = d3.scale.threshold()
	.domain([50, 150, 350, 750, 1500])
	.range(colorbrewer['Reds'][6]);

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

	var divcounter = d3.select('body').append('div')
	.attr('class', 'counter');


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

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);


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


	function ready(error, map, data, cities) {
	var rateById ={}, titles={};
	data.forEach(function(d){
	rateById[d.RegionCode] = +d.Deaths;
	titles[d.RegionCode] = d.RegionName;
	});

	var path = d3.geo.path().projection(projection);
	svg.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])})




	.on('click', function(d){
	s = d3.select(this).style('stroke-width');
	d3.select(this).style('stroke-width', s == '1px'?'0px':'1px');

	if (d3.select(this).style('stroke-width') == '0px')
	{divcounter.text(Number(divcounter.text())-rateById[d.properties.region])}
	else {divcounter.text( Number(divcounter.text())+rateById[d.properties.region])}


	if (Number(divcounter.text())==0) {d3.select('div.counter').style('opacity', 0)}
	else {d3.select('div.counter').style('opacity', 1)}
	})

	.on('mouseover', function(d){
	var title = titles[d.properties.region];
	div.transition()
	.duration(200)
	.style("opacity", .9);
	div.html('<b>'+title+'</b><br>'+rateById[d.properties.region])
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY) + "px");
	})

	.on('mouseout', function(d){
	div.transition()
	.duration(200)
	.style("opacity", 0);
	})

	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', 'cityName');
	city.selectAll('text')
	.text(function (d) { return d.City });
	}

	</script>
	<style>
	div.tooltip {
	position: absolute;
	text-align: center;
	width: 120px;
	padding: 2px;
	font: 8pt sans-serif;
	background: orange;
	border: 1px solid white;
	border-radius: 8px;
	pointer-events: none;
	color: white;
	}

	.counter{
	position: absolute;
	left: 130px;
	top: 320px;
	text-align: left;
	width: 120px;
	padding: 2px;
	font: 16pt sans-serif;
	color: black;
	height: 20px;
	}


	path {
	stroke: steelBlue;
	stroke-width: 0px;
	}

	text.cityName {
	font: 6pt sans-serif;
	color: white;
	}

	</style>
	</body>
	</html>