devgru/.block

## .block
license: mit

## 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.v4.js'></script>
    <script src='http://d3js.org/topojson.v1.js'></script>
    <script src='http://d3js.org/colorbrewer.v1.js'></script>
</head>
<body>
<script type='text/javascript'>
var width = 960
var height = 500
var colorDomain = d3.range(300, 1501, 300)

var color = d3.scaleThreshold()
  .range(colorbrewer['RdYlGn'][6].reverse())
  .domain(colorDomain)

d3.queue()
  .defer(d3.json, 'http://d3-js.ru/data/russia.json')
  .defer(d3.csv, 'http://d3-js.ru/data/accidents.csv')
  .defer(d3.tsv, 'http://d3-js.ru/data/cities.tsv')
  .await(ready)

function drawMap(svg, map, cities, rateById, projection) {
  var path = d3.geoPath()
    .projection(projection)
  var mapData = topojson.feature(map, map.objects.russia).features

  svg.append('g')
    .attr('class', 'region')
    .selectAll('path')
    .data(mapData)
    .enter()
    .append('path')
    .attr('stroke', 'white')
    .attr('stroke-width', 1)
    .attr('d', path)
    .style('fill', function (d) {
      return color(rateById[d.properties.region])
    })

  var city = svg.selectAll('g')
    .data(cities)
    .enter()
    .append('g')
    .attr('transform', function (d) {
      return 'translate(' + projection([d.lon, d.lat]) + ')'
    })

  city.append('circle')
    .attr('r', 1.5)
    .style('fill', 'white')

  city.append('text');
  city.selectAll('text')
    .attr('dy', -7)
    .text(function (d) { return d.City })
    .attr('font-family', 'sans-serif')
    .attr('font-size', '11px')
    .attr('text-anchor', 'middle')
}

function ready(error, map, data, cities) {
  var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .style('margin', '10px auto')

  var projection = d3.geoAlbers()
    .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)
  })

  drawMap(svg, map, cities, rateById, projection)
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<meta charset='utf-8'>
	<title>Accidents on the Road - Choropleth</title>
	<script src='http://d3js.org/d3.v4.js'></script>
	<script src='http://d3js.org/topojson.v1.js'></script>
	<script src='http://d3js.org/colorbrewer.v1.js'></script>
	</head>
	<body>
	<script type='text/javascript'>
	var width = 960
	var height = 500
	var colorDomain = d3.range(300, 1501, 300)

	var color = d3.scaleThreshold()
	.range(colorbrewer['RdYlGn'][6].reverse())
	.domain(colorDomain)

	d3.queue()
	.defer(d3.json, 'http://d3-js.ru/data/russia.json')
	.defer(d3.csv, 'http://d3-js.ru/data/accidents.csv')
	.defer(d3.tsv, 'http://d3-js.ru/data/cities.tsv')
	.await(ready)

	function drawMap(svg, map, cities, rateById, projection) {
	var path = d3.geoPath()
	.projection(projection)
	var mapData = topojson.feature(map, map.objects.russia).features

	svg.append('g')
	.attr('class', 'region')
	.selectAll('path')
	.data(mapData)
	.enter()
	.append('path')
	.attr('stroke', 'white')
	.attr('stroke-width', 1)
	.attr('d', path)
	.style('fill', function (d) {
	return color(rateById[d.properties.region])
	})

	var city = svg.selectAll('g')
	.data(cities)
	.enter()
	.append('g')
	.attr('transform', function (d) {
	return 'translate(' + projection([d.lon, d.lat]) + ')'
	})

	city.append('circle')
	.attr('r', 1.5)
	.style('fill', 'white')

	city.append('text');
	city.selectAll('text')
	.attr('dy', -7)
	.text(function (d) { return d.City })
	.attr('font-family', 'sans-serif')
	.attr('font-size', '11px')
	.attr('text-anchor', 'middle')
	}

	function ready(error, map, data, cities) {
	var svg = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.style('margin', '10px auto')

	var projection = d3.geoAlbers()
	.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)
	})

	drawMap(svg, map, cities, rateById, projection)
	}
	</script>
	</body>
	</html>