Skip to content

Instantly share code, notes, and snippets.

@kclosu

kclosu/index.html

Created January 26, 2014 15:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kclosu/8634593 to your computer and use it in GitHub Desktop.
Save kclosu/8634593 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment