<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/piximaps.min.css">
<script src="js/piximaps.min.js"></script>
<style>
#chart { width: 540px; height: 540px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
.pixi .charttitle .subtitle { font-size: 0.9em; font-style: italic; text-anchor: start }
</style>
<script>
window.addEventListener('load', () => {
'use strict';
// Set the map attributes:
const map = {
type: 'geojson',
url: '/maps/maps/france.json',
exclude: { gn_a1_code: ['FR.971', 'FR.972', 'FR.973', 'FR.974', 'FR.976'] },
coordinates: [47, 5.5],
zoom: 25,
minZoom: 5,
maxZoom: 50,
scrollwheel: false,
};
const series = [
{ title: 'Grand-Est', style: { fillColor: '#2196f3' } },
{ title: 'Nouvelle Aquitaine', style: { fillColor: '#00bcd4' } },
{ title: 'Auvergne Rhône-Alpes', style: { fillColor: '#009688' } },
{ title: 'Bourgogne Franche-Comté', style: { fillColor: '#4caf50' } },
{ title: 'Bretagne', style: { fillColor: '#cddc39' } },
{ title: 'Centre Val de Loire', style: { fillColor: '#ffeb3b' } },
{ title: 'Corse', style: { fillColor: '#ff5722' } },
{ title: 'Île-de-France', style: { fillColor: '#607d8b' } },
{ title: 'Occitanie', style: { fillColor: '#f44336' } },
{ title: 'Hauts-de-France', style: { fillColor: '#9c27b0' } },
{ title: 'Normandie', style: { fillColor: '#3f51b5' } },
{ title: 'Pays de la Loire', style: { fillColor: '#b71c1c' } },
{ title: 'Provence-Alpes-Côte-d’Azur', style: { fillColor: '#004d40' }, over: { fillOpacity: 0.7 } },
];
// Define the chart settings:
const opts = {
chart: {
width: window.innerWidth < (540 * 0.8) ? (window.innerWidth * 0.8) : 540,
height: window.innerHeight < 540 ? window.innerHeight : 540,
},
title: { label: 'France' },
footer: { label: 'Population per department in 2011. Source Insee.', x: 3 },
legend: { enabled: true, floating: true, shift: { x: -5, y: 5 } },
};
const departments = [
// Alsace, Champagne-Ardenne et Lorraine
{'FRA-FR-08': {title: 'Ardennes', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '283 110'}}},
{'FRA-FR-10': {title: 'Aube', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '303 997'}}},
{'FRA-FR-51': {title: 'Marne', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '566 571'}}},
{'FRA-FR-52': {title: 'Haute-Marne', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '182 375'}}},
{'FRA-FR-54': {title: 'Meurthe-et-Moselle', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '733 124'}}},
{'FRA-FR-55': {title: 'Meuse', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '193 557'}}},
{'FRA-FR-57': {title: 'Moselle', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 045 146'}}},
{'FRA-FR-67': {title: 'Bas-Rhin', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 099 269'}}},
{'FRA-FR-68': {title: 'Haut-Rhin', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '753 056'}}},
{'FRA-FR-88': {title: 'Vosges', style: {fillColor: '#2196f3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '378 830'}}},
// Aquitaine, Limousin et Poitou-Charentes
{'FRA-FR-16': {title: 'Charente', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '352 705'}}},
{'FRA-FR-17': {title: 'Charente-Maritime', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '625 682'}}},
{'FRA-FR-19': {title: 'Corrèze', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '242 454'}}},
{'FRA-FR-23': {title: 'Creuse', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '122 560'}}},
{'FRA-FR-24': {title: 'Dordogne', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '415 168'}}},
{'FRA-FR-33': {title: 'Gironde', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 463 662'}}},
{'FRA-FR-40': {title: 'Landes', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '387 929'}}},
{'FRA-FR-47': {title: 'Lot-et-Garonne', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '330 866'}}},
{'FRA-FR-64': {title: 'Pyrénées-Atlantiques', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '656 608'}}},
{'FRA-FR-79': {title: 'Deux-Sèvres', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '370 939'}}},
{'FRA-FR-86': {title: 'Vienne', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '428 447'}}},
{'FRA-FR-87': {title: 'Haute-Vienne', style: {fillColor: '#00bcd4', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '376 058'}}},
// Auvergne et Rhône-Alpes
{'FRA-FR-01': {title: 'Ain', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '603 827'}}},
{'FRA-FR-03': {title: 'Allier', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '342 729'}}},
{'FRA-FR-07': {title: 'Ardèche', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '317 277'}}},
{'FRA-FR-15': {title: 'Cantal', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '147 577'}}},
{'FRA-FR-26': {title: 'Drôme', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '487 993'}}},
{'FRA-FR-38': {title: 'Isère', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 215 212'}}},
{'FRA-FR-42': {title: 'Loire', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '749 053'}}},
{'FRA-FR-43': {title: 'Haute-Loire', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '224 907'}}},
{'FRA-FR-63': {title: 'Puy-de-Dôme', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '635 469'}}},
{'FRA-FR-69': {title: 'Rhône', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 744 236'}}},
{'FRA-FR-73': {title: 'Savoie', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '418 949'}}},
{'FRA-FR-74': {title: 'Haute-Savoie', style: {fillColor: '#009688', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '746 994'}}},
// Bourgogne et Franche-Comté
{'FRA-FR-21': {title: 'Côte-d\'Or', style: {fillColor: '#4caf50', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '525 931'}}},
{'FRA-FR-25': {title: 'Doubs', style: {fillColor: '#4caf50', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '529 103'}}},
{'FRA-FR-39': {title: 'Jura', style: {fillColor: '#4caf50', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '261 294'}}},
{'FRA-FR-58': {title: 'Nièvre', style: {fillColor: '#4caf50', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '218 341'}}},
{'FRA-FR-70': {title: 'Haute-Saône', style: {fillColor: '#4caf50', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '239 695'}}},
{'FRA-FR-71': {title: 'Saône-et-Loire', style: {fillColor: '#4caf50', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '555 999'}}},
{'FRA-FR-89': {title: 'Yonne', style: {fillColor: '#4caf50', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '342 463'}}},
{'FRA-FR-90': {title: 'Territoire de Belfort', style: {fillColor: '#4caf50', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '143 348'}}},
// Bretagne
{'FRA-FR-22': {title: 'Côtes-d\'Armor', style: {fillColor: '#cddc39', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '594 375'}}},
{'FRA-FR-29': {title: 'Finistère', style: {fillColor: '#cddc39', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '899 870'}}},
{'FRA-FR-35': {title: 'Ille-et-Vilaine', style: {fillColor: '#cddc39', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '996 439'}}},
{'FRA-FR-56': {title: 'Morbihan', style: {fillColor: '#cddc39', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '727 083'}}},
// Centre
{'FRA-FR-18': {title: 'Cher', style: {fillColor: '#ffeb3b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '311 694'}}},
{'FRA-FR-28': {title: 'Eure-et-Loir', style: {fillColor: '#ffeb3b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '430 416'}}},
{'FRA-FR-36': {title: 'Indre', style: {fillColor: '#ffeb3b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '230 175'}}},
{'FRA-FR-37': {title: 'Indre-et-Loire', style: {fillColor: '#ffeb3b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '593 683'}}},
{'FRA-FR-41': {title: 'Loir-et-Cher', style: {fillColor: '#ffeb3b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '331 280'}}},
{'FRA-FR-45': {title: 'Loiret', style: {fillColor: '#ffeb3b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '659 587'}}},
// Corse
{'FRA-FR-2A': {title: 'Corse-du-Sud', style: {fillColor: '#ff5722', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '145 846'}}},
{'FRA-FR-2B': {title: 'Haute-Corse', style: {fillColor: '#ff5722', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '168 640'}}},
// Île-de-France
{'FRA-FR-75': {title: 'Paris', style: {fillColor: '#607d8b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '2 249 975'}}},
{'FRA-FR-77': {title: 'Seine-et-Marne', style: {fillColor: '#607d8b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 338 427'}}},
{'FRA-FR-78': {title: 'Yvelines', style: {fillColor: '#607d8b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 413 635'}}},
{'FRA-FR-91': {title: 'Essonne', style: {fillColor: '#607d8b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 225 191'}}},
{'FRA-FR-92': {title: 'Hauts-de-Seine', style: {fillColor: '#607d8b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 581 628'}}},
{'FRA-FR-93': {title: 'Seine-Saint-Denis', style: {fillColor: '#607d8b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 529 928'}}},
{'FRA-FR-94': {title: 'Val-de-Marne', style: {fillColor: '#607d8b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 333 702'}}},
{'FRA-FR-95': {title: 'Val-d\'Oise', style: {fillColor: '#607d8b', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 180 365'}}},
// Languedoc-Roussillon et Midi-Pyrénées
{'FRA-FR-09': {title: 'Ariège', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '152 286'}}},
{'FRA-FR-11': {title: 'Aude', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '359 967'}}},
{'FRA-FR-12': {title: 'Aveyron', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '275 813'}}},
{'FRA-FR-30': {title: 'Gard', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '718 357'}}},
{'FRA-FR-31': {title: 'Haute-Garonne', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 260 226'}}},
{'FRA-FR-32': {title: 'Gers', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '188 893'}}},
{'FRA-FR-34': {title: 'Hérault', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 062 036'}}},
{'FRA-FR-46': {title: 'Lot', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '174 754'}}},
{'FRA-FR-48': {title: 'Lozère', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '77 156'}}},
{'FRA-FR-65': {title: 'Hautes-Pyrénées', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '229 228'}}},
{'FRA-FR-66': {title: 'Pyrénées-Orientales', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '452 530'}}},
{'FRA-FR-81': {title: 'Tarn', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '377 675'}}},
{'FRA-FR-82': {title: 'Tarn-et-Garonne', style: {fillColor: '#f44336', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '244 545'}}},
// Nord-Pas-de-Calais et Picardie
{'FRA-FR-02': {title: 'Aisne', style: {fillColor: '#9c27b0', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '541 302'}}},
{'FRA-FR-59': {title: 'Nord', style: {fillColor: '#9c27b0', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '2 579 208'}}},
{'FRA-FR-60': {title: 'Oise', style: {fillColor: '#9c27b0', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '805 642'}}},
{'FRA-FR-62': {title: 'Pas-de-Calais', style: {fillColor: '#9c27b0', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 462 807'}}},
{'FRA-FR-80': {title: 'Somme', style: {fillColor: '#9c27b0', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '571 211'}}},
// Basse-Normandie et Haute-Normandie
{'FRA-FR-14': {title: 'Calvados', style: {fillColor: '#3f51b5', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '685 262'}}},
{'FRA-FR-27': {title: 'Eure', style: {fillColor: '#3f51b5', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '588 111'}}},
{'FRA-FR-50': {title: 'Manche', style: {fillColor: '#3f51b5', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '499 531'}}},
{'FRA-FR-61': {title: 'Orne', style: {fillColor: '#3f51b5', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '290 891'}}},
{'FRA-FR-76': {title: 'Seine-Maritime', style: {fillColor: '#3f51b5', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 251 282'}}},
// Pays de la Loire
{'FRA-FR-44': {title: 'Loire-Atlantique', style: {fillColor: '#b71c1c', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 296 364'}}},
{'FRA-FR-49': {title: 'Maine-et-Loire', style: {fillColor: '#b71c1c', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '790 343'}}},
{'FRA-FR-53': {title: 'Mayenne', style: {fillColor: '#b71c1c', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '307 031'}}},
{'FRA-FR-72': {title: 'Sarthe', style: {fillColor: '#b71c1c', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '565 718'}}},
{'FRA-FR-85': {title: 'Vendée', style: {fillColor: '#b71c1c', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '641 657'}}},
// Provence-Alpes-Côte d’Azur
{'FRA-FR-04': {title: 'Alpes-de-Haute-Provence', style: {fillColor: '#004d40', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '160 959'}}},
{'FRA-FR-05': {title: 'Hautes-Alpes', style: {fillColor: '#004d40', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '138 605'}}},
{'FRA-FR-06': {title: 'Alpes-Maritimes', style: {fillColor: '#004d40', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 081 244'}}},
{'FRA-FR-13': {title: 'Bouches-du-Rhône', style: {fillColor: '#004d40', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 975 896'}}},
{'FRA-FR-83': {title: 'Var', style: {fillColor: '#004d40', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '1 012 735'}}},
{'FRA-FR-84': {title: 'Vaucluse', style: {fillColor: '#004d40', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties: {Population: '546 630'}}},
];
// Fix the chart dimensions:
const el = document.getElementById('chart');
el.style.width = opts.chart.width + 'px';
el.style.height = opts.chart.height + 'px';
// Draw the chart:
Pixi.Map('#chart', map, series, opts).overlayUpdate(departments);
});
</script>
</head>
<body>
<div id="chart" class="pixi"></div>
</body>
</html>