Mokhova/index.html

## index.html
<!DOCTYPE html>
<html lang='en'>

<head>
<style>
text {
    font-family: sans-serif;
    font-size: 70%;
    margin: 20px;
    color:
}

.shade{
    fill: white;
    stroke: white;
    stroke-width:2;
    text-shadow: 0px 1px 0px rgb(210, 210, 210);
}

.city text{    text-anchor: middle;
}

city:hover .shade{
    color: white;
    text-shadow: 0px 1px 0px rgb(210, 210, 210);
    transform: scale(1.1);
}

path{
    stroke: white;
}

.city:hover text{
    transform: scale(1.1);
}
</style>

</head>
<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 width = 960;
var height = 500;

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


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);

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

function drawMap(svg, map, cities, rateById, projection) {
        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', -5)
            .text(function (d) { return d.City });
    }

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

    var projection=d3.geo.albers()
        .rotate([-105,0])
        .center([-10, 65])
        .parallels([52, 64]) /*параллели Альберта*/
        .scale(700)
        .translate([width/2, height/2]);

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

    svg.selectAll('path')
        .data(topojson.feature(map, map.objects.russia).features)
        .enter().append('path')
        .attr('d', path)
        .on('mouseover',function(d,i) {d3.select(this).attr('opacity', 0.8)})
        .on('mouseout',function(d,i) {d3.select(this).attr('opacity', 1)})
        .style('fill', function(d)  {return color(rateById[d.properties.region])
    })

        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>
	<!DOCTYPE html>
	<html lang='en'>

	<head>
	<style>
	text {
	font-family: sans-serif;
	font-size: 70%;
	margin: 20px;
	color:
	}

	.shade{
	fill: white;
	stroke: white;
	stroke-width:2;
	text-shadow: 0px 1px 0px rgb(210, 210, 210);
	}

	.city text{ text-anchor: middle;
	}

	city:hover .shade{
	color: white;
	text-shadow: 0px 1px 0px rgb(210, 210, 210);
	transform: scale(1.1);
	}

	path{
	stroke: white;
	}

	.city:hover text{
	transform: scale(1.1);
	}
	</style>

	</head>
	<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 width = 960;
	var height = 500;

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


	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);

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

	function drawMap(svg, map, cities, rateById, projection) {
	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', -5)
	.text(function (d) { return d.City });
	}

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

	var projection=d3.geo.albers()
	.rotate([-105,0])
	.center([-10, 65])
	.parallels([52, 64]) /параллели Альберта/
	.scale(700)
	.translate([width/2, height/2]);

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

	svg.selectAll('path')
	.data(topojson.feature(map, map.objects.russia).features)
	.enter().append('path')
	.attr('d', path)
	.on('mouseover',function(d,i) {d3.select(this).attr('opacity', 0.8)})
	.on('mouseout',function(d,i) {d3.select(this).attr('opacity', 1)})
	.style('fill', function(d) {return color(rateById[d.properties.region])
	})

	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>