created by http://livecoding.io

README.md

View this code at http://livecoding.io/9940874

options.json

{
    "libraries": [
        "d3",
        "TopoJSON"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

.state {
  fill: #e7e7e7;
  stroke: #fff;
  stroke-width: 2px;
}

water.html

<div id="vis">
</div>

water.js

var width = 760,
	height = 500;

/// data

var us = livecoding.json.geometry;
var stats = livecoding.json.stats;

function findExtent() {
  var ratios = [];
  Object.keys(stats).forEach(function(state) {
    ratios.push(stats[state].water_to_land_ratio);
  });
  return d3.extent(ratios);
}
var colorScale = d3.scale.linear()
  .domain(findExtent())
  .range(["#E3EEFF", "#6C9EF0"]);

/// containers

d3.selectAll("canvas").remove();
d3.selectAll("dummy").remove();

var canvas = d3.select('#vis').append('canvas')
	.attr('width', width)
	.attr('height', height);

var proxy = d3.select("#vis").append("dummy");

/// map details

var projection = d3.geo.albersUsa()
	.scale(900)
	.translate([width / 2, height / 2]); 

var context = canvas.node().getContext("2d");
var path = d3.geo.path()
	.projection(projection)
    .context(context);

context.strokeStyle = '#fff';

proxy.selectAll("dummy")
  .data(topojson.feature(us, us.objects.usStates).features)
  .enter().append("dummy")
  .each(function(d) {
    context.fillStyle = colorScale(stats[d.properties.STATE_ABBR].water_to_land_ratio);
    context.beginPath()
    path(d);
    context.fill();
    context.stroke();
    context.closePath();
  });

water.json