Polymaps + D3, Part 2

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

@import url("//polymaps.org/style.css");

html, body {
  height: 100%;
  background: #E6E6E6;
  margin: 0;
  font: 10px sans-serif;
}

svg {
  display: block;
}

circle {
  stroke: black;
  fill: brown;
  fill-opacity: .5;
}

#map {
  width: 960px;
  height: 500px;
}

</style>
<div id="map"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//polymaps.org/polymaps.min.js"></script>
<script>

var po = org.polymaps;

// Create the map object, add it to #map…
var map = po.map()
    .container(d3.select("#map").append("svg").node())
    .zoom(8)
    .add(po.interact());

// Add the CloudMade image tiles as a base layer…
map.add(po.image()
    .url(po.url("https://{S}tile.cloudmade.com"
    + "/1a1b06b230af4efdbb989ea99e9841af" // https://cloudmade.com/register
    + "/998/256/{Z}/{X}/{Y}.png")
    .hosts(["a.", "b.", "c.", ""])));

// Add the compass control on top.
map.add(po.compass()
    .pan("none"));

// Load the station data. When the data comes back, display it.
d3.json("stations.json", function(error, data) {
  if (error) throw error;

// Insert our layer beneath the compass.
  var layer = d3.select("#map svg").insert("g", ".compass");

// Add an svg:g for each station.
  var marker = layer.selectAll("g")
      .data(d3.entries(data))
    .enter().append("g")
      .attr("transform", transform);

// Add a circle.
  marker.append("circle")
      .attr("r", 4.5);

// Add a label.
  marker.append("text")
      .attr("x", 7)
      .attr("dy", ".31em")
      .text(function(d) { return d.key; });

// Whenever the map moves, update the marker positions.
  map.on("move", function() {
    layer.selectAll("g").attr("transform", transform);
  });

function transform(d) {
    d = map.locationPoint({lon: d.value[0], lat: d.value[1]});
    return "translate(" + d.x + "," + d.y + ")";
  }
});

</script>

https://d3js.org/d3.v3.min.js

https://polymaps.org/polymaps.min.js