Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 26, 2014 16:30
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 anonymous/8635290 to your computer and use it in GitHub Desktop.
Save anonymous/8635290 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment