Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" /> 
  </head>
  <body>
    <div class="container">
      <h2>Workers commuting by bike (%)</h2>
      <div id="container-bike" style="position: relative; width: 500px; height: 300px;"></div>
      <div class="button" data-year="1990" id="1990">1990</div>
      <div class="button" data-year="2000" id="2000">2000</div>
    </div>
​
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//datamaps.github.io/scripts/datamaps.usa.js?v=1"></script>
    <script>
      $(".button").click(function(e) {
        $.each(modes, function(idx, mode) {
          maps[mode].bubbles(getBubbles($(e.target).data()['year'], mode), getBubbleConfig())
        });
      });
​
      var years = [1990, 2000]
​
      var maps = {}
​
      var cities = [{
          name: "New York",
          slug: "newYork",
          latitude: 40.7127,
          longitude: -74.0059
        },{
          name: "Los Angeles",
          slug: "losAngeles",
          latitude: 34.0500,
          longitude: -118.2500, 
        },{
          name: "Oakland",
          slug: "oakland",
          latitude: 37.8044,
          longitude: -122.2708
        },{
          name: "Miami",
          slug: "miami",
          latitude: 25.7753,
          longitude: -80.2089
        },{
          name: "Phoenix",
          slug: "phoenix",
          latitude: 33.4500,
          longitude: -112.0667
        },{
          name: "Chicago",
          slug: "chicago",
          latitude: 41.8369,
          longitude: -87.6847 
        }
      ];
​
      var data = {
        newYork: {
          bike: {
            1990: 0.3,
            2000: 0.47
          }
        },
        losAngeles: {
          bike: {
            1990: 0.59,
            2000: 0.61
          }
        },
        oakland: {
          bike: {
            1990: 1.10,
            2000: 1.22
          }
        },
        miami: {
          bike: {
            1990: 0.60,
            2000: 0.55
          }
        },
        phoenix: {
          bike: {
            1990: 1.09,
            2000: 0.86
          }
        },
        chicago: {
          bike: {
            1990: 1.09,
            2000: 0.86
          }
        },
      };
​
      var fills = {
        bike: 'BIKE',
      };
      
      var modes = ['bike']
​
      var getBubbleConfig = function () { 
        return { popupTemplate: template, borderWidth: 1 }
      };
​
      var template = function(geo, data) {
        return '<div class="hoverinfo">' + data.name + 
          ': ' + data.value + '%'
      }
​
      var getBubbles = function(year, mode) {
        return $.map(cities, function(city) {
          return $.extend({}, city, {
            radius: data[city['slug']][mode][year] * 15, 
            fillKey: fills[mode],
            value: data[city['slug']][mode][year]
          });
        })
      };
​
      $.each(modes, function(idx, mode) {
        var map = new Datamap({
          element: document.getElementById('container-' + mode),
          scope: 'usa',
          geographyConfig: {
              popupOnHover: false,
              highlightOnHover: false
          },
          fills: {
            defaultFill: '#ddd',
            BIKE: '#4f707f',
          }
        });
​
        map.bubbles(getBubbles(years[0], mode), getBubbleConfig());
        maps[mode] = map;
      })
    </script>
  </body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
thebenedictpro
0viewers