created by http://livecoding.io

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;

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

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

function makeMyMap(us){
	svg.append('path')
		.datum(topojson.feature(us, us.objects.usStates))
		.attr('d', path)
		.attr('class', 'states');
};

function makeAnotherMap(us) {
  svg.selectAll("path")
    .data(topojson.feature(us, us.objects.usStates).features)
    .enter().append("path")
    .attr('d', path)
	  .attr('class', 'state');
}

makeMyMap(us);

water.json