benelsen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Map of all M2.5+ earthquakes of the last 24h.
Tectonic plate boundaries extracted from arcgis.com

  
## app.js

var width = 960,
    height = width / 2;

var opacity = d3.scale.linear()
    .domain([0, 24*3600*1000])
    .range([1, 0.5]);

var radius = d3.scale.pow()
    .domain([0, 10])
    .range([0, 75]);

var projection = d3.geo.naturalEarth()
    .translate([width/2, height/2])
    .scale(150/900*width);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule();

var svg = d3.select("#map")
    .attr("width", width)
    .attr("height", height);

svg.append("path")
    .datum(graticule.outline)
    .attr("class", "water")
    .attr("d", path);

svg.append("g")
    .attr("class", "graticule")
  .selectAll("path")
    .data(graticule.lines)
  .enter().append("path")
    .attr("d", path);

var focus = svg.append("text")
    .attr("class", "focus");

d3.json("world-110m.json", function(error, world) {

  svg.insert("path", ".graticule")
      .datum(topojson.object(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; }))
      .attr("class", "borders")
      .attr("d", path);

});

d3.json('tectonics.json', function(err, data) {

  svg.insert("path", ".graticule")
      .datum(topojson.object(data, data.objects.tec))
      .attr("class", "tectonic")
      .attr("d", path);

});

d3.json('http://www.corsproxy.com/earthquake.usgs.gov/earthquakes/feed/geojson/2.5/day', function(err, data) {

  var quakes = svg.append("g")
    .attr("class", "quakes")
      .selectAll(".quake")
      .data(data.features.reverse())
    .enter().append("g")
        .attr("class", "quake")
        .attr("transform", function(d) {
          return "translate(" + projection(d.geometry.coordinates)[0] + "," + projection(d.geometry.coordinates)[1] + ")";
        })
        .attr("opacity", function(d) {
          return opacity(Date.now() - d.properties.time)
        })
        .on("mouseover", function() {
          focus.style("opacity", 1);
        })
        .on("mouseout", function() {
          focus.style("opacity", 0);
        })
        .on("mousemove", function(d) {
          var o = projection(d.geometry.coordinates);
          focus
            .text(d.properties.mag + ' ' + moment(+d.properties.time).calendar())
            .attr("dy", +20)
            .attr("text-anchor", "middle")
            .attr("transform", "translate(" + o[0] + "," + o[1] + ")" );
        });

  quakes.append("circle")
        .attr("r", 2)
        .style("fill", function(d) {
          return "rgb(222, 45, 38)"; // color( +d.geometry.coordinates[2] );
        });

  setInterval(function() {

    quakes.append("circle")
        .attr("r", 0)
        .style("stroke", function(d) {
          return "rgb(222, 45, 38)"; // color( +d.geometry.coordinates[2] );
        })
        .style("stroke-width", 2)
      .transition()
        .ease("linear")
        .duration(function(d) { return 125*radius(d.properties.mag); })
        .attr("r", function(d) { return radius(d.properties.mag); })
        .style("stroke-opacity", 0)
        .style("stroke-width", 0)
        .remove();

  }, 1000);

});

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>

  <!-- Content begin -->
  <svg id="map"></svg>
  <!-- Content end -->

  <!-- Dependencies begin-->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
  <!-- d3 -->
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>
  <!-- Dependencies end-->

  <script src="app.js" type="text/javascript"></script>

</body>
</html>

## style.css
body {
  font: 10px sans-serif;
}

.water {
  fill: #a4bac7;
}

