Map of GitHub Commits

README.md

README

A geographic map that displays GitHub commits by countries. To view the map and information on how it was created see this article.

You can also view this gist at bl.ocks.org. If you fork it and apply changes you can see them live at bl.ocks.org/YOUR_GIST_ID.

commitmap.js

google.load('visualization', '1', {'packages': ['geochart']});

var dataurl = 'https://docs.google.com/spreadsheet/ccc?key=0Ajfu-hBSP-VLdFlkbFpWYTBxQ3Z4Mjc4bWxtUE5zX1E ';

var settings = {
    colorSchemes: [
        ['#A50026', '#D73027', '#F46D43', '#FDAE61', '#FEE090', '#FFFFBF', '#E0F3F8', '#ABD9E9', '#74ADD1', '#4575B4', '#313695'], // diverging red to blue
        ['#FFFFCC', '#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'], // sequential yellow to red
        ['#F7FCFD', '#E5F5F9', '#CCECE6', '#99D8C9', '#66C2A4', '#41AE76', '#238B45', '#006D2C', '#00441B'], // sequential blue to green
    ],
    colorScheme: 0,
    dataTypes: ['relative', 'absolute', 'population'],
    dataType: 0,
    maxValue: {
        'relative': 4000,
        'absolute': null,
        'population': null
    },
    queryCol: {
        'relative': 'D',
        'absolute': 'B',
        'population': 'E'
    },
    queryStr: 'SELECT A, # ORDER BY # DESC',
    mapRegions: {
        'World': null,

        'Americas': '019',
        'Northern America': '021',
        'Caribbean': '029',
        'Central America': '013',
        'South America': '005',

        'Europe': '150',
        'Northern Europe': '154',
        'Western Europe': '155',
        'Eastern Europe': 151,
        'Southern Europe': '039',

        'Asia': '142',
        'Central Asia': '143',
        'Eastern Asia': '030',
        'Southern Asia': '034',
        'South-Eastern Asia': '035',
        'Western Asia': '145',

        'Africa': '002',
        'Northern Africa': '015',
        'Western Africa': '011',
        'Middle Africa': '017',
        'Eastern Africa': '014',
        'Southern Africa': '018',

        'Oceania': '009',
        'Australia and New Zealand': '053',
        'Melanesia': '054',
        'Micronesia': '057',
        'Polynesia': '061'
    },
    mapRegion: null // show world by default
};

