kutovova/index.html

## index.html
<!DOCTYPE html>
<style>
body{
    font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;

}
path {
            stroke: white;
            stroke-width: 0.3px;
        }
.city {
        font-size: 10px;
}
.title
{
    font-size:22px;
    font-weight:800;
}
</style>
<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['YlOrRd'][6]);

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

    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]) })
            .on('mouseover', function(d,i) {
                d3.select(this).attr('opacity', 0.6)
                d3.append('rect')
                    .attr('x', d3.mouse(this))
                    .attr('y', d3.mouse(this))
                    .attr('width', 200)
                    .attr('width', 50)
                    .style('fill', 'white')

            })
            .on('mouseout', function(d,i) {
                d3.select(this).attr('opacity', 1)
            });


    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)
            .style('fill', 'black');
        city.append('text')
            .attr('y', -7)
            .attr('x', 4)
            .text(function (d) { return d.City })
            .each(function (d) { d.Width = this.getBBox().width +10 })
        city.append('rect')
            .attr('opacity',0.2)
            .attr('rx', 3)
            .attr('y',-18)
            .attr('x',-1)
            .attr('width', function (d) { return d.Width ; })
            .attr('height', 16)
            .style('fill', 'white');
  }

function ready (error, map, data, cities) {

    var rateById = {};
    data.forEach(function (d) {rateById[d.RegionCode] = +d.Deaths}
                );

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


    drawMap(svg, map, cities, rateById, projection);

    }

    svg.append('text')
        .attr('class', 'title')
        .attr('x', 20)
        .attr('y', 20)
        .attr('fill', '#303030')
        .text('Карта автомобильных аварий')

    svg.append('text')
        .attr('class', 'title')
        .attr('x', 20)
        .attr('y', 50)
        .attr('fill', '#303030')
        .text('в России в 2012 году')
</script>
</body>
</html>
	<!DOCTYPE html>
	<style>
	body{
	font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;

	}
	path {
	stroke: white;
	stroke-width: 0.3px;
	}
	.city {
	font-size: 10px;
	}
	.title
	{
	font-size:22px;
	font-weight:800;
	}
	</style>
	<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['YlOrRd'][6]);

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

	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]) })
	.on('mouseover', function(d,i) {
	d3.select(this).attr('opacity', 0.6)
	d3.append('rect')
	.attr('x', d3.mouse(this))
	.attr('y', d3.mouse(this))
	.attr('width', 200)
	.attr('width', 50)
	.style('fill', 'white')

	})
	.on('mouseout', function(d,i) {
	d3.select(this).attr('opacity', 1)
	});


	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)
	.style('fill', 'black');
	city.append('text')
	.attr('y', -7)
	.attr('x', 4)
	.text(function (d) { return d.City })
	.each(function (d) { d.Width = this.getBBox().width +10 })
	city.append('rect')
	.attr('opacity',0.2)
	.attr('rx', 3)
	.attr('y',-18)
	.attr('x',-1)
	.attr('width', function (d) { return d.Width ; })
	.attr('height', 16)
	.style('fill', 'white');
	}

	function ready (error, map, data, cities) {

	var rateById = {};
	data.forEach(function (d) {rateById[d.RegionCode] = +d.Deaths}
	);

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


	drawMap(svg, map, cities, rateById, projection);

	}

	svg.append('text')
	.attr('class', 'title')
	.attr('x', 20)
	.attr('y', 20)
	.attr('fill', '#303030')
	.text('Карта автомобильных аварий')

	svg.append('text')
	.attr('class', 'title')
	.attr('x', 20)
	.attr('y', 50)
	.attr('fill', '#303030')
	.text('в России в 2012 году')
	</script>
	</body>
	</html>