pnavarrc · November 28, 2018 05:53
diff --git a/earthquakes.csv b/earthquakes.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Earthquake Map</title>

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

  <style>
  body {
    margin: 0;
  }

  svg {
    background-color: #111;
    cursor: pointer;
  }

  .land {
    fill: #333;
    stroke: #555;
    stroke-width: 1;
  }

  .earthquake {
    fill-opacity: 0.6;
  }
  </style>

  <div id="map-container"></div>

  <script>

    // Set the dimensions of the map
    var width  = 960,
        height = 480;

    // Create a selection for the container div and append the svg element
    var div = d3.select('#map-container'),
        svg = div.append('svg');

    svg.append('g').classed('map', true);
    svg.append('g').classed('dots', true);

    // Set the size of the SVG element
    svg.attr('width', width).attr('height', height);

    // Create and configure a geographic projection
    var projection = d3.geo.equirectangular()
      .translate([width / 2, height / 2]);

    // Create and configure a path generator
    var pathGenerator = d3.geo.path()
      .projection(projection);

    // Retrieve the geographic data asynchronously
    d3.json('land.geojson', function(err, data) {

      // Throw errors on getting or parsing the file
      if (err) { throw err; }

      // Land
      var land = svg.select('g.map').selectAll('path.land').data([data]);

      land.enter().append('path').classed('land', true);
      land.attr('d', pathGenerator);
      land.exit().remove();
    });


    // Load the Earthquake data
    // http://earthquake.usgs.gov/earthquakes/search/
    // http://earthquake.usgs.gov/earthquakes/map/doc_aboutdata.php
    d3.csv('earthquakes.csv', function(err, csvdata) {

      if (err) { throw err; }

      // Parse the data
      csvdata.forEach(function(d) {
        d.coords = [+d.longitude, +d.latitude];
        d.magnitude = +d.mag;
      });

      csvdata.sort(function(a, b) {
        return a.magnitude > b.magnitude ? -1 : 1;
      });

      // Radius scale
      var rScale = d3.scale.sqrt()
        .domain(d3.extent(csvdata, function(d) { return d.magnitude; }))
        .range([1, 10]);

      var cScale = d3.scale.sqrt()
        .domain(rScale.domain())
        .range(['#ECD078', '#C02942']);

      var circles = svg.select('g.dots').selectAll('circle.earthquake').data(csvdata);

      circles.enter().append('circle')
        .classed('earthquake', true);

      circles
        .attr('r', function(d) { return rScale(d.magnitude); })
        .attr('cx', function(d) { return projection(d.coords)[0]; })
        .attr('cy', function(d) { return projection(d.coords)[1]; })
        .attr('fill', function(d) { return cScale(d.magnitude); });

      circles.exit().remove();
    });

  </script>

 </body>
 </html>
diff --git a/land.geojson b/land.geojson
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Earthquake Map</title>

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

	<style>
	body {
	margin: 0;
	}

	svg {
	background-color: #111;
	cursor: pointer;
	}

	.land {
	fill: #333;
	stroke: #555;
	stroke-width: 1;
	}

	.earthquake {
	fill-opacity: 0.6;
	}
	</style>

	<div id="map-container"></div>

	<script>

	// Set the dimensions of the map
	var width = 960,
	height = 480;

	// Create a selection for the container div and append the svg element
	var div = d3.select('#map-container'),
	svg = div.append('svg');

	svg.append('g').classed('map', true);
	svg.append('g').classed('dots', true);

	// Set the size of the SVG element
	svg.attr('width', width).attr('height', height);

	// Create and configure a geographic projection
	var projection = d3.geo.equirectangular()
	.translate([width / 2, height / 2]);

	// Create and configure a path generator
	var pathGenerator = d3.geo.path()
	.projection(projection);

	// Retrieve the geographic data asynchronously
	d3.json('land.geojson', function(err, data) {

	// Throw errors on getting or parsing the file
	if (err) { throw err; }

	// Land
	var land = svg.select('g.map').selectAll('path.land').data([data]);

	land.enter().append('path').classed('land', true);
	land.attr('d', pathGenerator);
	land.exit().remove();
	});


	// Load the Earthquake data
	// http://earthquake.usgs.gov/earthquakes/search/
	// http://earthquake.usgs.gov/earthquakes/map/doc_aboutdata.php
	d3.csv('earthquakes.csv', function(err, csvdata) {

	if (err) { throw err; }

	// Parse the data
	csvdata.forEach(function(d) {
	d.coords = [+d.longitude, +d.latitude];
	d.magnitude = +d.mag;
	});

	csvdata.sort(function(a, b) {
	return a.magnitude > b.magnitude ? -1 : 1;
	});

	// Radius scale
	var rScale = d3.scale.sqrt()
	.domain(d3.extent(csvdata, function(d) { return d.magnitude; }))
	.range([1, 10]);

	var cScale = d3.scale.sqrt()
	.domain(rScale.domain())
	.range(['#ECD078', '#C02942']);

	var circles = svg.select('g.dots').selectAll('circle.earthquake').data(csvdata);

	circles.enter().append('circle')
	.classed('earthquake', true);

	circles
	.attr('r', function(d) { return rScale(d.magnitude); })
	.attr('cx', function(d) { return projection(d.coords)[0]; })
	.attr('cy', function(d) { return projection(d.coords)[1]; })
	.attr('fill', function(d) { return cScale(d.magnitude); });

	circles.exit().remove();
	});

	</script>

	</body>
	</html>