An introduction to d3.js

Additional Map Features

Point Translation:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
.land {
  fill: #eee;
  stroke: #777777;
}

circle {
  fill: steelblue;
  stroke: #fff;
  stroke-width: 3px;
}

.journey{
  fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-dasharray: 4px,8px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var projection = d3.geo.conicConformal()
    .rotate([98, 0])
    .center([0, 38])
    .parallels([29.5, 45.5])
    .scale(1000) // Change to 300 to zoom out
    .translate([width / 2, height / 2]);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var points = [
  [-122.2728, 37.8717],
  [-104.9903, 39.7392],
  [-93.2650, 44.9778],
  [-75.6008, 41.0144],
  [-86.7833, 36.1667],
  [-96.7970, 32.7767],
  [-110.9264,32.2217]
];

var line = d3.svg.line()
    .interpolate("cardinal-closed")
    .x(function(d) { return projection(d)[0]; })
    .y(function(d) { return projection(d)[1]; });

queue()
    .defer(d3.json, "../d3-maps/state_pol.json")
    .await(ready);

function ready (error, us) { 
  svg.append("g")
      .attr("class", "land")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.state_pol).features) 
    .enter().append("path")
      .attr("class", function(d) {return d.id})
      .attr("d", path)
  
  var linepath = svg.append("path")
      .data([points])
      .attr("d", line)
      .attr('class', 'journey');

svg.selectAll(".point")
      .data(points)
    .enter().append("circle")
      .attr("r", 8)
      .attr("transform", function(d) { return "translate(" + projection(d) + ")"; });

var circle = svg.append("circle")
      .attr("r", 19)
      .attr("transform", "translate(" + projection(points[0]) + ")");

// Create a loop by calling 'itself' as a callback function
  transition();

function transition() {
    circle.transition()
        .duration(10000)
        .attrTween("transform", translateAlong(linepath.node()))
        .each("end", transition);
  }
};

// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

</script>

Showcase Features:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
.land {
  fill: #eee;
  stroke: #777777;
}

.title {
  font-family: "Lato", "PT Serif", serif;
  font-size: 40px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>

var width = 960,
    height = 500,
    clickOn = false;

var projection = d3.geo.albersUsa()
      .scale(800)
      .translate([700 /2, height / 2.1]);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("text")
    .attr('class', 'title')
    .attr('x', width/2)
    .attr('y', 30)
    .style('text-anchor', 'middle')
    .text("Trigger a Transition on Click")

queue()
    .defer(d3.json, "../d3-maps/state_pol.json")
    .await(ready);

function ready (error, us) {
  svg.append("g")
      .attr("class", "land")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.state_pol).features) 
    .enter().append("path")
      .attr("class", function(d) {return d.id})
      .attr("d", path)
      .on("click", function(){
        
        if(clickOn){
          last.style("fill", "#eee");
          last.transition().duration(200).attr("transform", "translate(0,0)");
        }

var state = d3.select(this);
        var xy = getCentroid(state)
        
        state.transition().duration(200)
            .style('fill', 'gold')
            .attr("transform", "scale(1.9)translate("+(400-xy[0])+"," + (115-xy[1]) + ")")
        
        last = d3.select(this);
        clickOn = true;
      })
};

function getCentroid(selection) {
  // get the DOM element from a D3 selection
  // you could also use "this" inside .each()
  var element = selection.node(),
    // use the native SVG interface to get the bounding box
    bbox = element.getBBox();
  // return the center of the bounding box
  return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
}

</script>

Merge States:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
.land {
  fill: #eee;
  stroke: #777777;
}

.state.selected {
  fill: orange;
  stroke: #000;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>

var width = 960,
    height = 500,
    clickOn = false;

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

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "../d3-maps/state_pol.json")
    .await(ready);

var selected = d3.set([
   25, 28, 12, 47 
]);

svg.append("path")
      .datum(topojson.merge(us, us.objects.state_pol.geometries.filter(function(d, i) { return selected.has(i); })))
      .attr("class", "state selected")
      .attr("d", path);  
};
</script>

Search with Canvas (by Mike Bostock):

<!DOCTYPE html>
<meta charset="utf-8">
<style>

input,
canvas {
  position: absolute;
}

input {
  background: transparent;
  border: none;
  margin: 10px 384px;
  width: 180px;
  font-size: 18px;
  padding: 6px;
  text-align: center;
}

</style>
<input placeholder="type a zipcode">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

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

d3.csv("zipcodes.csv", function(error, zipcodes) {
  var zip0;

// Compute projected locations of each zipcode.
  zipcodes.forEach(function(d) {
    var p = projection([+d.lon, +d.lat]);
    if (p) d.x = Math.round(p[0]), d.y = Math.round(p[1]);
  });

var input = d3.select("input")
      .on("cut", function() { setTimeout(change, 10); })
      .on("paste", function() { setTimeout(change, 10); })
      .on("change", change)
      .on("keyup", change);

change();

function change() {
    var zip1 = input.property("value");
    if (zip0 === zip1) return;
    zip0 = zip1;

// Select old canvases to remove after fade.
    var canvas0 = d3.selectAll("canvas");

// Add a new canvas, initially with opacity 0, to show the new zipcodes.
    var canvas1 = d3.select("body").insert("canvas", "input")
        .attr("width", width)
        .attr("height", height)
        .style("opacity", 0);

var context = canvas1.node().getContext("2d");
    context.fillStyle = "#fff";
    context.fillRect(0, 0, width, height);

// Render the inactive zipcodes.
    context.globalAlpha = .4;
    context.fillStyle = zip1 ? "#aaa" : (zip1 = "*", "#000");
    zipcodes.forEach(function(d) {
      for (var i = 0, n = zip1.length; i < n; ++i) {
        if (d.zip[i] !== zip1[i]) {
          context.fillRect(d.x, d.y, 1, 1);
          return;
        }
      }
    });

// Render the active zipcodes.
    context.globalAlpha = 1;
    context.fillStyle = "#f00";
    zipcodes.forEach(function(d) {
      for (var i = 0, n = zip1.length; i < n; ++i) {
        if (d.zip[i] !== zip1[i]) {
          return;
        }
      }
      context.fillRect(d.x, d.y, 1, 1);
    });

// Use a transition to fade-in the new canvas.
    // When this transition finishes, remove the old canvases.
    canvas1.transition()
        .duration(350)
        .style("opacity", 1)
        .each("end", function() { canvas0.remove(); });
  }
});

</script>

Live Coding D3.js (Extras)

Additional Map Features

Additional Examples