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.devg.ru/data/russia.json')
  .defer(d3.csv, 'http://d3.devg.ru/data/accidents.csv')
  .defer(d3.tsv, 'http://d3.devg.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)
    .attr('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')
    .attr('font-family', 'sans-serif')
    .attr('font-size', '11px')
    .attr('text-anchor', 'middle')
    .attr('stroke', 'white')
    .attr('fill', 'white')
    .attr('stroke-width', 3)
    .style('text-shadow', '0 0 2px white')

  city.append('text')
    .attr('font-family', 'sans-serif')
    .attr('font-size', '11px')
    .attr('text-anchor', 'middle')

  city.selectAll('text')
    .attr('y', function (d) {
      if (d.City == 'Красноярск') return 13
      return -7
    })
    .text(function (d) { return d.City })
}

function drawLegend(svg) {

  var legendSize = 20
  var legendLabels = [
    '< 300', '300-600', '600-900', '900-1200', '1200-1500', '> 1500'
  ]
  var legendDomain = d3.range(0, 1501, 300)

  var legend = svg.selectAll('g.legend')
    .data(legendDomain)
    .enter().append('g')
    .attr('class', 'legend')

  legend.append('rect')
    .attr('x', 200)
    .attr('y', function (d, i) {
      return i * legendSize
    })
    .attr('width', legendSize)
    .attr('height', legendSize)
    .attr('fill', function (d, i) { return color(d) })
    .attr('opacity', 0.8)
    .attr('stroke', 'black')
    .attr('stroke-width', 0.3)

  legend.append('text')
    .attr('x', 230)
    .attr('dy','-4')
    .attr('font-family', 'sans-serif')
    .attr('font-size', '12px')
    .attr('y', function (d, i) {
      return (i + 1) * legendSize
    })
    .text(function (d, i) {
      return legendLabels[i]
    })

}

function ready(error, map, data, cities) {
  var svg = d3.select('body')
    .append('svg')
    .attr('width', width * 0.39)
    .attr('height', height)

  var projection = d3.geoAlbers()
    .rotate([-105, 0])
    .center([-10, 65])
    .parallels([52, 64])
    .scale(1000)
    .translate([width * 0.675, height * 0.7])

  var svg2 = d3.select('body')
    .append('svg')
    .attr('width', width * 0.5)
    .attr('height', height)
    .style('border-left', '1px solid #000')
    .style('margin', '10px auto')

  var projection2 = d3.geoAlbers()
    .rotate([-105, 0])
    .center([-10, 65])
    .parallels([52, 64])
    .scale(500)
    .translate([width * 0.1425, height * 0.65])

  var rateById = {}
  data.forEach(function (d) { rateById[d.RegionCode] = +d.Deaths })

  drawMap(svg, map, cities, rateById, projection)
  drawMap(svg2, map, cities.filter(function (a) {
    return a.lon > 70
  }), rateById, projection2)

  drawLegend(svg2)
  svg.append('text')
    .attr('font-family', 'sans-serif')
    .text('× 2')
    .attr('x', width * 0.36)
    .attr('opacity', 0.5)
    .attr('y', 20)
}
</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.devg.ru/data/russia.json')
	.defer(d3.csv, 'http://d3.devg.ru/data/accidents.csv')
	.defer(d3.tsv, 'http://d3.devg.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)
	.attr('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')
	.attr('font-family', 'sans-serif')
	.attr('font-size', '11px')
	.attr('text-anchor', 'middle')
	.attr('stroke', 'white')
	.attr('fill', 'white')
	.attr('stroke-width', 3)
	.style('text-shadow', '0 0 2px white')

	city.append('text')
	.attr('font-family', 'sans-serif')
	.attr('font-size', '11px')
	.attr('text-anchor', 'middle')

	city.selectAll('text')
	.attr('y', function (d) {
	if (d.City == 'Красноярск') return 13
	return -7
	})
	.text(function (d) { return d.City })
	}

	function drawLegend(svg) {

	var legendSize = 20
	var legendLabels = [
	'< 300', '300-600', '600-900', '900-1200', '1200-1500', '> 1500'
	]
	var legendDomain = d3.range(0, 1501, 300)

	var legend = svg.selectAll('g.legend')
	.data(legendDomain)
	.enter().append('g')
	.attr('class', 'legend')

	legend.append('rect')
	.attr('x', 200)
	.attr('y', function (d, i) {
	return i * legendSize
	})
	.attr('width', legendSize)
	.attr('height', legendSize)
	.attr('fill', function (d, i) { return color(d) })
	.attr('opacity', 0.8)
	.attr('stroke', 'black')
	.attr('stroke-width', 0.3)

	legend.append('text')
	.attr('x', 230)
	.attr('dy','-4')
	.attr('font-family', 'sans-serif')
	.attr('font-size', '12px')
	.attr('y', function (d, i) {
	return (i + 1) * legendSize
	})
	.text(function (d, i) {
	return legendLabels[i]
	})

	}

	function ready(error, map, data, cities) {
	var svg = d3.select('body')
	.append('svg')
	.attr('width', width * 0.39)
	.attr('height', height)

	var projection = d3.geoAlbers()
	.rotate([-105, 0])
	.center([-10, 65])
	.parallels([52, 64])
	.scale(1000)
	.translate([width * 0.675, height * 0.7])

	var svg2 = d3.select('body')
	.append('svg')
	.attr('width', width * 0.5)
	.attr('height', height)
	.style('border-left', '1px solid #000')
	.style('margin', '10px auto')

	var projection2 = d3.geoAlbers()
	.rotate([-105, 0])
	.center([-10, 65])
	.parallels([52, 64])
	.scale(500)
	.translate([width * 0.1425, height * 0.65])

	var rateById = {}
	data.forEach(function (d) { rateById[d.RegionCode] = +d.Deaths })

	drawMap(svg, map, cities, rateById, projection)
	drawMap(svg2, map, cities.filter(function (a) {
	return a.lon > 70
	}), rateById, projection2)

	drawLegend(svg2)
	svg.append('text')
	.attr('font-family', 'sans-serif')
	.text('× 2')
	.attr('x', width * 0.36)
	.attr('opacity', 0.5)
	.attr('y', 20)
	}
	</script>
	</body>
	</html>