Skip to content

Instantly share code, notes, and snippets.

Last active December 10, 2015 15:38
Show Gist options
  • Save andrewxhill/4455569 to your computer and use it in GitHub Desktop.
Save andrewxhill/4455569 to your computer and use it in GitHub Desktop.
Simple CartoDB + D3 earthquake example
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Easy earthquakes</title>
<script src=""></script>
<script src=""></script>
<style type="text/css">
svg {
width: 960px;
height: 500px;
svg:active {
cursor: move;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
circle {
fill: none;
stroke-width: 1.5px;
#first_layer path {
fill: none;
stroke: black;
stroke-linecap: round;
stroke-linejoin: round;
<script type="text/javascript">
var first_layer = 'd3_world_borders';
var sql = new cartodb.SQL({ user: 'viz2', format: 'geojson', dp: 5});
// Define our SVG element outside our SQL functions
var svg ="body")
.on("zoom", redraw))
// Our projection.
var xy = d3.geo.mercator();
svg.append("g").attr("id", "first_layer");
var path = d3.geo.path();
sql.execute("SELECT ST_Simplify(the_geom,0.01) as the_geom FROM {{table_name}} WHERE the_geom IS NOT NULL", {table_name: first_layer})
.done(function(collection) {"#first_layer")
.attr("d", path.projection(xy));
.error(function(errors) {
// console.log('Errors! Oh no!')
var earthquakes;
sql.execute("SELECT the_geom, quakedate, magnitude FROM {{table_name}} WHERE the_geom IS NOT NULL ORDER BY quakedate ASC", {table_name: 'earthquaked3'})
.done(function(collection) {
earthquakes = collection.features;
var i = 0;
function quake() {
var c = earthquakes[i];
.attr("cx", xy(c.geometry.coordinates)[0])
.attr("cy", xy(c.geometry.coordinates)[1])
.attr("r", 1)
.style("fill", "red")
.style("fill-opacity", 0.5)
.style("stroke", "red")
.style("stroke-opacity", 0.5)
.attr("r", * 20)
.style("fill-opacity", 1e-6)
.style("stroke-opacity", 1e-6)
setTimeout(quake, 200);
if (earthquakes.length==i) i = 0;
function redraw() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment