Old school D3 from simpler times

All examples By author By category About

maptastik

Full window Github gist

Map of 2015 Bluegrass 10,000 participants by hometown made using CartoDB and CartoDB.js

This map was made using CartoDB and CartoDB.js. Data were extracted from Chronotrack and compiled as a CSV. Counts for each town were derived in Google Sheets. The locations were then geocoded and cleaned further in CartoDB.

<!DOCTYPE html>
<html>
  <head>
    <title>Bluegrass 10,000 2015 Paricipants by Hometown</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <link rel="stylesheet" href="style.css" />

</head>
  <body>
    <div id="map"></div>

<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

<script>
      function main() {
        cartodb.createVis('map', 'https://maptastik.cartodb.com/api/v2/viz/6e046326-238b-11e5-a460-0e4fddd5de28/viz.json', {
            shareable: true,
            title: false,
            description: false,
            search: false,
            tiles_loader: true,
            fullscreen: true,
            mobile_layout: true,
            center_lat: 37.090240,
            center_lon: -95.712891,
            zoom: 5
        })
        .done(function(vis, layers) {
          layers[1].setInteraction(true);
          layers[1].on('featureOver', function(e, latlng, pos, data) {
            cartodb.log.log(e, latlng, pos, data);
          });
          var map = vis.getNativeMap();
        })
        .error(function(err) {
          console.log(err);
        });
      }

window.onload = main;
    </script>
  </body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js