Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
​
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
​
var width = 480,
    height = 250;
​
var color = d3.scale.threshold()
    .domain([0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 100])
    .range(['#fcfcd4', '#faf9c8', '#f8f5bc', '#f6f0b1', '#f4eaa5', '#f2e49a', '#f0dd8f', '#eed584', '#eccd79', '#eac46e', '#e8bb64', '#e6b159', '#e4a74f', '#e29c45', '#e0903c', '#de8432', '#dc7828', '#da6b1f', '#d85e16', '#d6500d']);
​
var path = d3.geo.path();
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
queue()
    .defer(d3.json, "https://gist.githubusercontent.com/Prooffreader/21ea49677755b05322e5/raw/c899e3d4f3353924e495667c842f54a07090cfab/us.json")
    .defer(d3.csv, "https://gist.githubusercontent.com/Prooffreader/21ea49677755b05322e5/raw/e965f6b044d23c8939ee2c4235f8baf08a80a70a/mapdata2014101501.csv")
    .await(ready);
​
function ready(error, us, chlorofill) {
  var scoreById = {};
​
  chlorofill.forEach(function(d) { scoreById[d.id] = +d.score; });
​
  svg.append("g")
      .attr("class", "states")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { return color(scoreById[d.id]); });
​
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
      .attr("class", "states")
      .attr("d", path);
}
​
</script>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
prooffreaderpro
0viewers