pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Earthquake demo for class #2

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

<style>

.line {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

rect {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

path.quake, circle.quake {
  fill: crimson;
  fill-opacity: 0.4;
}

path.counties, path.county-border {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}

path.state {
  fill: none;
  stroke: #000;
}

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

var width = 960;
var height = 500;

var smallest = 2.5; // threshold magnitude

// Set the map projection centered on Oklahoma
var projection = d3.geo.albers()
    .scale(7543)
    .translate([702, -186]);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

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

// Read and plot the earthquake data
d3.json("quakes.json", plotQuakes)

// Read and plot the state & county boundaries
d3.json("ok.json", plotState)

function plotQuakes(error, data) {
  if (error) console.log(error);

  // Filter the small earthquakes
  var features = data.features.filter(function(d) { return (+ d.properties.mag >= smallest) });

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

function plotState(error, ok) {
  if (error) console.log(error);

  var objects = ok.objects.ok;
  var all = topojson.merge(ok, objects.geometries);

  layer1.append("path")
      .datum(all)
      .attr("class", "state")
      .attr("d", path);

  layer1.append("path")
      .datum(topojson.mesh(ok, objects, function(a, b) { return a !== b; }))
      .attr("class", "county-border")
      .attr("d", path);
 }

</script>

## ok.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ok.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.
      
    
## quakes.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              quakes.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
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>umbc</title>

	<style>

	.line {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	}

	rect {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	}

	path.quake, circle.quake {
	fill: crimson;
	fill-opacity: 0.4;
	}

	path.counties, path.county-border {
	fill: none;
	stroke: #000;
	stroke-opacity: .2;
	}

	path.state {
	fill: none;
	stroke: #000;
	}

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

	var width = 960;
	var height = 500;

	var smallest = 2.5; // threshold magnitude

	// Set the map projection centered on Oklahoma
	var projection = d3.geo.albers()
	.scale(7543)
	.translate([702, -186]);

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

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

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

	// Read and plot the earthquake data
	d3.json("quakes.json", plotQuakes)

	// Read and plot the state & county boundaries
	d3.json("ok.json", plotState)

	function plotQuakes(error, data) {
	if (error) console.log(error);

	// Filter the small earthquakes
	var features = data.features.filter(function(d) { return (+ d.properties.mag >= smallest) });

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

	function plotState(error, ok) {
	if (error) console.log(error);

	var objects = ok.objects.ok;
	var all = topojson.merge(ok, objects.geometries);

	layer1.append("path")
	.datum(all)
	.attr("class", "state")
	.attr("d", path);

	layer1.append("path")
	.datum(topojson.mesh(ok, objects, function(a, b) { return a !== b; }))
	.attr("class", "county-border")
	.attr("d", path);
	}

	</script>