Earthquake Map with fisheye (polar)

forked from pnavarrc's block: Earthquake Map

forked from jonpage's block: Earthquake Map

forked from jgondin's block: Earthquake Map

<!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>

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

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

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

// 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]);

var fisheye = d3.fisheye();

// to start, unclutter JAPAN
                        var DEG = 180 / Math.PI,
                            JAPAN = [138, 36],
                            RADIUS = 30,
                            POWER = 1.5;
                        fisheye.center(JAPAN).radius(RADIUS).power(POWER);

var projection = d3.geo.projection(function (λ, φ) {
                                λ *= DEG, φ *= DEG;
                                [λ, φ] = fisheye([λ, φ]);
                                var p = _projection([λ, φ]);
                                return [p[0], -p[1]];
                            })
                            .scale(1)
                            .translate([width / 2, height / 2]);

// Create and configure a path generator
    var pathGenerator = d3.geo.path()
      .projection(projection);
    
    var land = circles = svg.select('nada');
    svg.on("mousemove", function() {
      fisheye.center(_projection.invert(d3.mouse(this)));
      land.attr('d', pathGenerator);
      circles
        .attr('cx', function(d) { return projection(d.coords)[0]; })
        .attr('cy', function(d) { return projection(d.coords)[1]; });
    });

// 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
      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
    // https://earthquake.usgs.gov/earthquakes/search/
    // https://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']);

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js