adamwd392/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
body {
  position: absolute;
  margin: 0px;
}

svg {
  background-color: #4682b4;
}

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


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

var width = 1000, height = 500;
var projection = d3.geo.mercator();
var path = d3.geo.path().projection(projection);

//Building container/canvas - needed to draw the visualization
var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

var layer2 = svg.append("g");
var layer1 = svg.append("g");

var slightLayer = svg.append("g");
var strongLayer = svg.append("g");
var destructiveLayer = svg.append("g");

//----Drawing the Container and Canvas settings
var url = "https://gist.githubusercontent.com/pbogden/8c6bcd912f9edebab99d/raw/countries.json";

d3.json(url, plotCountries);

var quakes = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
//Bind the data
d3.json(quakes, plotQuakes);


function plotCountries(error, json) {

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

  // Put your code here

  // Plot the features
  layer2.selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr("d", path)
      .attr("stroke", "black")
      .attr("fill", "grey");
}

function plotQuakes(error, data){
	  if (error) console.log(error);
		console.log("Quakes: " + data);


	  var slightQuakes = data.features.filter(function(d) { return ( d.properties.mag >= 1 && d.properties.mag <= 3.5) });
	  console.log("Slight Quakes: " + slightQuakes);

	  var strongQuakes = data.features.filter(function(d) { return ( d.properties.mag > 3.5 && d.properties.mag <= 5.5) });
	  console.log("Strong Quakes" + strongQuakes)

	  var destructiveQuakes = data.features.filter(function(d) { return ( d.properties.mag > 5.5 && d.properties.mag <= 8) });
	  console.log("Destructive Quakes" + destructiveQuakes)

	  // Bind the earthquake data
	  var slightGroup = slightLayer.selectAll("g")
		  .data(slightQuakes)
		  .enter();

          var strongGroup = strongLayer.selectAll("g")
		  .data(strongQuakes)
		  .enter();

	  var destructiveGroup = destructiveLayer.selectAll("g")
		  .data(destructiveQuakes)
		  .enter();

	  // Plot the earthquakes
	  slightGroup.append("path")
		  .attr("d", path)
		  .attr("class", "quake")
		  .attr("fill", "yellow");

	 strongGroup.append("path")
		  .attr("d", path)
		  .attr("class", "quake")
		  .attr("fill", "orange");

	 destructiveGroup.append("path")
		  .attr("d", path)
		  .attr("class", "quake")
		  .attr("fill", "red");

	  // Label the earthquakes
	  slightGroup.append("text")
		  .attr("x", function (d) { return path.centroid(d)[0]; })
		  .attr("y", function (d) { return path.centroid(d)[1]; })
		  .text(function(d) { return d.properties.mag;});

          strongGroup.append("text")
		  .attr("x", function (d) { return path.centroid(d)[0]; })
		  .attr("y", function (d) { return path.centroid(d)[1]; })
		  .text(function(d) { return d.properties.mag;});

	  destructiveGroup.append("text")
		  .attr("x", function (d) { return path.centroid(d)[0]; })
		  .attr("y", function (d) { return path.centroid(d)[1]; })
		  .text(function(d) { return d.properties.mag;});
	}


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>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style>
	body {
	position: absolute;
	margin: 0px;
	}

	svg {
	background-color: #4682b4;
	}

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


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

	var width = 1000, height = 500;
	var projection = d3.geo.mercator();
	var path = d3.geo.path().projection(projection);

	//Building container/canvas - needed to draw the visualization
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var layer2 = svg.append("g");
	var layer1 = svg.append("g");

	var slightLayer = svg.append("g");
	var strongLayer = svg.append("g");
	var destructiveLayer = svg.append("g");

	//----Drawing the Container and Canvas settings
	var url = "https://gist.githubusercontent.com/pbogden/8c6bcd912f9edebab99d/raw/countries.json";

	d3.json(url, plotCountries);

	var quakes = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
	//Bind the data
	d3.json(quakes, plotQuakes);


	function plotCountries(error, json) {

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

	// Put your code here

	// Plot the features
	layer2.selectAll("path")
	.data(data)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("stroke", "black")
	.attr("fill", "grey");
	}

	function plotQuakes(error, data){
	if (error) console.log(error);
	console.log("Quakes: " + data);


	var slightQuakes = data.features.filter(function(d) { return ( d.properties.mag >= 1 && d.properties.mag <= 3.5) });
	console.log("Slight Quakes: " + slightQuakes);

	var strongQuakes = data.features.filter(function(d) { return ( d.properties.mag > 3.5 && d.properties.mag <= 5.5) });
	console.log("Strong Quakes" + strongQuakes)

	var destructiveQuakes = data.features.filter(function(d) { return ( d.properties.mag > 5.5 && d.properties.mag <= 8) });
	console.log("Destructive Quakes" + destructiveQuakes)

	// Bind the earthquake data
	var slightGroup = slightLayer.selectAll("g")
	.data(slightQuakes)
	.enter();

	var strongGroup = strongLayer.selectAll("g")
	.data(strongQuakes)
	.enter();

	var destructiveGroup = destructiveLayer.selectAll("g")
	.data(destructiveQuakes)
	.enter();

	// Plot the earthquakes
	slightGroup.append("path")
	.attr("d", path)
	.attr("class", "quake")
	.attr("fill", "yellow");

	strongGroup.append("path")
	.attr("d", path)
	.attr("class", "quake")
	.attr("fill", "orange");

	destructiveGroup.append("path")
	.attr("d", path)
	.attr("class", "quake")
	.attr("fill", "red");

	// Label the earthquakes
	slightGroup.append("text")
	.attr("x", function (d) { return path.centroid(d)[0]; })
	.attr("y", function (d) { return path.centroid(d)[1]; })
	.text(function(d) { return d.properties.mag;});

	strongGroup.append("text")
	.attr("x", function (d) { return path.centroid(d)[0]; })
	.attr("y", function (d) { return path.centroid(d)[1]; })
	.text(function(d) { return d.properties.mag;});

	destructiveGroup.append("text")
	.attr("x", function (d) { return path.centroid(d)[0]; })
	.attr("y", function (d) { return path.centroid(d)[1]; })
	.text(function(d) { return d.properties.mag;});
	}


	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>
	</body>
	</html>