created by http://livecoding.io

README.md

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

options.json

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

water.css

.state {
  fill: #e7e7e7;
  stroke: #fff;
  stroke-width: 2px;
}
.state: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.selectAll("path.state")
  .data(topojson.feature(geometry, geometry.objects.usStates).features)
  .enter()
    .append("path")
    .attr("d", path)
    .classed("state", true);

water.json