created by http://livecoding.io

README.md

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

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;
}

water.html

<svg id="map"></svg>

water.js

var width = 960,
  height = 700;

var svg = d3.select("#map")
  .attr("width", width)
  .attr("height", height);

var geometry = livecoding.json;

var projection = d3.geo.mercator()
    .scale(950)
    .translate([width * 2.16, height * 1.5]);

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

svg.append("path")
  .datum(topojson.feature(geometry, geometry.objects.usStates))
  .attr("d", path)
  .classed("states", true);

water.json