Permalink
Find file
0c0f63e Aug 18, 2013
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>