45:["$","title",null,{"children":"Afficher France par communes | Éric Mauvière | Observable"}] 4d:T577,md `Les [équations de projection](https://fr.wikipedia.org/wiki/Projection_conique_conforme_de_Lambert) de la Lambert-93 (projection conique conforme) sont complexes. Les appliquer au million de points qui composent le tracé des communes de ce fond de carte demande logiquement beaucoup de ressources. Le pire est que le simple *étalonnage* de la fonction de projection, avant même de la faire intervenir dans la construction du canvas, prend autant de temps que le dessin lui-même. C'est que le rectangle englobant précisément la couche, après projection, doit être calculé avant de caler l'homothétie vers le rectangle de rendu à l'écran. L'ensemble du fond de carte et son million de points est donc parcouru (et projeté) deux fois, d'abord pour l'ajustement de la fonction, puis lors du dessin. L'opération d'étalonnage serait optimisable si au lieu du fond France par commune, on utilisait une couche d'emprise équivalente, mais plus légère, comme le contour général de la France. ### Éviter un calcul systématique sans intérêt pour le lecteur : la projection Et si l'on fournissait directement un fond de carte TopoJSON en coordonnées métriques Lambert-93 ? On éliminerait naturellement une grosse charge de calculs. Refaisons-donc la mesure en partant d'une couche France par commune, au format TopoJSON, directement encodée dans le référentiel EPSG:2154.`4e:T429,{ if (map3_btn == 0) return md`---` await Promises.delay(20) let t0 = performance.now() const context = DOM.context2d(size.width, size.height) const path2154 = d3.geoPath(proj_geojson2154_to_map2154_v2, context) context.beginPath() context.lineWidth = 1 context.strokeStyle = '#ccc' context.fillStyle = '#FEEDAB' let com2021_2154_2 = com2021_2154.features.concat().sort((a,b) => a.properties.reg < b.properties.reg ? 1 : -1) let last_reg com2021_2154_2.forEach( d => { if (d.properties.reg != last_reg) { context.fill() if (stroke) context.stroke() context.beginPath() context.fillStyle = reg_color_map.get(d.properties.reg) context.strokeStyle = context.fillStyle } path2154(d) last_reg = d.properties.reg } ) if (stroke) context.stroke() context.fill() let tm3 = performance.now() mutable time_map3 = ~~(tm3 - t0) + ' ms' setTimeout(() => mutable time_gpu3 = ~~(performance.now() - tm3) + ' ms', 20) return context.canvas }4f:[{"id":"16aedb9fac0d78cf6e2017ad8d0ecbbc9d44a189b60841b7791a22c8bc6bf38ba857cf97b58254dfa72b580a4d112b438e07146381e5689db26303597c02bb42","href":"https://static.observableusercontent.com/files/16aedb9fac0d78cf6e2017ad8d0ecbbc9d44a189b60841b7791a22c8bc6bf38ba857cf97b58254dfa72b580a4d112b438e07146381e5689db26303597c02bb42","name":"a_env_fra_2021_4326.json","type":"application/json","lastModified":1621865722218.082,"size":4523310},{"id":"1bb0165143be588b594aa3373ea39c43920f70d0d04065600547a288fc5a224db50a997b7ca4f62a654eb36e0d62dcc348b662a128fec1bda315b0e42fb991bb","href":"https://static.observableusercontent.com/files/1bb0165143be588b594aa3373ea39c43920f70d0d04065600547a288fc5a224db50a997b7ca4f62a654eb36e0d62dcc348b662a128fec1bda315b0e42fb991bb","name":"p_com2021_cl_4326.json","type":"application/json","lastModified":1621865722218.082,"size":32185}] 49:{"id":"f4a89d816e3b9e7a","slug":"afficher-france-par-communes","title":"Afficher France par communes","thumbnail":"0a74bad14089ef6a2ad401a28729e33cedb9e1696a11c5fa1b8940a3f00ef993","access_level":"public","create_time":"$D2021-05-24T14:15:22.218Z","update_time":"$D2021-06-04T10:40:01.884Z","view_time":null,"first_public_time":"$D2021-06-04T10:36:17.176Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"cd09b02ddc62abda","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":"starter_2024","bio":"Statistician, map-maker, dataviz consultant and trainer, Observable ambassador & R instructor. I enjoy explaining things i love in detail, the most clearly i can, and building live analytical opendataflows. \n@ericmauviere","followed_by_you":false,"follows_you":false},"version":2365,"publish_version":2365,"role":null,"authored":false,"authors":[{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null,"bio":"Dataviz, Semiology of graphics, Datastorytelling, DuckDB\n@ericmauviere","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c86281fcf8f7c7cc","login":"ericmauviere","name":"Éric Mauvière","avatar_url":"https://avatars-next.observableusercontent.com/a35a91b5ca23c5dd084a628d6c4898fb6eefb2ede192b1801b0efae516f49017","tier":null,"role":"editor"}],"comments":[{"id":"617a7c22016b328d","reply_to_id":null,"content":"il me semble que tu peux gagner un peu de temps en utilisant\nd3.geoConicConformal().parallels([44, 49])\nà la place de Lambert93 + ça simplifie un peu le propos","create_time":"$D2021-06-05T06:51:01.447Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"937b14cb905b7e0f","slug":"france-par-communes-2021","title":"France par commune 2021","owner":{"id":"cd09b02ddc62abda","login":"ericmauviere","name":"Éric Mauvière"}},"type":"notebook","body":{"titling":"auto","title":"Afficher France par communes","cells":[{"id":0,"value":"md`

Afficher France par communes

FRANCE COMMUNES 2021 › 4 - Afficher rapidement France par communes

\n# Afficher rapidement la carte de France par communes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"md `## 1 - Le défi de la fluidité`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"md `Après avoir joué avec les départements français, voyons comment monter d'un cran en tentant d'afficher, sans (trop) geler l'écran, notre fameux fond communal 2021.\n\nDans les exemples suivants, divers leviers sont activés. D'une part le choix du rendu, Canvas ou SVG. D'autre part la recherche d'économies de calcul et d'optimisation de dessin.\n\nLe tableau suivant exprime une mesure moyenne (en ms) du temps d'affichage d'une carte coloriée de France par commune, obtenue à partir de mon PC portable sous Windows 10.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2268,"value":"md `\n \n| Navigateur \t| Canvas projeté \t| Canvas non projeté | Canvas optimisé \t| SVG projeté | SVG non projeté\n|-\t|:-:\t|:-: |:-: |:-:\t|:-: |\n| Chrome \t| 3 500\t| 1 500 \t| 350 | 3 500 \t| 1 400 |\n| Firefox \t| 2 700 | 500 \t|300| 3 600\t| 1 600 |\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2282,"value":"md `Il démontre qu'avec un peu de soin l'on peut spectaculairement améliorer la vitesse d'affichage.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"md `### Affichage de la carte des communes selon la procédure standard\nJe charge un fond TopoJSON des communes françaises 2021, il est comme c'est la règle courante non projeté, en coordonnées long/lat (EPSG:4326).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"com2021_topo = d3.json(\"https://static.data.gouv.fr/resources/contours-des-communes-de-france-simplifie-avec-regions-et-departement-doutre-mer-rapproches/20210602-180918/a-com2021-topo.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"md `Je le \"décompresse\" pour arriver à une structure GeoJSON classique, avec une géométrie disponible pour chaque commune.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"com2021_4326 = topojson.feature(com2021_topo, com2021_topo.objects.a_com2021)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2217,"value":"md `Je mesure sa richesse en calculant le nombre total de sommets, c'est-à-dire des points de tracé, plus d'un million !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1585,"value":"nb_sommets = d3.sum(com2021_4326.features.map(d=> d.geometry.coordinates.flat(3).length/2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"md `\nPour dessiner la carte, j'ai besoin d'une fonction de conversion entre coordonnées en longitude/latitude et pixels à l'écran. Cette conversion opère en deux temps : passage de long/lat au système métrique Lambert-93 (soit la projection au sens géographique du terme), puis conversion vers des pixels par une simple homothétie (transformation linéaire)\n~~~js\nproj_epsg2154 = proj4d3(2154) // fonction de projection 4326 => 2154\n\nproj_geojson_to_map_2154 = proj_epsg2154.fitExtent(map_extent, com2021_4326) // fonction de conversion complète\n~~~\n\n\n`\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"md `Mais cette fonction ne se crée pas en un claquement de doigts. Elle doit lire tout le contenu de la couche com2021_4326, la projeter en EPSG:2154, en dériver l'emprise globale (en mètres) pour ajuster la fonction de conversion long/lat => pixels à partir du rectangle cible à l'écran. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2185,"value":"md `## 2 - Le Canvas s'optimise bien`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2188,"value":"md `Commençons par dessiner la carte dans un *canvas*. Voyons le temps que prennent chacune de ces opérations, en cliquant le bouton suivant :`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"viewof map1_btn = Inputs.button(\"Carte canvas avec reprojection\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"proj_geojson_to_map_2154 = {\n if (map1_btn == 0) return 'en attente...'\n \n let t0 = performance.now()\n \n let f = proj_epsg2154.fitExtent(map_extent, com2021_4326)\n \n mutable time_proj1 = ~~(performance.now() - t0) + ' ms'\n \n return f \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"mutable time_proj1 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"mutable time_map1 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"mutable time_gpu1 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"{\n if (time_proj1 == 0 ) return md`---`\n return md `total : **${(parseFloat(time_proj1) + parseFloat(time_map1) + parseFloat(time_gpu1)).toLocaleString() }** ms`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"{ \n if (map1_btn == 0) return md`---`\n await Promises.delay(20)\n let t0 = performance.now()\n \n const context = DOM.context2d(size.width, size.height)\n const path2154 = d3.geoPath(proj_geojson_to_map_2154, context)\n \n context.beginPath()\n context.lineWidth = 1\n context.strokeStyle = '#ccc'\n context.fillStyle = '#FEEDAB'\n \n com2021_4326.features.forEach( d => {\n context.beginPath()\n context.fillStyle = reg_color_map.get(d.properties.reg)\n context.strokeStyle = context.fillStyle\n path2154(d) \n context.fill()\n if (stroke) context.stroke()\n }\n )\n \n let tm1 = performance.now() \n mutable time_map1 = ~~(tm1 - t0) + ' ms'\n setTimeout(() => mutable time_gpu1 = ~~(performance.now() - tm1) + ' ms', 20)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1763,"value":"viewof stroke = {\n let s = Inputs.toggle({value: false, label: \"Tracer le contour des communes\"})\n s.style.setProperty('--label-width', \"auto\")\n s.style.setProperty('visibility', map1_btn !== 0 ? \"visible\" : \"hidden\")\n return s\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2225,"value":"md `Vous avez du constater un temps total de plusieurs secondes (4 sur mon PC avec Chrome). C'est bien trop ! D'autant que pendant ce temps, aucune interaction n'est possible. \n\nL'autre constat intéressant est que ce temps se décompose en 3 étapes également consommatrices : calcul de la fonction de projection, construction du canvas en JS, et enfin rendu par le moteur graphique. Le dessin des contours pèse encore un peu plus sur le système.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"com2021_topo_optimisee = d3.json(\"https://static.data.gouv.fr/resources/contours-des-communes-de-france-simplifie-avec-regions-et-departement-doutre-mer-rapproches/20210523-101900/a-com2021-2154-topo.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"com2021_2154 = topojson.feature(com2021_topo_optimisee, com2021_topo_optimisee.objects.a_com2021_2154)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"viewof map2_btn = Inputs.button(\"Carte canvas sans reprojection\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1398,"value":"proj_geojson2154_to_map2154 = {\n if (map2_btn == 0) return //'En attente'\n\n let t0 = performance.now()\n \n let f = this || d3.geoIdentity().reflectY(true)\n .fitExtent([[margin, margin], [size.width-margin, size.height-margin]], com2021_2154)\n \n mutable time_proj2 = ~~(performance.now() - t0) + ' ms'\n \n return f \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"mutable time_proj2 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"mutable time_map2 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1641,"value":"mutable time_gpu2 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"{\n if (time_proj2 == 0 ) return md`---`\n return md `**${(parseFloat(time_proj2) + parseFloat(time_map2) + parseFloat(time_gpu2)).toLocaleString() }** ms contre **${(parseFloat(time_proj1) + parseFloat(time_map1) + parseFloat(time_gpu1)).toLocaleString() }** ms`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"map2 = { \n if (map2_btn == 0) return md`---`\n await Promises.delay(20)\n\n let t0 = performance.now()\n const context = DOM.context2d(size.width, size.height)\n const path2154 = d3.geoPath(proj_geojson2154_to_map2154, context)\n \n context.beginPath()\n context.lineWidth = 1\n context.strokeStyle = '#ccc'\n context.fillStyle = '#FEEDAB'\n \n com2021_2154.features.forEach( d => {\n context.beginPath()\n context.fillStyle = reg_color_map.get(d.properties.reg)\n context.strokeStyle = context.fillStyle\n path2154(d) \n context.fill()\n if (stroke) context.stroke()\n }\n )\n \n let tm2 = performance.now() \n mutable time_map2 = ~~(tm2 - t0) + ' ms'\n setTimeout(() => mutable time_gpu2 = ~~(performance.now() - tm2) + ' ms', 20)\n \n //context.canvas.last_toggle_display_map2 = toggle_display_map2 \n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2250,"value":"md `Vous avez dû le constater, ça va au moins deux fois plus vite, le gain avec Firefox est même plus éclatant encore !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2302,"value":"md `### Optimiser le coloriage\n\nIl est possible de mieux faire encore. Le coloriage des communes, ici mettant en évidence une appartenance régionale, oblige à conduire l'opération pour chaque polygone communal, avec une couleur qui peut changer d'une commune à l'autre, et donc des ordres \\`fillStyle()\\` et \\`fill()\\` répétés 35 000 fois. C'est très inefficace.\n\nEn triant le fond de carte par couleur, on peut considérablement réduire ces sauts. Trier est extrêmement rapide en JavaScript, cela prend quelques ms à peine. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"viewof map3_btn = Inputs.button(\"Carte canvas optimisé\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1758,"value":"proj_geojson2154_to_map2154_v2 = {\n if (map3_btn == 0) return \n if (this) return this\n let t0 = performance.now()\n \n let f = this || d3.geoIdentity().reflectY(true)\n .fitExtent([[margin, margin], [size.width-margin, size.height-margin]], com2021_2154)\n \n mutable time_proj2 = ~~(performance.now() - t0) + ' ms'\n \n return f \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"mutable time_map3 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1645,"value":"mutable time_gpu3 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1649,"value":"{\n if (time_map3 == 0 ) return md`---`\n \n return md `**${(parseFloat(time_proj2) + parseFloat(time_map3) + parseFloat(time_gpu3)).toLocaleString() }** ms contre **${(parseFloat(time_proj1) + parseFloat(time_map1) + parseFloat(time_gpu1)).toLocaleString() }** ms`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2363,"value":"md `Voilà qui commence à devenir acceptable !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1328,"value":"reg_color_map = new Map( regions.map( (d,i) => [d.codgeo, d3.schemeCategory10[i%10]]) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"regions = d3.dsv(';','https://static.data.gouv.fr/resources/contours-des-communes-de-france-simplifie-avec-regions-et-departement-doutre-mer-rapproches/20210108-093655/reg2020.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"proj_epsg2154 = proj4d3(2154)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"md `## 2 - Et en SVG ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2311,"value":"md `Par acquit de conscience, examinons l'alternative SVG. Elle conduit à des temps d'affichage équivalent au Canvas pour les deux premiers contextes de test. Mais SVG est moins flexible que le Canvas, chaque commune a sa propre couleur et est dessinée (automatiquement) séparément. La dernière et spectaculaire optimisation que le Canvas nous permet n'est pas utilisable avec SVG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"mutable time_map4 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"mutable time_gpu4 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"md `**${(parseFloat(time_map4) + parseFloat(time_gpu4)).toLocaleString() }** ms contre **${( parseFloat(time_map1) + parseFloat(time_gpu1)).toLocaleString() }** ms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1681,"value":"viewof map4_btn = Inputs.button(\"Carte SVG avec reprojection\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"{ \n if (map4_btn == 0) return md`---`\n await Promises.delay(20)\n \n let t0 = performance.now()\n \n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, size.width, size.height])\n .attr(\"width\", size.width)\n .attr(\"height\", size.height)\n \n const path2154 = d3.geoPath(proj_geojson_to_map_2154)\n\n let paths = svg.selectAll('path')\n .data(com2021_4326.features)\n .join('path')\n .attr('d', path2154)\n .attr(\"fill\", d => reg_color_map.get(d.properties.reg))\n \n if (stroke_svg) paths.attr(\"stroke\", d => reg_color_map.get(d.properties.reg))\n\n let tm4 = performance.now() \n mutable time_map4 = ~~(tm4 - t0) + ' ms'\n setTimeout(() => mutable time_gpu4 = ~~(performance.now() - tm4) + ' ms', 20)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2345,"value":"viewof stroke_svg = {\n let s = Inputs.toggle({value: false, label: \"Tracer le contour des communes\"})\n s.style.setProperty('--label-width', \"auto\")\n s.style.setProperty('visibility', map4_btn !== 0 ? \"visible\" : \"hidden\")\n return s\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"viewof map5_btn = Inputs.button(\"Carte SVG sans reprojection\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1703,"value":"md `**${(parseFloat(time_map5) + parseFloat(time_gpu5)).toLocaleString() }** ms contre **${( parseFloat(time_map2) + parseFloat(time_gpu2)).toLocaleString() }** ms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1711,"value":"mutable time_map5 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1712,"value":"mutable time_gpu5 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2174,"value":"{ \n if (map5_btn == 0) return md`---`\n await Promises.delay(20)\n \n let t0 = performance.now()\n \n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, size.width, size.height])\n .attr(\"width\", size.width)\n .attr(\"height\", size.height)\n \n const path2154 = d3.geoPath(proj_geojson2154_to_map2154)\n\n let paths = svg.selectAll('path')\n .data(com2021_2154.features)\n .join('path')\n .attr('d', path2154)\n .attr(\"fill\", d => reg_color_map.get(d.properties.reg))\n \n if (stroke_svg) paths.attr(\"stroke\", d => reg_color_map.get(d.properties.reg))\n \n paths.on(\"mouseover\", mouseover) \n paths.on(\"mouseout\", mouseout) \n\n function mouseover(e) {\n d3.select(e.target).attr('stroke', 'black')\n }\n\n function mouseout(e) {\n d3.select(e.target).attr('stroke', 'none')\n }\n\n let tm5 = performance.now() \n mutable time_map5 = ~~(tm5 - t0) + ' ms'\n setTimeout(() => mutable time_gpu5 = ~~(performance.now() - tm5) + ' ms', 20)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2329,"value":"md `Enfin, un avantage potentiel de SVG est sa faculté naturelle à rendre chaque élément de dessin réactif aux mouvements de souris, par exemple au survol. Mais comme vous pouvez le constater en promenant votre souris sur la carte ci-dessus, le rendu n'est pas forcément fluide, et votre ventilateur va se mettre en route, tant le processeur est sollicité (variable d'un navigateur à l'autre, Firefox saccade plus volontiers). \n\nNous verrons dans le document suivant comment faire bien mieux, et avec le Canvas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2178,"value":"md `---` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2315,"value":"md `### Métriques`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"map_extent = [\n [margin, margin],\n [size.width - margin, size.height - margin]\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"size = {\n let ratio = window.screen.width/window.screen.height,\n w = width, h = width\n if (width == window.screen.width) {\n w = h = window.screen.height \n } else {\n w = Math.min(width, 500) \n h = Math.min(width, 500) \n }\n \n return {width:w, height:h}\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"margin = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"md `---\n### Librairies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2058,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"proj4 = {\n let proj4 = await require(\"proj4\")\n let epsg2154 = \"+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs\"\n \n proj4.defs([ ['EPSG:2154', `+title=France Lambert93 ${epsg2154}`] ])\n \n return proj4\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"function proj4d3(proj4string) {\n let raw\n \n if (+proj4string == proj4string) \n raw = proj4('EPSG:' + proj4string)\n \n if (!raw)\n raw = proj4(proj4string)\n \n const degrees = 180 / Math.PI,\n radians = 1 / degrees,\n p = function(lambda, phi) {\n return raw.forward([lambda * degrees, phi * degrees])\n }\n p.invert = function(x, y) {\n return raw.inverse([x, y]).map(function(d) {\n return d * radians\n })\n }\n const projection = d3.geoProjection(p).scale(1)\n projection.raw = raw\n return projection\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"import {tuto_styles, toc} from '@ericmauviere/techniques-pour-tutoriels'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2254,"value":"tuto_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null