Skip to content

Instantly share code, notes, and snippets.

@tlfrd

tlfrd/.block

Last active August 15, 2017 10:54
Show Gist options
  • Save tlfrd/acf5911fdc37cacb00b4b85b59b7b09d to your computer and use it in GitHub Desktop.
Save tlfrd/acf5911fdc37cacb00b4b85b59b7b09d to your computer and use it in GitHub Desktop.
Download ZIP
Earthquakes
Raw
.block
license: mit
Raw
README.md

Visualising the last week of earthquakes from USGS. Based on Anthony Skelton's earthquake visualisation.

TODO:

  • Automatically play
  • Add start and stop buttons
  • Stop automatic animation on mouse click
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<style>
body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
.land {
fill: black;
fill-opacity: 0.1;
stroke: black;
stroke-width: 0.5;
}
.earthquake {
fill-opacity: 0.5;
stroke: black;
stroke-width: 0.5;
}
text {
font-family: sans-serif;
}
.pulse {
fill: none;
stroke: black;
stroke-width: 0.5;
}
</style>
</head>
<body>
<script>
var margin = {top: 50, right: 50, bottom: 50, left: 50};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var counterValue = 0;
var counter = svg.append("text")
.attr("class", "counter")
.text(0);
var quakes;
var dragbehaviour = d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
var mapUrl = "https://unpkg.com/world-atlas@1/world/110m.json"
var earthquakeUrl = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
var pulseSize = 8;
var colour = d3.scaleLinear()
.range(["blue", "red"]);
var radius = d3.scaleSqrt()
.range([0, 7]);
var dateObj = new Date();
dateObj.setDate(dateObj.getDate() - 7);
var x = d3.scaleTime()
.domain([dateObj, new Date()])
.range([0, width]);
// fix this scale so that we convert the time to how many seconds ago the earthquake was
var xDelay = d3.scaleLinear()
.range([0, width]);
var projection;
function projectCoord(d, index) {
return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[index];
}
d3.queue()
.defer(d3.json, mapUrl)
.defer(d3.json, earthquakeUrl)
.await(load);
function load(error, world, earthquakes) {
if (error) throw error;
projection = d3.geoEquirectangular()
.fitSize([width, height], topojson.feature(world, world.objects.land));
radius.domain([0, d3.max(earthquakes.features, function(d) {
return d.properties.mag;
})]);
colour.domain(radius.domain());
var path = d3.geoPath()
.projection(projection);
var countries = svg.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter().append("path")
.attr("class", "land")
.attr("d", path);
setQuakeDelay(earthquakes.features);
quakes = earthquakes.features;
var xAxis = svg.append("g")
.attr("class", "x-axis")
.attr("transform", "translate(0," + (height + margin.bottom / 4) + ")")
.call(d3.axisBottom(x));
var longestDelay = earthquakes.features[0].delay;
xDelay.domain([0, longestDelay]);
var currentTime = svg.append("circle")
.attr("r", 5)
.attr("cx", 0)
.attr("cy", height)
.call(dragbehaviour);
}
function dragstarted(d) {
d3.select(this)
.style("fill", "red");
var eqCount = d3.selectAll("g.eq").size();;
counterValue = eqCount;
counter.text(counterValue);
}
function dragged(d) {
var minX = 0,
maxX = width;
var position = Math.max(minX, Math.min(maxX, d3.event.x));
d3.select(this)
.attr("cx", position);
var current = quakes.filter(function(a) {
return a.delay < xDelay.invert(position);
});
displayQuakes(current, position);
}
function dragended(d) {
d3.select(this)
.style("fill", "black");
counterValue = d3.selectAll("g.eq").size();
counter.text(counterValue)
}
var dataGroup = svg.append("g");
function displayQuakes(current, position) {
var selection = dataGroup.selectAll("g.eq")
.data(current, function(d) {
return d.id;
});
var eqSel = selection.enter()
.append("g")
.attr("class", "eq");
var eqC = eqSel.append("circle")
.attr("class", "earthquake")
.attr("cx", function(d) {
return projectCoord(d, 0);
})
.attr("cy", function(d) {
return projectCoord(d, 1);
})
.attr("r", 0)
.style("fill", function(d) {
return colour(d.properties.mag);
})
// append pulse
var eqP = eqSel.append("circle")
.attr("class", "pulse")
.attr("cx", function(d) {
return projectCoord(d, 0);
})
.attr("cy", function(d) {
return projectCoord(d, 1);
})
.attr("r", 0);
eqC.transition()
.duration(1000)
.delay(function(d) {
return xDelay.invert(position) - d.delay;
})
.attr("r", function(d) {
if(d.properties.mag < 0) {
return 0.1;
} else {
return radius(d.properties.mag);
}
});
eqP.transition()
.duration(2000)
.delay(function(d) {
return xDelay.invert(position) - d.delay;
})
.attr("r", function(d) {
if(d.properties.mag < 0) {
return 0.1 * pulseSize;
} else {
return radius(d.properties.mag) * pulseSize;
}
})
.style('opacity', 0)
.remove();
selection.exit()
.remove();
}
var setQuakeDelay = function(quakes) {
for(var i = 0, max = quakes.length; i < max; i++){
var timeDiff = quakes[i].properties.time - dateObj;
var timeDiffObj = new Date(timeDiff);
quakes[i].delay = Date.parse(timeDiffObj) / 35000;
}
};
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment