created by http://livecoding.io

README.md

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

options.json

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

water.css

body { 
  font: 11px sans-serif; 
}

svg {  border: solid 1px #CCC; }
  .states {
    fill: #DDD;
    stroke: #CCC;
  }
  .boroughs {
    fill: #AAA;
    stroke: #666;
  }
    .borough:hover {
      fill:#999;
    }

water.html

<svg></svg>

water.js

var width = 1000;
var height = 900;

// Set the width and height of the SVG
var svg = d3.select('svg')
            .style("width",width)
            .style("height",height);

// Make a couple of groups in the SVG to hold our two different types of map data (state outlines and borough outlines).
var state_map = svg.append("g").attr("class","states");
var borough_map = svg.append("g").attr("class","boroughs");

var maptext = svg.append("g")
              .attr("class","textGroup")
              .append("text")
              .attr("class","label").text("hey");

// Start our map projection
var nyc_projection = d3.geo.mercator();

// Set some variables to center it over NYC
nyc_projection.center([-74.25,40.925])
              .scale(436077)
              .translate([0,0]);

// Start a "path generator" using the map projection above
var nyc_path = d3.geo.path().projection(nyc_projection);

borough_map.selectAll("path")
      .data(livecoding.json.features)
    .enter().append("path")
      .attr("d", nyc_path)
      .attr("class", "borough")

borough_map.selectAll("path")
  .on("click",function(d) {
    d3.select(".label")
      .attr("transform", "translate(" + nyc_path.centroid(d) + ")")
      .style("text-anchor", "middle")
      .text(d.properties.BoroName);
    });

water.json