pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Slightly modified version of Suzee's block.  Changes:

plotQuakes & getQuakes are separate -- setTimeout calls plotQuakes
window.setTimeout is inside getQuakes, where its argument is defined
info message also indicates when the quakes are added


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Homework 4</title>

<style>

body {
  position: absolute;
  margin: 0px;
}

svg {
  background-color: #377ab8;
}

.info {
  font-family: sans-serif;
  color: #000;
  position: absolute;
  top: 450px;
  left: 800px;
}

/* quake circle color/fill*/
path.quake, circle.quake {
  fill: #990000;
  fill-opacity: .5;
  stroke-width: .1;

}

path {
  fill: #4daf4a;
  stroke: #a1d99b;
  stroke-width: .4
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

<body>
<script>

var width = 960, height = 500;

var data;  // declare a global variable

//this is the layer for the states and background
var layer = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", mousemoved);

var info = d3.select("body").append("div")
    .attr("class", "info");

var path = d3.geo.path();

var projection = path.projection();

// US geometries
var url = "https://gist.githubusercontent.com/pbogden/5da1822e8fffc06cf5ed/raw/us.json"

//USGS query August-September 2015 min magnitude =3
var urlUSGS = "http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2015-08-23&endtime=2015-09-19&minmagnitude=3";

//read  the states data
d3.json(url, plotStates);

// Read the earthquake data
d3.json(urlUSGS, getQuakes);

//plot the states data
function plotStates(error, json) {

  // Create array of GeoJSON features -- this defines the global variable "data"
  data = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); })

  layer.selectAll("path")
      .data(data)
    .enter()
      .append("path")
      .attr("d", path);
}

//plot the new quakes data
function getQuakes(error, quakes) {
  if (error) console.log(error);
   console.log("Data from USGS:", quakes);

  //  show earthquakes by mag>3
  var features = quakes.features.filter(function(d) { return (+ d.properties.mag >3) });

  window.setTimeout(function() { plotQuakes(features) }, 3000);
}

function plotQuakes(features) {
  info.text("Here you go!");

  // Plot the new earthquakes
  layer.selectAll("path.quake")
      .data(features)
    .enter().append("path")
      .attr("class", "quake")
      .attr("d", path);
}

function mousemoved() {
  info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale()));
}

function formatLocation(p, k) {
  var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
  return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
       + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
}
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Homework 4</title>

	<style>

	body {
	position: absolute;
	margin: 0px;
	}

	svg {
	background-color: #377ab8;
	}

	.info {
	font-family: sans-serif;
	color: #000;
	position: absolute;
	top: 450px;
	left: 800px;
	}

	/* quake circle color/fill*/
	path.quake, circle.quake {
	fill: #990000;
	fill-opacity: .5;
	stroke-width: .1;

	}

	path {
	fill: #4daf4a;
	stroke: #a1d99b;
	stroke-width: .4
	}

	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>

	<body>
	<script>

	var width = 960, height = 500;

	var data; // declare a global variable

	//this is the layer for the states and background
	var layer = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.on("mousemove", mousemoved);

	var info = d3.select("body").append("div")
	.attr("class", "info");

	var path = d3.geo.path();

	var projection = path.projection();

	// US geometries
	var url = "https://gist.githubusercontent.com/pbogden/5da1822e8fffc06cf5ed/raw/us.json"

	//USGS query August-September 2015 min magnitude =3
	var urlUSGS = "http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2015-08-23&endtime=2015-09-19&minmagnitude=3";

	//read the states data
	d3.json(url, plotStates);

	// Read the earthquake data
	d3.json(urlUSGS, getQuakes);

	//plot the states data
	function plotStates(error, json) {

	// Create array of GeoJSON features -- this defines the global variable "data"
	data = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); })

	layer.selectAll("path")
	.data(data)
	.enter()
	.append("path")
	.attr("d", path);
	}

	//plot the new quakes data
	function getQuakes(error, quakes) {
	if (error) console.log(error);
	console.log("Data from USGS:", quakes);

	// show earthquakes by mag>3
	var features = quakes.features.filter(function(d) { return (+ d.properties.mag >3) });

	window.setTimeout(function() { plotQuakes(features) }, 3000);
	}

	function plotQuakes(features) {
	info.text("Here you go!");

	// Plot the new earthquakes
	layer.selectAll("path.quake")
	.data(features)
	.enter().append("path")
	.attr("class", "quake")
	.attr("d", path);
	}

	function mousemoved() {
	info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale()));
	}

	function formatLocation(p, k) {
	var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
	return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
	+ (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
	}
	</script>