An attempt to make a dot grid map with d3.js.
CoffeeScript HTML
Latest commit db05daf Mar 30, 2015 @riccardoscalco update
Failed to load latest commit information. update Mar 30, 2015 update README, clean code Mar 30, 2015
gridmap.js update README, clean code Mar 30, 2015
index.html update README, clean code Mar 30, 2015
us.json first commit Mar 9, 2015


enter image description here

This is an attempt to create dot grid maps with d3.js.

Dot grid maps could also be done with Kartograph and Gregor Aisch wrote a neat description of what a dot grid map is:

In 1967, the French cartographer Jaques Bertin suggested the use of graduated sizes in a regular pattern as alternative to chroropleth maps.

The most notable advantage is that one no longer need to choose between showing the quantity or density of a distribution, since the regular pattern shows both at the same time: You can compare the density by looking at individual circles while still getting an impression of the total quantity for each department.

For further details refer to Semiology of Graphics, by Jacques Bertin.


  chart = gridmap()


  • data is a object linking feature names (key) to the associated data. It can be passed in the form of quantity distribution (q) or in the form of density distribution (d), setting isDensity to false or true respectively.
  • key is the attribute that identifies the feature (usually an id).
  • side is the maximum grid-dot diameter in pixel.
  • projection is a d3.geo.projection. Use equal-area projections, dotgrid maps assume the projection preserves area measure.
  • some map features may be not covered by any grid-dot, in that case the function adds the features data to the grid-dot nearest to the feature centroid. The density value associated to the grid-dot is calculated as:
    • sum(d * A)/sum(A) in the case data si passed as density distribution
    • sum(q)/sum(A) in the case data si passed as quantity distribution where A is the feature area and the summation runs over the list of features associated to the grid-dot.


Written with StackEdit.