1<!DOCTYPE html> 2<head> 3<style> 4 5svg, canvas { 6 display: block; 7 position: absolute; 8} 9 10.border-outer { 11 stroke: lightblue; 12 stroke-width: 8px; 13 fill: none; 14} 15.border { 16 stroke: #449; 17 stroke-width: 1px; 18 fill: lightyellow; 19 cursor: help; 20} 21 22.border.FRA { 23 fill: lightgreen; 24} 25 26.border-outer.PYF.complete { 27 stroke-width: 3px; 28} 29 30.prefecture-label { 31 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 32 font-weight: bold; 33 font-size: 14px; 34 fill: black; 35 stroke: lightgrey; 36 stroke-width: 0.6px; 37} 38 39h1 { 40} 41 42.graticule { 43 stroke: lightgrey; 44 fill: none; 45} 46 47form { 48 display: inline-block; 49 font-family: sans-serif; 50 font-size: 10px; 51} 52 53form input { 54 vertical-align: middle; 55} 56 57h3 { 58 margin-top: 3px; 59} 60 61p { 62 margin: 0; 63} 64 65#scale-taux { 66 margin: 8px; 67 vertical-align: middle; 68 display: inline-block; 69 width: 200px; 70 height: 10px; 71 background: #ff0000; 72 background: -webkit-gradient(linear, left top, right top, color-stop(0%,#FFF), color-stop(100%,green)); 73 background: -moz-linear-gradient(left, #FFF 0%, green 100%); 74 background: -webkit-linear-gradient(left, #FFF 0%, green 100%); 75 background: -o-linear-gradient(left, #FFF 0%, green 100%); 76 background: -ms-linear-gradient(left, #FFF 0%, green 100%); 77 background: linear-gradient(to right, #FFF 0%, green 100%); 78} 79 80#credits { 81 font-size: 12px; 82} 83 84</style> 85 86<title>Départements.</title> 87<meta name="twitter:card" content="summary_large_image" /> 88<meta name="twitter:site" content="@badaseong" /> 89 90<meta property="og:site_name" content="Ssz.fr"> 91<meta property="og:type" content="website" /> 92<meta property="og:url" content="https://ssz.fr/dpt"> 93<meta property="og:image" content="https://ssz.fr/dpt/image.png" /> 94<meta property="og:image:height" content="1088" /> 95<meta property="og:image:width" content="1235" /> 96<meta property="og:image:type" content="image/png" /> 97<meta property="og:locale" content="fr_FR" /> 98<meta property="og:title" content="Numéros des départements" /> 99<meta property="og:description" content="Numéros des départements et différence avec les départements voisins." /> 100<meta name="description" content="Numéros des départements et différence avec les départements voisins." /> 101 102</head> 103<body> 104
105<script src="d3.v3.min.js"></script>
vendor: 1 bytes, line 105
105
106<script src="topojson.v1.js"></script>
vendor: 1 bytes, line 106
106
107<script src="queue.v1.min.js"></script>
vendor: 1 bytes, line 107
107
108<script src="francedom.js"></script>
108 109 110<span style="position: absolute; left: 30px; top: 50px;">01<span id="scale-taux"></span>97<h3>Numéro du département</h3></span> 111
112<script> 113 114var width = 2000, 115 height = 1500; 116 117var projection = d3.geo.franceDom() 118 .scale(6000) 119 .translate([700, 500]); 120 121var svg = d3.select("body").append("svg") 122 .attr("width", width) 123 .attr("height", height) 124 .style("z-index", "-1"); 125 126var path = d3.geo.path() 127 .projection(projection); 128 129var paris_path = d3.geo.path() 130 .projection(projection.paris); 131 132function border(id0, id1) { 133 return function(a, b) { 134 return a.properties.code == id0 && b.properties.code == id1 135 || a.properties.code == id1 && b.properties.code == id0; 136 }; 137} 138 139function frontiere(id0) { 140 return function(a, b) { 141 return a === b; 142 }; 143} 144 145queue() 146 .defer(d3.json, "dpt.topojson") 147 .await(function(error, departements) { 148 var scale = d3.scale.linear() 149 .domain([0, 99]) 150 .range(['white', 'green']); 151 152 var scale2 = d3.scale.linear() 153 .domain([0, 99]) 154 .range(['white', 'red']); 155 156 d3.map(departements.objects).forEach(function(i, d) { 157 var topo = topojson.feature(departements, d).features; 158 159 topo.forEach(function(d) { 160 d.numero = d.properties.code; 161 d.code = d.numero; 162 d.label = d.numero; 163 164 d.paris = d.numero.match(/(75|92|93|94)/); 165 166 if (d.code >= 970 && d.code < 980) { 167 d.label = d.code.substr(0, 2) + "(" + d.code.substr(2, 1) + ")"; 168 d.code = 97; 169 } 170 171 if (d.code == "2A") { 172 d.code = 20; 173 d.label = "2A (20)"; 174 } 175 176 if (d.code == "2B") { 177 d.code = 20.5; 178 d.label = "2B (20.5)"; 179 } 180 }); 181 182 183 topo.forEach(function(d1) { 184 d1.diffs = []; 185 topo.forEach(function(d2) { 186 var diff = Math.abs(d1.code - d2.code); 187 188 var shared_border = topojson.mesh(departements, d, border(d1.numero, d2.numero)); 189 190 if (shared_border.coordinates.length > 0) { 191 d1.diffs.push(diff); 192 } 193 }); 194 195 d1.total = 0; 196 for (var diff in d1.diffs) { 197 d1.total += d1.diffs[diff]; 198 } 199 d1.mean = d1.total / d1.diffs.length; 200 }); 201 202 svg.selectAll(".departement") 203 .data(topo).enter().append('path') 204 .attr("class", function(d) { return "departement " + d.code; }) 205 .attr("d", path) 206 .style('stroke', function(d) { 207 return scale(d.code); 208 }) 209 .style('fill', function(d) { 210 return scale(d.code); 211 }) 212 .append('title') 213 .text(function(d) { return d.properties.nom + ' : ' + d.code.toString(); }) 214 215 svg.selectAll(".paris") 216 .data(topo.filter(function(d) { return d.paris; })).enter().append('path') 217 .attr("class", function(d) { return "paris " + d.code; }) 218 .attr("d", paris_path) 219 .style('stroke', function(d) { 220 return scale(d.code); 221 }) 222 .style('fill', function(d) { 223 return scale(d.code); 224 }) 225 .append('title') 226 .text(function(d) { return d.properties.nom + ' : ' + d.code.toString(); }) 227 228 var border_scale = d3.scale.linear() 229 .domain([0, 99]) 230 .range(['white', 'black']); 231 232 var border_width_scale = d3.scale.linear() 233 .domain([0, 10, 99]) 234 .range([0, 0, 5]); 235 236 departement_diffs = {}; 237 a = departements; 238 b = d; 239 240 for (var d1 = 1; d1 < 98; d1++) { 241 var numero_1 = d1 < 10 ? "0" + d1 : d1; 242 for (var d2 = 1; d2 < 98; d2++) { 243 var numero_2 = d2 < 10 ? "0" + d2 : d2; 244 245 var diff = Math.abs(numero_1 - numero_2); 246 247 if (diff > 0) { 248 var shared_border = topojson.mesh(departements, d, border(numero_1, numero_2)); 249 250 if (shared_border.coordinates.length > 0) { 251 if ((numero_1 != 75 && numero_1 != 92 && numero_1 != 93 && numero_1 != 94) || 252 (numero_2 != 75 && numero_2 != 92 && numero_2 != 93 && numero_2 != 94)) { 253 var shared_path = path(shared_border); 254 } else { 255 var shared_path = paris_path(shared_border); 256 257 svg.append("path") 258 .attr("fill", "none") 259 .attr("stroke", "black") 260 .attr("stroke-width", border_width_scale(diff)) 261 .attr("d", path(shared_border)); 262 } 263 264 svg.append("path") 265 .attr("fill", "none") 266 .attr("stroke", "black") 267 .attr("stroke-linejoin", "round") 268 .attr("stroke-width", border_width_scale(diff)) 269 .attr("d", shared_path); 270 271 if (!departement_diffs[d1]) { 272 departement_diffs[d1] = []; 273 } 274 275 departement_diffs[d1].push(diff); 276 } 277 } 278 } 279 } 280 281 /* 282 var shared_border = topojson.mesh(departements, d, frontiere()); 283 svg.append("path") 284 .attr("fill", "none") 285 .attr("stroke", "red") 286 .attr("stroke-linejoin", "round") 287 .attr("stroke-width", "1px") 288 .attr("d", path(shared_border)); 289 */ 290 291 svg.selectAll(".departement.label") 292 .data(topo.filter(function(d) { return !d.paris; })).enter().append('text') 293 .attr("class", function(d) { return "departement " + d.code; }) 294 .attr("dy", "11") 295 .attr("transform", function(d) { return "translate(" + projection(d3.geo.centroid(d)) + ")"; }) 296 .style("text-anchor", "middle") 297 .style("font-family", "sans-serif") 298 .style("font-weight", "bold") 299 .style("font-size", "11pt") 300 .text(function(d) { return d.label; }) 301 302 svg.selectAll(".departement.label.nom") 303 .data(topo.filter(function(d) { return !d.paris; })).enter().append('text') 304 .attr("class", function(d) { return "departement " + d.code; }) 305 .attr("dy", "-2") 306 .attr("transform", function(d) { return "translate(" + projection(d3.geo.centroid(d)) + ")"; }) 307 .style("text-anchor", "middle") 308 .style("font-family", "sans-serif") 309 .style("font-size", "7pt") 310 .text(function(d) { return d.properties.nom; }) 311 312 svg.selectAll(".departement.label") 313 .data(topo.filter(function(d) { return d.paris; })).enter().append('text') 314 .attr("class", function(d) { return "departement " + d.code; }) 315 .attr("dy", "12") 316 .attr("transform", function(d) { return "translate(" + projection.paris(d3.geo.centroid(d)) + ")"; }) 317 .style("text-anchor", "middle") 318 .style("font-family", "sans-serif") 319 .style("font-weight", "bold") 320 .style("font-size", "11pt") 321 .text(function(d) { return d.code.toString(); }) 322 323 svg.selectAll(".departement.label.nom") 324 .data(topo.filter(function(d) { return d.paris; })).enter().append('text') 325 .attr("class", function(d) { return "departement " + d.code; }) 326 .attr("dy", "-2") 327 .attr("transform", function(d) { return "translate(" + projection.paris(d3.geo.centroid(d)) + ")"; }) 328 .style("text-anchor", "middle") 329 .style("font-family", "sans-serif") 330 .style("font-size", "7pt") 331 .text(function(d) { return d.properties.nom; }) 332 }); 333}); 334 335</script>
335 336</body>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.