Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
72 lines (49 sloc) 2.37 KB
---
layout: showcase
title: Choropleth Maps
---
<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css">
<style type="text/css">
.mapnail {
display: inline-block;
width: 33%;
}
</style>
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
<script type="text/javascript" src="/js/chroma.min.js"></script>
<script type="text/javascript">
$(function() {
var map,
colorscale,
departments = {},
w = $('#map').parent().width();
// initialize qtip tooltip class
$.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
$.fn.qtip.defaults.style.def = false;
$.getJSON('departments.json', function(departments) {
$.get('france-departments.svg', function(svg) {
$.each(['Reds', 'GnBu', 'RdYlBu', 'PiYG', 'PRGn', 'YlOrRd'], function(i, brewer) {
var div = $('<div />').addClass('mapnail');
$('#map').append(div);
var map = kartograph.map(div, w * 0.32, w/3),
color = chroma.scale(brewer).domain(departments, 7, 'quantiles', 'density');
map.setMap(svg);
map.addLayer('departments', {
styles: {
'stroke-width': 0.7,
fill: function(d) { return color(departments[d.id].density); },
stroke: function(d) { return color(departments[d.id].density).darker(); }
},
tooltips: function(d) {
return [d.name, departments[d.id].density + '/km<sup>2</sup>'];
}
});
});
});
});
});
</script>
<p>This choropleth map shows population data for each of the departements of metropolean France. In general, mapping absolute quantities to values result in erroneous images since larger areas are perceived. Another way to get around this issue is to use <a href="/showcase/dotgrid/">dot grid maps</a>.</p>
<div id="map">&nbsp;</div>
<p>The <b>colors</b> are taken from <a href="http://colorbrewer2.org">ColorBrewer</a>. They are included in <a href="https://github.com/gka/chroma.js">chroma.js</a>.</p>
<p>Map source: <a href="http://gadm.org">GADM</a>, <a href="/maps/#3683747">Kartograph config</a></p>