pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Hints for the homework assignment:
Hint #1: Combine "index.html" from this gist with the bar chart that we discussed in class.
Hint #2: Instead of the "data" array in the bar chart,  [4, 8, 15, 16, 23, 42], you should use an array of data values (earthquake magnitudes) that you obtain from the USGS API.
Hint #3: The array of data values is actually the "feature" property of the data object that you get from the USGS API. You will need to work with this "data.feature" array to solve the homework.
Hint #4: Use the developer console to inspect things.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<body>
<div>
  <h1>Open the developer's console...</h1>
</div>
<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.

  // All your code goes here, that is, in between the two curly brackets {...}

  // "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>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<body>
	<div>
	<h1>Open the developer's console...</h1>
	</div>
	<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.

	// All your code goes here, that is, in between the two curly brackets {...}

	// "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>