Old school D3 from simpler times

All examples By author By category About

johan

Full window Github gist

Google Maps + D3 + USGS

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>Earthquakes &gt; 1.0 the past week</title>
    <script src="https://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.csv.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.time.js"></script>
    <style type="text/css">

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.quakes, .quakes svg {
  position: absolute;
}

.quakes svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
  /* we need rather many text shadows to outline the text in enough contrast */
  text-shadow: 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF,
               0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF;
}

.quakes circle {
  stroke: black;
  stroke-width: 1px;
}

#ca-zipcodes path {
  stroke: #fff;
  stroke-width: .0125px;
}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="index.js"></script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>Earthquakes &gt; 1.0 the past week</title>
    <script src="https://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.csv.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.time.js"></script>
    <style type="text/css">
​
html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
​
.quakes, .quakes svg {
  position: absolute;
}
​
.quakes svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
  /* we need rather many text shadows to outline the text in enough contrast */
  text-shadow: 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF, 0 0 1px #FFF,
               0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF,
               0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF;
}
​
.quakes circle {
  stroke: black;
  stroke-width: 1px;
}
​
#ca-zipcodes path {
  stroke: #fff;
  stroke-width: .0125px;
}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="index.js"></script>
  </body>
</html>
​
    

Modified http://maps.google.com/maps/api/js?sensor=true to a secure url

Modified http://mbostock.github.com/d3/d3.js?2.5.0 to a secure url

Modified http://mbostock.github.com/d3/d3.csv.js?2.5.0 to a secure url

Modified http://mbostock.github.com/d3/d3.time.js?2.5.0 to a secure url

https://maps.google.com/maps/api/js?sensor=true

https://mbostock.github.com/d3/d3.js?2.5.0

https://mbostock.github.com/d3/d3.csv.js?2.5.0

https://mbostock.github.com/d3/d3.time.js?2.5.0