kclosu/index.html

## index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by kclosu</title>

  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
     path {
  stroke: white;
    stroke-width: .2px;
}

path:hover {
  fill: brown;
  fill-opacity: .5;
}

.switcher {
    width: 200px;
    height: 30px;
    background: white;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid steelblue;
}
.city text {
    opacity: .7;
    fill: white;
    font: 11px sans-serif;
}
  </style>


<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var color = d3.scale.threshold()
    .domain([50, 150, 350, 750, 1500])
    .range(['#EFE966','#AFC85F','#78A659','#4C8250','#295E43','#113C31'])


var margin = { top: 10, right: 10, bottom: 30, left: 30 };
var width = 960;
var height = 500;
var fullwidth = width + margin.left + margin.right;
var fullheight = height + margin.top + margin.bottom;

var criteria = ['CarAccidents', 'Deaths'];

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

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 = {};
    data.forEach(function(d){
        rateById[d.RegionCode] = d;
    });

    var path = d3.geo.path().projection(projection);

    function fillfn(d){ return color(+rateById[d.properties.region][criteria[switcher.data()[0]]]);}

    var switcher = d3.select('body')
       .append('button')
       .data([1])
       .classed('switcher', true)
       .html(function(d){ return 'Перейти к количеству ' + ['аварий', 'смертей'][+!d]; } )
       .on('click', function(){
           var self = d3.select(this);
           self.data([+!self.data()[0]]);
           self.html(function(d){ return 'Перейти к количеству ' + ['аварий', 'смертей'][+!d];} )
           d3.selectAll('.mapobject')
               .transition()
               .duration(1200)
               .style('fill', fillfn);
       });

    var svg = d3.select('body').append('svg')
        .attr('width', fullwidth)
        .attr('height', fullheight)

    var mapel = svg.append('g')
        .attr('width', width)
        .attr('height', height)
        .attr('transform','translate(' + margin.left + ',' + margin.top +')');

    mapel.selectAll('path')
        .data(topojson.feature(map, map.objects.russia).features)
        .enter().append('path')
        .attr('d', path)
        .classed('mapobject', true)
        .style('fill', fillfn)

    var city = mapel.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', 2)
        .style('fill', 'white');

    city.append('text');
    city.selectAll('text')
        .attr('y', 2)
        .attr('x', 5)
        .text(function (d) { return d.City });

}
}//]]>

</script>


</head>
<body>
  <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>

</body>


</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title> - jsFiddle demo by kclosu</title>

	<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>



	<link rel="stylesheet" type="text/css" href="/css/result-light.css">

	<style type='text/css'>
	path {
	stroke: white;
	stroke-width: .2px;
	}

	path:hover {
	fill: brown;
	fill-opacity: .5;
	}

	.switcher {
	width: 200px;
	height: 30px;
	background: white;
	border-radius: 3px;
	cursor: pointer;
	border: 1px solid steelblue;
	}
	.city text {
	opacity: .7;
	fill: white;
	font: 11px sans-serif;
	}
	</style>



	<script type='text/javascript'>//<![CDATA[
	window.onload=function(){
	var color = d3.scale.threshold()
	.domain([50, 150, 350, 750, 1500])
	.range(['#EFE966','#AFC85F','#78A659','#4C8250','#295E43','#113C31'])


	var margin = { top: 10, right: 10, bottom: 30, left: 30 };
	var width = 960;
	var height = 500;
	var fullwidth = width + margin.left + margin.right;
	var fullheight = height + margin.top + margin.bottom;

	var criteria = ['CarAccidents', 'Deaths'];

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

	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 = {};
	data.forEach(function(d){
	rateById[d.RegionCode] = d;
	});

	var path = d3.geo.path().projection(projection);

	function fillfn(d){ return color(+rateById[d.properties.region][criteria[switcher.data()[0]]]);}

	var switcher = d3.select('body')
	.append('button')
	.data([1])
	.classed('switcher', true)
	.html(function(d){ return 'Перейти к количеству ' + ['аварий', 'смертей'][+!d]; } )
	.on('click', function(){
	var self = d3.select(this);
	self.data([+!self.data()[0]]);
	self.html(function(d){ return 'Перейти к количеству ' + ['аварий', 'смертей'][+!d];} )
	d3.selectAll('.mapobject')
	.transition()
	.duration(1200)
	.style('fill', fillfn);
	});

	var svg = d3.select('body').append('svg')
	.attr('width', fullwidth)
	.attr('height', fullheight)

	var mapel = svg.append('g')
	.attr('width', width)
	.attr('height', height)
	.attr('transform','translate(' + margin.left + ',' + margin.top +')');

	mapel.selectAll('path')
	.data(topojson.feature(map, map.objects.russia).features)
	.enter().append('path')
	.attr('d', path)
	.classed('mapobject', true)
	.style('fill', fillfn)

	var city = mapel.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', 2)
	.style('fill', 'white');

	city.append('text');
	city.selectAll('text')
	.attr('y', 2)
	.attr('x', 5)
	.text(function (d) { return d.City });

	}
	}//]]>

	</script>


	</head>
	<body>
	<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>

	</body>


	</html>