Skip to content

Instantly share code, notes, and snippets.

@adima

adima/README.md

Created April 24, 2016 15:57
Show Gist options
  • Save adima/b83f87901d85d46e7ff4d1890f939e8f to your computer and use it in GitHub Desktop.
Save adima/b83f87901d85d46e7ff4d1890f939e8f to your computer and use it in GitHub Desktop.
Download ZIP
Better map of accidents in Russia, 2012, bare
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Accidents on the Road - Choropleth</title>
<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>
<style>
path {
stroke: white;
stroke-width: 1px;
}
</style>
</head>
<body>
<script type='text/javascript'>
var width = 960, 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')
.await(ready)
function ready(error, map, data) {
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
var projection = d3.geo.albers()
.rotate([-105, 0])
.center([-10, 65])
.parallels([52, 64])
.scale(700)
.translate([width * 0.5, height * 0.5])
var rateById = {}
data.forEach(function (d) {
rateById[d.RegionCode] = Number(d.Deaths)
})
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])
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment