johan · November 11, 2011 09:32
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>Earthquakes &gt; 1.0 the past week</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script src="http://mbostock.github.com/d3/d3.csv.js?2.5.0"></script>
    <script src="http://mbostock.github.com/d3/d3.time.js?2.5.0"></script>
    <style type="text/css">

 html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
 }

 .quakes, .quakes svg {
  position: absolute;
 }

 .quakes svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
  /* we need rather many text shadows to outline the text in enough contrast */
  text-shadow: 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF,
               0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF;
 }

 .quakes circle {
  stroke: black;
  stroke-width: 1px;
 }

 #ca-zipcodes path {
  stroke: #fff;
  stroke-width: .0125px;
 }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="index.js"></script>
  </body>
 </html>
diff --git a/index.js b/index.js
 // Create the Google Map…
 var map = new google.maps.Map
  ( d3.select("#map").node()
  , { zoom: 8
    , center: new google.maps.LatLng(37.76487, -122.41948)
    , mapTypeId: google.maps.MapTypeId.TERRAIN
    }
  );

 var data // populated once we've loaded the csv

  , time_now = new Date
  , week_ago = new Date(time_now - 864e5 * 7)
  , colour   = d3.time.scale()
    .domain([time_now, week_ago])
    .interpolate(d3.interpolateRgb)
    .range(['red', 'steelblue'])
  ;

 // Src, Eqid, Version, Datetime, Lat, Lon,
 //   Magnitude, Depth, NST, Region
 // nc,71676251,6,"Saturday, November  5, 2011 21:52:18 UTC",37.8460,-122.2407,
 //   3.1,6.00,175,"San Francisco Bay area, California"
 d3.csv("/d/1356889/earthquakes.csv", function(d) {
  function parse(d) {
    return { id:    d.Eqid, region: d.Region //, v: d.Version
           , time:  new Date(d.Datetime), nst: d.NST
           , depth: +d.Depth, magnitude: d.Magnitude
           , lat:   +d.Lat
           , lng:   +d.Lon
           };
  }

  data = d.filter(function(d) { return d.Src === 'nc'; }).map(parse);
  var overlay = new google.maps.OverlayView();

  // Add the container when the overlay is added to the map.
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "quakes");

    // Draw each marker as a separate SVG element.
    // We could use a single SVG, but what size would it have?
    overlay.draw = function() {
      var projection = this.getProjection(),
          padding = 10;

      var marker = layer.selectAll("svg")
          .data(data)
          .each(transform) // update existing markers
        .enter().append("svg:svg")
          .each(transform)
          .attr("class", "marker")
        .append('svg:g');

      marker.append('svg:title').text(function(d) {
        return 'Magnitude '+ d.magnitude +' in '+ d3.region;
      });

      // Add a circle.
      marker.append("svg:circle")
          .attr("r", function(d) { return 1 + 3 * Math.sqrt(+d.magnitude); })
          .attr("cx", padding)
          .attr("cy", padding)
          .attr('fill', function(d) { return colour(d.time); });

      // Add a label.
      marker.append("svg:text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { return d.magnitude; });

      function transform(d) {
        d = new google.maps.LatLng(d.lat, d.lng);
        d = projection.fromLatLngToDivPixel(d);
        return d3.select(this)
            .style("left", (d.x - padding) + "px")
            .style("top", (d.y - padding) + "px");
      }
    };
  };

  // Bind our overlay to the map…
  overlay.setMap(map);
 });
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<title>Earthquakes > 1.0 the past week</title>
	<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
	<script src="http://mbostock.github.com/d3/d3.csv.js?2.5.0"></script>
	<script src="http://mbostock.github.com/d3/d3.time.js?2.5.0"></script>
	<style type="text/css">

	html, body, #map {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	.quakes, .quakes svg {
	position: absolute;
	}

	.quakes svg {
	width: 60px;
	height: 20px;
	padding-right: 100px;
	font: 10px sans-serif;
	/* we need rather many text shadows to outline the text in enough contrast */
	text-shadow: 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
	0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
	0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
	0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF,
	0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF;
	}

	.quakes circle {
	stroke: black;
	stroke-width: 1px;
	}

	#ca-zipcodes path {
	stroke: #fff;
	stroke-width: .0125px;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script src="index.js"></script>
	</body>
	</html>
	// Create the Google Map…
	var map = new google.maps.Map
	( d3.select("#map").node()
	, { zoom: 8
	, center: new google.maps.LatLng(37.76487, -122.41948)
	, mapTypeId: google.maps.MapTypeId.TERRAIN
	}
	);

	var data // populated once we've loaded the csv

	, time_now = new Date
	, week_ago = new Date(time_now - 864e5 * 7)
	, colour = d3.time.scale()
	.domain([time_now, week_ago])
	.interpolate(d3.interpolateRgb)
	.range(['red', 'steelblue'])
	;

	// Src, Eqid, Version, Datetime, Lat, Lon,
	// Magnitude, Depth, NST, Region
	// nc,71676251,6,"Saturday, November 5, 2011 21:52:18 UTC",37.8460,-122.2407,
	// 3.1,6.00,175,"San Francisco Bay area, California"
	d3.csv("/d/1356889/earthquakes.csv", function(d) {
	function parse(d) {
	return { id: d.Eqid, region: d.Region //, v: d.Version
	, time: new Date(d.Datetime), nst: d.NST
	, depth: +d.Depth, magnitude: d.Magnitude
	, lat: +d.Lat
	, lng: +d.Lon
	};
	}

	data = d.filter(function(d) { return d.Src === 'nc'; }).map(parse);
	var overlay = new google.maps.OverlayView();

	// Add the container when the overlay is added to the map.
	overlay.onAdd = function() {
	var layer = d3.select(this.getPanes().overlayLayer).append("div")
	.attr("class", "quakes");

	// Draw each marker as a separate SVG element.
	// We could use a single SVG, but what size would it have?
	overlay.draw = function() {
	var projection = this.getProjection(),
	padding = 10;

	var marker = layer.selectAll("svg")
	.data(data)
	.each(transform) // update existing markers
	.enter().append("svg:svg")
	.each(transform)
	.attr("class", "marker")
	.append('svg:g');

	marker.append('svg:title').text(function(d) {
	return 'Magnitude '+ d.magnitude +' in '+ d3.region;
	});

	// Add a circle.
	marker.append("svg:circle")
	.attr("r", function(d) { return 1 + 3 * Math.sqrt(+d.magnitude); })
	.attr("cx", padding)
	.attr("cy", padding)
	.attr('fill', function(d) { return colour(d.time); });

	// Add a label.
	marker.append("svg:text")
	.attr("x", padding + 7)
	.attr("y", padding)
	.attr("dy", ".31em")
	.text(function(d) { return d.magnitude; });

	function transform(d) {
	d = new google.maps.LatLng(d.lat, d.lng);
	d = projection.fromLatLngToDivPixel(d);
	return d3.select(this)
	.style("left", (d.x - padding) + "px")
	.style("top", (d.y - padding) + "px");
	}
	};
	};

	// Bind our overlay to the map…
	overlay.setMap(map);
	});