adamwd392/index.html

## index.html
<!doctype HTML>
<meta charset="utf-8">
<title>demo</title>

<style>
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
</style>

<div class="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var data; // This is a global -- we'll talk about it in class.
var url = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson";
d3.json(url, function(error, quakes) {
  if (error) console.log(error);
  data = quakes;  // Setting the value of the global here.
d3.select(".chart")
  .selectAll("div")
    .data(data.features)
  .enter().append("div")
    .style("width", function(d) { return (d.properties.mag*100) + "px"; })
    .text(function(d) { return d.properties.mag; });
  // "data" is an Object with properties (you can inspect "data" in the developer's console)
  console.log("This is the data object from USGS:", data);
  // log the properties of "data" to the console
  console.log("These are the properties of data object:", Object.keys(data));
  // data.features is an array -- one element for each earthquake
  console.log("We want values from data.features (an array):", data.features);
  console.log("This is the first element of data.features array:", data.features[0]);
});
</script>
	<!doctype HTML>
	<meta charset="utf-8">
	<title>demo</title>

	<style>
	.chart div {
	font: 10px sans-serif;
	background-color: steelblue;
	text-align: right;
	padding: 3px;
	margin: 1px;
	color: white;
	}
	</style>

	<div class="chart"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	var data; // This is a global -- we'll talk about it in class.
	var url = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson";
	d3.json(url, function(error, quakes) {
	if (error) console.log(error);
	data = quakes; // Setting the value of the global here.
	d3.select(".chart")
	.selectAll("div")
	.data(data.features)
	.enter().append("div")
	.style("width", function(d) { return (d.properties.mag*100) + "px"; })
	.text(function(d) { return d.properties.mag; });
	// "data" is an Object with properties (you can inspect "data" in the developer's console)
	console.log("This is the data object from USGS:", data);
	// log the properties of "data" to the console
	console.log("These are the properties of data object:", Object.keys(data));
	// data.features is an array -- one element for each earthquake
	console.log("We want values from data.features (an array):", data.features);
	console.log("This is the first element of data.features array:", data.features[0]);
	});
	</script>