D3.js grid map
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
data handle Float32 input data Nov 26, 2015
.gitignore major refactor with browserify Oct 29, 2015
Makefile - pushed grid mapping to Grid.getIndexMap Nov 5, 2015
README.md major refactor with browserify Oct 29, 2015
d3-grid-map.js Adding on onMouseMove event to the map options. Feb 8, 2016
d3-grid-map.min.js Adding on onMouseMove event to the map options. Feb 8, 2016
index.html used createImageData instead of getImageData for perf Feb 5, 2016
package.json built files, bumped to 0.0.3 Nov 7, 2015



D3 gridded data set mapper

See demo

This package will draw a geographic map on an html5 canvas using D3 in the container of your choosing. Gridded and vector data layers can be added to the returned map object using its addLayer method.

For instance, land outlines can be drawn from the included countries.topojson data.


Pass a DOM container selector string and optional arguments to d3.geo.GridMap to initialize a GridMap object, then add data sets via its addLayer() method.

The data can be in several forms, all handled by addLayer:

var map = new d3.geo.GridMap('#container');

// an ArrayBuffer buff containing data in
// packed binary format

// The packed binary format is expected to be
// a sequence of Uint32 elements in which the most
// significant byte is the cell value and the
// lowest 3 bytes represent the cell ID.
var layer1 = map.addLayer(buffer, {gridSize: [10, 10]});

// a UInt8ClampedArray containing data in
// RGBA format

// The format is expected to be
// a sequence of Uint8 elements representing RGBA
// values for each cell from cell ID 1 to the final cell ID,
// in column first order.
var layer2 = map.addLayer(data,  {gridSize: [10, 10]});

// a geojson or topojson object:
var layer3 = map.addLayer(geojson);


map.addLayer(data, options)


  • zIndex - higher numbers will be stacked on top of lower numbers


d3.json('data/countries.topojson', function(error, countries) {

  var gridSize = [720, 360];

  var options = {
    hud: {
      fontSize: 20,
      fontColor: 'white',
      verticalOffset: 5
    projection: d3.geo.aitoff(),
    onCellHover: function(feature) { console.debug('hovering over ', feature);}

  var map = d3.geo.GridMap('#container', options);

  map.addLayer(countries, {zIndex: 1});

  map.addLayer(data, {gridSize: gridSize, zIndex: 2});


install dependencies with

npm install
bower install

Then build with


To start up an autoreloading development server on the demo index.html:

make develop