function drawMap() {
    query = new google.visualization.Query(dataurl);
    var queryStr = settings.queryStr.replace(/#/g, settings.queryCol[settings.dataTypes[settings.dataType]]);
    query.setQuery(queryStr);
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var vis = new google.visualization.GeoChart(document.getElementById('map'));
    var dataTable = response.getDataTable();
    vis.draw(dataTable, {
        colorAxis: {
            colors: settings.colorSchemes[settings.colorScheme],
            maxValue: settings.maxValue[settings.dataTypes[settings.dataType]]
        },
        datalessmapRegionColor: 'FFFFFF',
        height:448,
        region: settings.mapRegions[settings.mapRegion]
    });

    slide(dataTable);
}

function slide(dataTable) {
  var col = settings.queryCol[settings.dataTypes[settings.dataType]];
  var maxDataVal = Math.ceil(dataTable.D[0].c[1].v);
  var settingsVal = settings.maxValue[settings.dataTypes[settings.dataType]]
  if (null === settingsVal) {
    settingsVal = maxDataVal;
    settings.maxValue[settings.dataTypes[settings.dataType]] = maxDataVal;
  }
  $('#sliderRange').attr('max', maxDataVal);
  $('#sliderRange').attr('value', settingsVal);
  $('#sliderMax').html(maxDataVal);
  $('#sliderText').attr('value', settingsVal);
  $('#sliderRange').attr('step', Math.ceil(maxDataVal/50));
}

$(function(){
  drawMap();
  $('.mapSettings').change(function(evt){
    if ('null' !== this.value && 'selected' !== this.selected) {
      settings[this.id] = this.value;
      $('#map').empty();
      drawMap();
    };
  });
  $('#sliderRange').change(function(evt){
    settings.maxValue[settings.dataTypes[settings.dataType]] = parseInt(this.value);
    drawMap();
  });
  $('#sliderText').bind('keypress', function(evt){
    if (13 == event.which) {
      event.preventDefault();
      settings.maxValue[settings.dataTypes[settings.dataType]] = parseInt(this.value);
      drawMap();
    }
  });
});

index.html

<html>
<head>
<title>GitHub Commit Map</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.container {height:500px;}
select {width:200px;}
.w300 {width:300px;float:left;}
.form-horizontal .control-label {width:100px;padding-top:2px;}
.form-horizontal .controls {margin-left: 120px;}
label, select {font-size:.8em;height:24px;line-height:24px;}
#sliderText {width:120px;}
#sliderRangeLabel {display:inline;margin-right:10px;}
</style>
</head>
<body>
<div class="container">

  <div id="mapControls" class="row">
  <form class="form-horizontal">
  <div class="w300">
    <label class="control-label" for="mapRegion">Region</label>
    <div class="controls">
      <select id="mapRegion" name="mapRegion" class="mapSettings">
        <option value="World" selected="selected">World</option>
        <optgroup label="Americas">
        <option value="Americas">Americas</option>
        <option value="Northern America">Northern America</option>
        <option value="Caribbean">Caribbean</option>
        <option value="Central America">Central America</option>
        <option value="South America">South America</option>
        </optgroup>
        <optgroup label="Europe">
        <option value="Europe">Europe</option>
        <option value="Northern Europe">Northern Europe</option>
        <option value="Western Europe">Western Europe</option>
        <option value="Eastern Europe">Eastern Europe</option>
        <option value="Southern Europe">Southern Europe</option>
        </optgroup>
        <optgroup label="Asia">
        <option value="Asia">Asia</option>
        <option value="Central Asia">Central Asia</option>
        <option value="Eastern Asia">Eastern Asia</option>
        <option value="Southern Asia">Southern Asia</option>
        <option value="South-Eastern Asia">South-Eastern Asia</option>
        <option value="Western Asia">Western Asia</option>
        </optgroup>
        <optgroup label="Africa">
        <option value="Africa">Africa</option>
        <option value="Northern Africa">Northern Africa</option>
        <option value="Western Africa">Western Africa</option>
        <option value="Middle Africa">Middle Africa</option>
        <option value="Eastern Africa">Eastern Africa</option>
        <option value="Southern Africa">Southern Africa</option>
        </optgroup>
        <optgroup label="Oceania">
        <option value="Oceania">Oceania</option>
        <option value="Australia and New Zealand">Australia and New Zealand</option>
        <option value="Melanesia">Melanesia</option>
        <option value="Micronesia">Micronesia</option>
        <option value="Polynesia">Polynesia</option>
        </optgroup>
      </select>
    </div>
  </div>

  <div class="w300">
    <label class="control-label" for="dataType">Data</label>
    <div class="controls">
      <select id="dataType" name="dataType" class="mapSettings">
        <option value="0" selected="selected">Commits per 100k People</option>
        <option value="1">Total Number of Commits</option>
        <option value="2">Population</option>
      </select>
    </div>
  </div>

  <div class="w300">
    <label class="control-label" for="colorScheme">Colors</label>
    <div class="controls">
      <select id="colorScheme" name="colorScheme" class="mapSettings">
        <option value="0" selected="selected">Diverging Red to Blue</option>
        <option value="1">Sequential Yellow to Red</option>
        <option value="2">Sequential Blue to Green</option>
      </select>
    </div>
  </div>
  </div>

  <div class="row">
    <div id="map" class="span12"></div>
  </div>

  <div id="mapSlider" class="row">
  <div class="span12">
    <label id="sliderRangeLabel" for="sliderRange">Set displayed color data range</label>
    <span id="sliderMin">0</span>
    <input id="sliderRange" name="sliderRange" type="range" min="0" max="550" step="10" value="550">
    <span id="sliderMax"></span>
    <input id="sliderText" type="text" value="550">
  </div>
  </div>

</div>

<script src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="commitmap.js"></script>
</body>
</html>