D3 Examples - Russia choropleth example

Russia choropleth example
Смертность на дорогах России за 2012 год по официальным данным ГИБДД. Инфографика создавалась как пример создания SVG картограммы для веба. Статью о создании можете найти на Хабрахабре.
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accidents on the Road - Choropleth</title>
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
  <script type="text/javascript" src="https://d3js.org/topojson.v0.min.js"></script>
  <!-- <script type="text/javascript" src="https://d3js.org/topojson.v1.min.js"></script> -->
</head>
<style>
​
path {
  stroke:white;
  stroke-width: 1px;
}
​
body {
  font-family: Arial, sans-serif;
}
​
.city {
  font: 10px sans-serif;
  font-weight: bold;
}
​
.legend {
  font-size: 12px;
}
​
div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 150px;                  
  height: 25px;                 
  padding: 2px;             
  font-size: 10px;     
  background: #FFFFE0;
  border: 1px;      
  border-radius: 8px;           
  pointer-events: none;         
}        
</style>
<body>
  <script type="text/javascript">
  var width = 960,
  height = 500;
​
  // Setting color domains(intervals of values) for our map
​
  var color_domain = [50, 150, 350, 750, 1500]
  var ext_color_domain = [0, 50, 150, 350, 750, 1500]
  var legend_labels = ["< 50", "50+", "150+", "350+", "750+", "> 1500"]              
  var color = d3.scale.threshold()
  .domain(color_domain)
  .range(["#adfcad", "#ffcb40", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);
​
  var div = d3.select("body").append("div")   
  .attr("class", "tooltip")               
  .style("opacity", 0);
​
  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("margin", "10px auto");
​
  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);
​
  //Reading map file and data
​
  queue()
  .defer(d3.json, "/d/5685937/russia_1e-7sr.json")
  .defer(d3.csv, "Accidents.csv")
  .await(ready);
​
  //Start of Choropleth drawing
​
  function ready(error, map, data) {
   var rateById = {};
   var nameById = {};
​
   data.forEach(function(d) {
    rateById[d.RegionCode] = +d.Deaths;
    nameById[d.RegionCode] = d.RegionName;
  });
​
  //Drawing Choropleth
​
  svg.append("g")
  .attr("class", "region")
  .selectAll("path")
  .data(topojson.object(map, map.objects.russia).geometries)
  //.data(topojson.feature(map, map.objects.russia).features) <-- in case topojson.v1.js
  .enter().append("path")
  .attr("d", path)
  .style("fill", function(d) {
    return color(rateById[d.properties.region]); 
  })
  .style("opacity", 0.8)
​
  //Adding mouseevents
  .on("mouseover", function(d) {
    d3.select(this).transition().duration(300).style("opacity", 1);
    div.transition().duration(300)
    .style("opacity", 1)
    div.text(nameById[d.properties.region] + " : " + rateById[d.properties.region])
    .style("left", (d3.event.pageX) + "px")
    .style("top", (d3.event.pageY -30) + "px");
  })
  .on("mouseout", function() {
    d3.select(this)
    .transition().duration(300)
    .style("opacity", 0.8);
    div.transition().duration(300)
    .style("opacity", 0);
  })
  
   // Adding cities on the map
​
  d3.tsv("cities.tsv", function(error, data) {
    var city = svg.selectAll("g.city")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "city")
    .attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; });
​
    city.append("circle")
    .attr("r", 3)
    .style("fill", "lime")
    .style("opacity", 0.75);
​
    city.append("text")
    .attr("x", 5)
    .text(function(d) { return d.City; });
  });
  
  }; // <-- End of Choropleth drawing
 
  //Adding legend for our Choropleth
​
  var legend = svg.selectAll("g.legend")
  .data(ext_color_domain)
  .enter().append("g")
  .attr("class", "legend");
​
  var ls_w = 20, ls_h = 20;
​
  legend.append("rect")
  .attr("x", 20)
  .attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
  .attr("width", ls_w)
  .attr("height", ls_h)
  .style("fill", function(d, i) { return color(d); })
  .style("opacity", 0.8);
​
  legend.append("text")
  .attr("x", 50)
  .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
  .text(function(d, i){ return legend_labels[i]; });
​
  </script>
</body>
</html>
    