.graticule {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.graticule :nth-child(2n+16) {
  stroke-dasharray: 2,2;
}

.graticule :nth-child(-2n+15) {
  stroke-dasharray: 2,2;
}

.tectonic {
  fill: none;
  stroke: #000;
  opacity: 0.5;
}

.land {
  fill: #d7c7ad;
  stroke: #766951;
}

.borders {
  fill: none;
  stroke: #a5967e;
}

.quake {
  fill: rgba(0,0,0,0);
  stroke-width: 1.5px;
}

## tectonics.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              tectonics.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world-110m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.

	var width = 960,
	height = width / 2;

	var opacity = d3.scale.linear()
	.domain([0, 2436001000])
	.range([1, 0.5]);

	var radius = d3.scale.pow()
	.domain([0, 10])
	.range([0, 75]);

	var projection = d3.geo.naturalEarth()
	.translate([width/2, height/2])
	.scale(150/900*width);

	var path = d3.geo.path()
	.projection(projection);

	var graticule = d3.geo.graticule();

	var svg = d3.select("#map")
	.attr("width", width)
	.attr("height", height);

	svg.append("path")
	.datum(graticule.outline)
	.attr("class", "water")
	.attr("d", path);

	svg.append("g")
	.attr("class", "graticule")
	.selectAll("path")
	.data(graticule.lines)
	.enter().append("path")
	.attr("d", path);

	var focus = svg.append("text")
	.attr("class", "focus");

	d3.json("world-110m.json", function(error, world) {

	svg.insert("path", ".graticule")
	.datum(topojson.object(world, world.objects.land))
	.attr("class", "land")
	.attr("d", path);

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; }))
	.attr("class", "borders")
	.attr("d", path);

	});

	d3.json('tectonics.json', function(err, data) {

	svg.insert("path", ".graticule")
	.datum(topojson.object(data, data.objects.tec))
	.attr("class", "tectonic")
	.attr("d", path);

	});

	d3.json('http://www.corsproxy.com/earthquake.usgs.gov/earthquakes/feed/geojson/2.5/day', function(err, data) {

	var quakes = svg.append("g")
	.attr("class", "quakes")
	.selectAll(".quake")
	.data(data.features.reverse())
	.enter().append("g")
	.attr("class", "quake")
	.attr("transform", function(d) {
	return "translate(" + projection(d.geometry.coordinates)[0] + "," + projection(d.geometry.coordinates)[1] + ")";
	})
	.attr("opacity", function(d) {
	return opacity(Date.now() - d.properties.time)
	})
	.on("mouseover", function() {
	focus.style("opacity", 1);
	})
	.on("mouseout", function() {
	focus.style("opacity", 0);
	})
	.on("mousemove", function(d) {
	var o = projection(d.geometry.coordinates);
	focus
	.text(d.properties.mag + ' ' + moment(+d.properties.time).calendar())
	.attr("dy", +20)
	.attr("text-anchor", "middle")
	.attr("transform", "translate(" + o[0] + "," + o[1] + ")" );
	});

	quakes.append("circle")
	.attr("r", 2)
	.style("fill", function(d) {
	return "rgb(222, 45, 38)"; // color( +d.geometry.coordinates[2] );
	});

	setInterval(function() {

	quakes.append("circle")
	.attr("r", 0)
	.style("stroke", function(d) {
	return "rgb(222, 45, 38)"; // color( +d.geometry.coordinates[2] );
	})
	.style("stroke-width", 2)
	.transition()
	.ease("linear")
	.duration(function(d) { return 125*radius(d.properties.mag); })
	.attr("r", function(d) { return radius(d.properties.mag); })
	.style("stroke-opacity", 0)
	.style("stroke-width", 0)
	.remove();

	}, 1000);

	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>

	<!-- Content begin -->
	<svg id="map"></svg>
	<!-- Content end -->

	<!-- Dependencies begin-->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
	<!-- d3 -->
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<!-- Dependencies end-->

	<script src="app.js" type="text/javascript"></script>

	</body>
	</html>
	body {
	font: 10px sans-serif;
	}

	.water {
	fill: #a4bac7;
	}

	.graticule {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	.graticule :nth-child(2n+16) {
	stroke-dasharray: 2,2;
	}

	.graticule :nth-child(-2n+15) {
	stroke-dasharray: 2,2;
	}

	.tectonic {
	fill: none;
	stroke: #000;
	opacity: 0.5;
	}

	.land {
	fill: #d7c7ad;
	stroke: #766951;
	}

	.borders {
	fill: none;
	stroke: #a5967e;
	}

	.quake {
	fill: rgba(0,0,0,0);
	stroke-width: 1.5px;
	}