README.md

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

options.json

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

water.css

.states {
	fill: #e5e5e5;
	stroke: #fff;
	stroke-width:2px;
}
.states:hover {
	fill: steelblue;
}
  
.state {
  fill: #e7e7e7;
  stroke: #fff;
  stroke-width: 2px;
}
.state:hover {
	fill: steelblue;
}

water.html

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

water.js

var width = 760,
	height = 500;

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

d3.selectAll("svg").remove();

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"]);


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

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

var path = d3.geo.path()
	.projection(projection);

svg.selectAll("path")
  .data(topojson.feature(us, us.objects.usStates).features)
  .enter().append("path")
  .attr('d', path)
    .attr('class', 'state')
    .style("fill", function(d) {
      return colorScale(stats[d.properties.STATE_ABBR].water_to_land_ratio);
    });

water.json