davekelly/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example choropleth encodes road deaths in the Republic of Ireland in 2010. The data is taken from the Irish Road Safety Authority. Irish geoJSON data based on https://gist.github.com/2183412. Colours by Colorbrewer.

  
## choropleth.js
var data; // loaded asynchronously

//Albers projection values based on playing with ireland.json using D3's Albers Example
var proj = d3.geo.albers()
          .origin([-7.9,53.3])
          .scale(6000)
          .translate([450,270]);
var path = d3.geo.path().projection(proj);

var svg = d3.select("#chart")
  .append("svg");

var counties = svg.append("g")
    .attr("id", "ireland");

//Irish geoJSON based on https://gist.github.com/2183412
d3.json("ireland.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("class", "ireland")
      .attr("d", path);
});

d3.json("road-deaths-2010.json", function(json) {
  data = json;
  counties.selectAll("path")
      .attr("class", quantize);
});

function quantize(d) {
  return "q" + Math.min(8, ~~(data[d.properties.id] * 9 / 21)) + "-9";
}

## index.html
<!DOCTYPE html>
<html>
<head>
<style>

svg {
background: #fff;
width: 900px;
height: 500px;
}

#ireland path{
stroke: #fff;
stroke-width: .25px;
}

.q0-9{fill:rgb(247,252,245)}
.q1-9{fill:rgb(229,245,224)}
.q2-9{fill:rgb(199,233,192)}
.q3-9{fill:rgb(161,217,155)}
.q4-9{fill:rgb(116,196,118)}
.q5-9{fill:rgb(65,171,93)}
.q6-9{fill:rgb(35,139,69)}
.q7-9{fill:rgb(0,109,44)}
.q8-9{fill:rgb(0,68,27)}

</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Irish Choropleth Example</title>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="choropleth.js"></script>
</body>
</html>

## ireland.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ireland.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## road-deaths-2010.json
{"Carlow":5,
  "Cavan":11,
  "Clare":4,
  "Cork":18,
  "Donegal":19,
  "Dublin":21,
  "Galway":6,
  "Kerry":11,
  "Kildare":10,
  "Kilkenny":6,
  "Laois":9,
  "Leitrim":3,
  "Limerick":18,
  "Longford":2,
  "Louth":8,
  "Mayo":7,
  "Meath":6,
  "Monaghan":3,
  "Offaly":4,
  "Roscommon":9,
  "Sligo":3,
  "Tipperary":5,
  "Waterford":5,
  "Westmeath":7,
  "Wexford":7,
  "Wicklow":5}
	var data; // loaded asynchronously

	//Albers projection values based on playing with ireland.json using D3's Albers Example
	var proj = d3.geo.albers()
	.origin([-7.9,53.3])
	.scale(6000)
	.translate([450,270]);
	var path = d3.geo.path().projection(proj);

	var svg = d3.select("#chart")
	.append("svg");

	var counties = svg.append("g")
	.attr("id", "ireland");

	//Irish geoJSON based on https://gist.github.com/2183412
	d3.json("ireland.json", function(json) {
	counties.selectAll("path")
	.data(json.features)
	.enter().append("path")
	.attr("class", "ireland")
	.attr("d", path);
	});

	d3.json("road-deaths-2010.json", function(json) {
	data = json;
	counties.selectAll("path")
	.attr("class", quantize);
	});

	function quantize(d) {
	return "q" + Math.min(8, ~~(data[d.properties.id] * 9 / 21)) + "-9";
	}
	<!DOCTYPE html>
	<html>
	<head>
	<style>

	svg {
	background: #fff;
	width: 900px;
	height: 500px;
	}

	#ireland path{
	stroke: #fff;
	stroke-width: .25px;
	}

	.q0-9{fill:rgb(247,252,245)}
	.q1-9{fill:rgb(229,245,224)}
	.q2-9{fill:rgb(199,233,192)}
	.q3-9{fill:rgb(161,217,155)}
	.q4-9{fill:rgb(116,196,118)}
	.q5-9{fill:rgb(65,171,93)}
	.q6-9{fill:rgb(35,139,69)}
	.q7-9{fill:rgb(0,109,44)}
	.q8-9{fill:rgb(0,68,27)}

	</style>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Irish Choropleth Example</title>
	<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
	</head>
	<body>
	<div id="chart"></div>
	<script type="text/javascript" src="choropleth.js"></script>
	</body>
	</html>
	{"Carlow":5,
	"Cavan":11,
	"Clare":4,
	"Cork":18,
	"Donegal":19,
	"Dublin":21,
	"Galway":6,
	"Kerry":11,
	"Kildare":10,
	"Kilkenny":6,
	"Laois":9,
	"Leitrim":3,
	"Limerick":18,
	"Longford":2,
	"Louth":8,
	"Mayo":7,
	"Meath":6,
	"Monaghan":3,
	"Offaly":4,
	"Roscommon":9,
	"Sligo":3,
	"Tipperary":5,
	"Waterford":5,
	"Westmeath":7,
	"Wexford":7,
	"Wicklow":5}