D3 Examples - OK Earthquakes XI

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
​
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/asymmetrik/leaflet-d3/dist/leaflet-d3.js"></script>
​
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/d3/d3-plugins/hexbin/hexbin.js"></script>
  
  <style>
​
  #map {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .hexbin-hexagon {
    stroke: #fff;
    stroke-width: 1px;
  }
​
  </style>
</head>
<body>
  <div id="map">
​
  </div>
  <script>
​
  var mapboxProjectID = 'darrenjaworski.n120ogj4',
    accessToken = 'pk.eyJ1IjoiZGFycmVuamF3b3Jza2kiLCJhIjoiZmQ4OTYyNzJjYzc0OThiZTFjMmViMDE3ZmI0NTJmOTgifQ.3XwMxZz97E3nuPEZLoxohw',
    quakesLayer = new L.LayerGroup(),
    attribution = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
    mapboxURL = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
    minZoom = 6,
    maxZoom = 14,
    grayscale = L.tileLayer(mapboxURL, {
        attribution: attribution,
        minZoom: minZoom,
        maxZoom: maxZoom,
        id: mapboxProjectID,
        accessToken: accessToken
    }),
    re = new RegExp('Oklahoma');
​
  d3.csv("https://earthquake.usgs.gov/fdsnws/event/1/query?format=csv&minmagnitude=1.0&minlongitude=-103&maxlongitude=-94&maxlatitude=37&minlatitude=33&starttime=2000-01-01", type, ready);
​
  function type(d) {
    d.point = [d.longitude, d.latitude];
    return d;
  };
​
  function ready(error, quakes) {
​
    if (error) {
      return console.warn(error);
    }
​
    var data = quakes.filter(function(d){ return re.test(d.place); }).map(function(d) { return d.point; });
​
    var map = L.map('map', {
      center: [35.467560, -97.516428],
      zoom: 8,
      layers: [grayscale],
      scrollWheelZoom: false
    });
​
    var options = {
      radius : 12,
      opacity: 0.75,
      duration: 200,
      lng: function(d){
          return d[0];
      },
      lat: function(d){
          return d[1];
      },
      value: function(d){
          return d.length;
      },
      valueFloor: 0,
      valueCeil: undefined
    };
​
    var hexLayer = L.hexbinLayer(options).addTo(map);
    hexLayer.colorScale().range(['#9ecae1', '#08306b']);
​
    hexLayer.data(data);
​
  };
​
  </script>
​
    