-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
133 lines (133 loc) · 6.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Carte choroplèthe interactive</title>
<script type="text/javascript" src="lib/d3.v2.min.js"></script>
<script type="text/javascript" src="choropleth.js"></script>
<link type="text/css" rel="stylesheet" href="choropleth.css"/>
<link type="text/css" rel="stylesheet" href="lib/colorbrewer.css"/>
</head>
<body>
<h1>Carte choroplèthe interactive</h1>
<div id="chart">
<svg></svg>
<p>
Zoom : double-clic. Zoom arrière : maj + double-clic.
</p>
</div>
<div>
<textarea id="fillcode" cols="80" rows = "10">
return function(get, prop) {
participation = get("pres_2012_T2_Votants") / get("pres_2012_T2_Inscrits") ;
return participation * 100;
};
/* Un autre exemple, à visualiser avec une palette « divergeante » et une
échelle « linéaire symétrique ». */
function compareParticipation17h(get) {
var t2_2007 = get("participation_pres_2007_T2_17h");
var t2_2012 = get("participation_pres_2012_T2_17h");
return (t2_2012-t2_2007);
};
</textarea>
<br />
<input type="submit" value="Appliquer" id="compute" />
<a href="http://github.com/kerneis/france-choropleth/blob/master/README.md">Explications</a>.
<a href="http://github.com/kerneis/france-choropleth/">Code</a>.
<br />
<select id="mapfiles">
<option value="departement" checked="checked">Départements</option>
<option value="arrondissement">Arrondissements</option>
<option value="canton">Cantons</option>
<option value="commune">Communes (très lent !)</option>
</select>
<fieldset>
<legend>Légende</legend>
Nombre de couleurs :
<select id="buckets">
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
Palette :
<select id="palette">
<optgroup label="Séquentiel multiteinte">
<option value="YlGn">Jaune Vert</option>
<option value = "YlGnBu">Jaune Vert Bleu</option>
<option value = "GnBu">Vert Bleu</option>
<option value = "BuGn">Bleu Vert</option>
<option value = "PuBuGn">Violet Bleu Vert</option>
<option value = "PuBu">Violet Bleu</option>
<option value = "BuPu">Bleu Violet</option>
<option value = "RdPu">Rouge Violet</option>
<option value = "PuRd">Violet Rouge</option>
<option value = "OrRd">Orange Rouge</option>
<option value = "YlOrRd">Jaune Orange Rouge</option>
<option value = "YlOrBr">Jaune Orange Marron</option>
</optgroup>
<optgroup label="Séquentiel monoteinte">
<option value = "Purples">Violet</option>
<option value = "Blues">Bleu</option>
<option value = "Greens">Vert</option>
<option value = "Oranges">Orange</option>
<option value = "Reds">Rouge</option>
<option value = "Greys">Gris</option>
</optgroup>
<optgroup label="Divergeant">
<option value = "PuOr">Violet Orange</option>
<option value = "BrBG">Marron Bleu-vert</option>
<option value = "PRGn">Violet-rouge Vert</option>
<option value = "PiYG">Rose Jaune-vert</option>
<option value = "RdBu">Rouge Bleu</option>
<option value = "RdGy">Rouge Gris</option>
<option value = "RdYlBu">Rouge Jaune Bleu</option>
<option value = "Spectral">Spectral</option>
</optgroup>
</select>
<br />
<input type="radio" name="scale" value="quantize" checked="checked">Linéaire</input>
<input type="radio" name="scale" value="symmetry">Linéaire
symétrique</input>
<input type="radio" name="scale" value="quantile">Quantiles</input>
<br />
<div id="legend"></div>
</fieldset>
</div>
<hr id="loaded"/>
<h2>Données disponibles</h2>
<ul>
<li>Département
<ul id="data-departement"></ul>
</li>
<li>Arrondissement
<ul id="data-arrondissement"></ul>
</li>
<li>Canton
<ul id="data-canton"></ul>
</li>
<li>Commune
<ul id="data-commune"></ul>
</li>
</ul>
<p>Sources : départements, arrondissements, cantons et communes par <a
href="http://professionnels.ign.fr/ficheProduitCMS.do?idDoc=6185461">GEOFLA®</a>.
<!-- Circonscriptions législatives par <a href="http://www.toxicode.fr/circonscriptions">Toxicode</a>.-->
Résultats et participation des législatives par le ministère de
l'Intérieur, via <a
href="http://www.nosdonnees.fr/package/resultats-et-participation-l-election-presidentielle-2012">NosDonnées.fr</a>
et <a href="http://www.data.gouv.fr">data.gouv.fr</a>.
</p>
<hr />
<p>Conçu et réalisé par <a href="http://github.com/kerneis/">Gabriel
Kerneis</a> à partir d'une idée de <a
href="http://www.madore.org/~david/weblog/2012-04.html#d.2012-04-26.2033">David
Madore</a>.</p>
<p>This product includes color specifications and designs developed by
<a href="http://colorbrewer.org/">Cynthia Brewer</a>.
</p>
</body>
</html>