Skip to content

Instantly share code, notes, and snippets.

@joelanders

joelanders/geo.html

Created November 6, 2012 04:48
Show Gist options
  • Save joelanders/4022643 to your computer and use it in GitHub Desktop.
Save joelanders/4022643 to your computer and use it in GitHub Desktop.
Download ZIP
Quick United States colorization with D3.
Raw
geo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>US colors</title>
<script type="text/javascript" src="./d3.v2.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="geo.js"></script>
</body>
</html>
Raw
geo.js
// derived from http://mbostock.github.com/d3/ex/choropleth.html
var proj = d3.geo.albersUsa().scale(500).translate([250,150]);
var path = d3.geo.path().projection(proj);
var svg = d3.select("#chart")
.append("svg")
.attr("width", 500)
.attr("height", 300);
var states = svg.append("g")
.attr("id", "states");
var color = d3.interpolateRgb("#f00", "#00f");
d3.json("./us-states.json", function(json) {
states.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path);
});
d3.json("./states-data.json", function(joedata) {
states.selectAll("path")
.attr("fill", function(d,i){return color( Math.random() );})
// .attr("fill", function(d,i){return color(joedata[d.properties.name]);} )
});
Raw
states-data.json
{"Alabama" : 0.10,
"Alaska" : 0,
"Arizona" : 0,
"Arkansas" : 0,
"California" : 0.75,
"Colorado" : 0,
"Connecticut" : 0,
"Delaware" : 0,
"District of Columbia" : 0,
"Florida" : 0,
"Georgia" : 0,
"Hawaii" : 0,
"Idaho" : 0,
"Illinois" : 0,
"Indiana" : 0,
"Iowa" : 0,
"Kansas" : 0,
"Kentucky" : 0,
"Louisiana" : 0,
"Maine" : 0,
"Maryland" : 0,
"Massachusetts" : 0,
"Michigan" : 0,
"Minnesota" : 0,
"Mississippi" : 0,
"Missouri" : 0,
"Montana" : 0,
"Nebraska" : 0,
"Nevada" : 0.5,
"New Hampshire" : 0,
"New Jersey" : 0,
"New Mexico" : 0,
"New York" : 0,
"North Carolina" : 0,
"North Dakota" : 0,
"Ohio" : 0,
"Oklahoma" : 0,
"Oregon" : 0,
"Pennsylvania" : 0,
"Rhode Island" : 0,
"South Carolina" : 0,
"South Dakota" : 0,
"Tennessee" : 0,
"Texas" : 0.15,
"Utah" : 0,
"Vermont" : 0,
"Virginia" : 0,
"Washington" : 0,
"West Virginia" : 0,
"Wisconsin" : 0,
"Wyoming" : 0,
"Puerto Rico" : 0}
Display the source blob
Display the rendered blob
Raw
us-states.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment