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(data)
.width(width)
.height(height)
.key("id")
.side(5)
.isDensity(true)
.projection(projection)
.features(features)
.fill("black");
d3.select("#gridmap").call(chart);
data
is a d3.map()
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.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 distributionA
is the feature area and the summation runs over the list of features associated to the grid-dot.Written with StackEdit.