The first day of the Blitz animated (somehow)

<!DOCTYPE html>
<html>
  <head>
    <title>The first day of the Blitz</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript"
            src="https://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript"
            src="https://d3js.org/d3.v2.min.js"></script>
    <style type="text/css">
    html, body, #map {
        width:   100%;
        height:  100%;
        margin:  0;
        padding: 0;
    }

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

.drops 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;
    }

.drops circle {
        fill: red;
        stroke: black;
        stroke-width: 1.5px;
    }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="theblitz.js"></script>
  </body>
</html>