Switch branches/tags
Nothing to show
Find file Copy path
687ab10 May 15, 2014
1 contributor

Users who have contributed to this file

93 lines (76 sloc) 2.41 KB
layout: showcase
title: Dot Grid Maps
<script type="text/javascript">
$(function() {
var map,
scale, max_dot_size,
w = $('#map').parent().width();
url: 'departments.json',
dataType: 'json',
success: function(data) {
dep_data = data;
window.m = map ='#map', w, w);
map.loadMap('france-departments.svg', function() {
map.addLayer('departments', {
key: 'id'
* update map colors
function updateMap() {
scale_type = $('.scale.btn-primary').data('type'),
scale = kartograph.scale[scale_type](dep_data, 'density'),
max_dot_size = Number($('.scale.btn-primary').data('mds')),
dotsize = function(d) {
return 1+Math.sqrt(scale(d.density))*max_dot_size;
data: dep_data,
key: 'id',
gridsize: 11,
size: dotsize,
duration: 300,
style: function(d) {
return {
fill: '#804',
'fill-opacity': 1 - (dotsize(d) > 30 ? .4 : 0),
stroke: '#fff',
'stroke-width': .34
$('.btn.scale').click(function(event) {
#map path { stroke-width: 0.3px; }
<div id="map"></div>
In 1967, the French cartographer <a href="">Jaques Bertin</a> suggested the use of graduated sizes in a regular pattern as alternative to <a href="/showcase/choropleth/">chroropleth maps</a>.
The map shows the population distribution across departments in France. The country is overlayed by a regular grid of circles of which each is sized according to the population density of the department the circle falls into.
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 population density by looking at individual circles while still getting an impression of the total population for each department.
<h3>Dot radius scale</h3>
<a class="scale btn btn-primary" data-type="linear" data-mds="60">Linear</a>
<a class="scale btn" data-type="quantile" data-mds="8">Quantiles</a>
<a class="scale btn" data-type="log" data-mds="10">Logarithmic</a>