Skip to content

Instantly share code, notes, and snippets.

@1pixelzz

1pixelzz/EarthquakeByYear.csv

Created April 28, 2015 03:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save 1pixelzz/b092603f150ef272a305 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save 1pixelzz/b092603f150ef272a305 to your computer and use it in GitHub Desktop.
Download ZIP
Earthquakes
Raw
EarthquakeByYear.csv
year 8.0-9.9 7.0-7.9 6.0-6.9 5.0-5.9 5.0-9.9 totalEarthquakes estimatedDeaths
1970 0 20 110 1195 1325 2650 68202
1971 1 19 112 1331 1463 2926 1279
1972 0 15 110 1316 1441 2882 11179
1973 0 13 95 1331 1439 2878 659
1974 0 14 99 1312 1425 2850 5440
1975 1 14 107 1447 1569 3138 12372
1976 2 15 114 1649 1780 3560 697309
1977 2 11 89 1686 1788 3576 2849
1978 0 16 93 1526 1635 3270 15192
1979 0 13 100 1366 1479 2958 1475
1980 1 13 105 1299 1418 2836 8620
1981 0 13 90 1168 1271 2542 5223
1982 0 10 85 1425 1520 3040 3328
1983 0 14 126 1673 1813 3626 2372
1984 0 8 91 1579 1678 3356 174
1985 1 13 110 1674 1798 3596 9846
1986 1 5 89 1665 1760 3520 1068
1987 0 11 112 1437 1560 3120 1080
1988 0 8 93 1485 1586 3172 26552
1989 1 6 79 1444 1530 3060 617
1990 0 18 109 1617 1744 3488 52056
1991 0 16 96 1457 1569 3138 3210
1992 0 13 166 1498 1677 3354 3920
1993 0 12 137 1426 1575 3150 10096
1994 2 11 146 1542 1701 3402 1634
1995 2 18 183 1318 1521 3042 7980
1996 1 14 149 1222 1386 2772 589
1997 0 16 120 1113 1249 2498 3069
1998 1 11 117 979 1108 2216 9430
1999 0 18 116 1104 1238 2476 22662
2000 1 14 146 1344 1505 3010 231
2001 1 15 121 1224 1361 2722 21357
2002 0 13 127 1201 1341 2682 1685
2003 1 14 140 1203 1358 2716 33819
2004 2 14 141 1515 1672 3344 228802
2005 1 10 140 1693 1844 3688 88003
2006 2 9 142 1712 1865 3730 6605
2007 4 14 178 2074 2270 4540 712
2008 0 12 168 1768 1948 3896 88011
2009 1 16 144 1896 2057 4114 1790
2010 1 23 150 2209 2383 4766 320120
2011 1 19 185 2276 2481 4962 21953
2012 2 12 106 1364 1484 2968 629
Raw
EarthquakeByYearUS.csv
year 8.0-9.9 7.0-7.9 6.0-6.9 5.0-5.9 5.0-9.9 totalEarthquakes estimatedDeaths
1970 0 0 4 48 52 104 0
1971 0 2 6 61 69 138 65
1972 0 1 4 60 65 130 0
1973 0 0 7 70 77 154 0
1974 0 0 5 68 73 146 0
1975 0 2 10 67 79 158 2
1976 0 0 7 57 64 128 0
1977 0 0 7 69 76 152 0
1978 0 0 2 58 60 120 0
1979 0 2 7 60 69 138 0
1980 0 2 8 72 82 164 1
1981 0 1 2 42 45 90 0
1982 0 0 4 62 66 132 0
1983 0 1 8 66 75 150 2
1984 0 0 3 68 71 142 1
1985 0 0 5 60 65 130 0
1986 0 1 10 182 193 386 1
1987 0 2 11 100 113 226 11
1988 0 1 2 96 99 198 1
1989 0 1 4 73 78 156 63
1990 0 0 2 64 66 132 0
1991 0 2 4 49 55 110 2
1992 0 2 15 72 89 178 3
1993 0 0 9 62 71 142 2
1994 0 1 4 64 69 138 60
1995 0 0 6 45 51 102 1
1996 0 2 4 100 106 212 0
1997 0 0 6 63 69 138 0
1998 0 0 3 62 65 130 0
1999 0 2 6 50 58 116 0
2000 0 0 6 63 69 138 0
2001 0 1 5 41 47 94 0
2002 0 1 4 63 68 136 0
2003 0 2 7 54 63 126 2
2004 0 0 2 25 27 54 0
2005 0 1 4 47 52 104 0
2006 0 0 7 51 58 116 0
2007 0 1 9 72 82 164 0
2008 0 0 9 85 94 188 0
2009 0 0 4 58 62 124 0
2010 0 1 8 89 98 196 0
2011 0 1 3 51 55 110 0
2012 0 0 5 27 32 64 0
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AUnited States and World Earthquakes</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
circle:hover {
fill: #99CC99;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<h1>United States and World Earthquakes</h1>
<p>The <strong style="color: #99CC99;">United States&rsquo;</strong> and <strong style="color: #999999;">the World&rsquo;s</strong> earthquakes, 1961-2010. Source: <a href="http://earthquake.usgs.gov/earthquakes/eqarchives/year/eqstats.php" target="_blank">Earthquake Facts and Statistics, USGS Earthquake Hazards Program</a><a "http://earthquake.usgs.gov/earthquakes/eqarchives/year/eqstats.php"></a> and
<a href="http://earthquake.usgs.gov/earthquakes/eqarchives/epic/" target="_blank">Global Search, USGS Earthquake Hazards Program</a><a "http://earthquake.usgs.gov/earthquakes/eqarchives/epic/"></a></p>
<script type="text/javascript">
//Dimensions and padding
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Configure area generator
var area = d3.svg.area()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y0(h - padding[2])
.y1(function(d) {
return yScale(d.totalEarthquakes);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load USA data
d3.csv("EarthquakeByYearUS.csv", function(usEarthquakes) {
//Load World data
d3.csv("EarthquakeByYear.csv", function(worldEarthquakes) {
//Create a new array that contains both the
//USA and World data, merged into one
var mergedData = usEarthquakes.concat(worldEarthquakes);
//console.log(mergedData);
//Use the newly merged data to determine the
//min and max values, for setting scale domains
xScale.domain([
d3.min(mergedData, function(d) {
return dateFormat.parse(d.year);
}),
d3.max(mergedData, function(d) {
return dateFormat.parse(d.year);
})
]);
yScale.domain([
d3.max(mergedData, function(d) {
return +d.totalEarthquakes;
}),
0
]);
//Lines
//
// Note data is wrapped in another array, so all its
// values are bound to a single element (the line!)
//
svg.data([ worldEarthquakes ])
.append("path")
.attr("class", "total world")
.attr("d", area)
.attr("fill", "#999999")
.attr("stroke", "none");
svg.data([ usEarthquakes ])
.append("path")
.attr("class", "total usa")
.attr("d", area)
.attr("fill", "#99CC99")
.attr("stroke", "none");
//Axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);
});
//End World data load function
});
//End USA data load function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment