2b:null 2c:["$","title",null,{"children":"Exercice de mise en pratique - Deck.gl | Geovis-M2-GEOMAS | Observable"}] 31:T12ec,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Legend( color, { title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = 1, tickFormat, tickValues } = {} ) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = (g) => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color .copy() .rangeRound( d3.quantize(d3.interpolate(marginLeft, width - marginRight), n) ); svg .append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr( "xlink:href", ramp( color.copy().domain(d3.quantize(d3.interpolate(0, 1), n)) ).toDataURL() ); } // Sequential else if (color.interpolator) { x = Object.assign( color .copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), { range() { return [marginLeft, width - marginRight]; } } ); svg .append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3 .range(n) .map((i) => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? (d) => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3 .scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", (d) => d); tickValues = d3.range(thresholds.length); tickFormat = (i) => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3 .scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call( d3 .axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues) ) .call(tickAdjust) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title) ); return svg.node(); }32:[{"id":"6b9e36d94d9769ead59c5a2d4d395f20f5b53648d76105c7a6251e7a8b693ceaa7ce4b143c748f6655e095e06df72739d65cc19f7bc69002301f7b215092ae51","href":"https://static.observableusercontent.com/files/6b9e36d94d9769ead59c5a2d4d395f20f5b53648d76105c7a6251e7a8b693ceaa7ce4b143c748f6655e095e06df72739d65cc19f7bc69002301f7b215092ae51","name":"accidents-1.csv","type":"text/csv","lastModified":1738598916121.821,"size":14719474}] 2f:{"id":"423c9ac4a59b4286","slug":"exercice-deck-gl","title":"Exercice de mise en pratique - Deck.gl","thumbnail":"158fce9d75ed789f23fd943b8d66383e36d33562d3b31a3b2091e3c3b6c8d18a","access_level":"public","create_time":"$D2025-02-03T16:07:35.882Z","update_time":"$D2026-01-08T13:05:05.582Z","view_time":null,"first_public_time":"$D2025-02-03T16:07:35.882Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS","avatar_url":"https://avatars-next.observableusercontent.com/8480906916f9dcdd46d764fb7c433c135aeb94fe0a4cf7ba198784851c520c5b","tier":"starter_2024"},"version":177,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"},{"type":"team","id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS","avatar_url":"https://avatars-next.observableusercontent.com/8480906916f9dcdd46d764fb7c433c135aeb94fe0a4cf7ba198784851c520c5b","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":32,"collection":{"id":"0d62c54373f4d746","slug":"exercices","title":"Exercices","owner":{"id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS"}},"type":"notebook","body":{"title":"Exercice de mise en pratique - Deck.gl","cells":[{"id":0,"value":"# Exercice de mise en pratique - `Deck.gl`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3,"value":"

Support de cours pour les étudiants 2025-2026 de 2ème année du Master GAED - parcours GEOMAS de l'IUGA - Université Grenoble Alpes.

\n\nIntervenant : Matthieu Viry

\nVoir l'ensemble des notebooks ici.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":6,"value":"Ce court TP a pour but de vous faire découvrir la bibliothèque [Deck.gl](https://deck.gl/): il s'agit d'une solution de visualisation de données géospatiales basée sur WebGL qui propose différentes visualisations 2D et 3D et mettant notamment l'accent sur la performance.\n\nVous pouvez trouver des exemples sur la page dédiée dans la documentation : https://deck.gl/examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"Vous trouverez ci-dessous une carte qui agrège des données ponctuelles sous forme d'hexagones pour une meilleure visualisation. Il s'agit des accidents de la route au Japon, pour l'année 2022 (source : [Tokyo Metropolitan Police Department](https://www.npa.go.jp/publications/statistics/koutsuu/opendata/2022/opendata_2022.html)).\nDans ce jeu de données importé ci-dessous, un point représente un accident.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"data = {\n let data = d3.csvParse(await FileAttachment(\"accidents-1.csv\").text());\n data = data.map((row) => ({\n lng: +row.lng_decimal,\n lat: +row.lat_decimal\n }));\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"Prenez connaissance du comportement actuel de la carte et du code permettant de la créer et effectuez les différents actions demandées au fil du notebook (repérables par l'emoji 🔨)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"container = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"On importe le style de la carte de base, ici gérée par [MapLibre GL JS](https://maplibre.org/) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":32,"value":"### Conteneur de la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"deckglmap = {\n const props = {\n // Le conteneur : l'élément HTML qui va contenir la visualisation\n container: container,\n // Une référence à la bibliothèque qui va gérer le fond de carte\n // (ou un objet carte instancié, cf. https://deck.gl/docs/developer-guide/base-maps/using-with-maplibre)\n map: maplibregl,\n // Le style du fond de carte, ceux supportés sont listés\n // ici : https://deck.gl/docs/api-reference/carto/basemap#supported-basemaps\n mapStyle:\n \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\",\n // Les paramètres initiaux de la vue à créer\n initialViewState: {\n longitude: 137.964951,\n latitude: 36.237148,\n zoom: 5,\n minZoom: 1,\n maxZoom: 15,\n pitch: 40.5,\n bearing: -5\n },\n // Une fonction qui permet de dire quoi afficher dans le tooltip\n // (cf. exercice plus bas)\n getTooltip: getTooltip,\n // Est-ce que la carte permet le zoom / pan ?\n controller: true,\n };\n\n return new deck.DeckGL(props)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"### Propriété de la couche d’agrégation des points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"{\n let hexagonLayer = new deck.HexagonLayer({\n id: \"heatmap\",\n colorRange,\n data,\n elevationScale: 50,\n elevationRange: [0, 5000],\n extruded: true,\n getPosition: (d) => [d.lng, d.lat],\n pickable: true,\n opacity: 1,\n radius: 10000\n });\n\n deckglmap.setProps({layers: [hexagonLayer]})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"🔨 *Créez un élément `Inputs.range` pour permettre de sélectionner des valeurs entre 1000 et 20000 pour la propriété `radius` du bloc de code suivant. Placez cet élément `Inputs.range` directement sous la carte.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"🔨 *Regardez le contenu de l'objet `object` dans la console et essayez de retournez une chaîne de caractères contenant le texte :* \n\nlatitude: valeur \nlongitude: valeur \nnombre d'accidents: valeur ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":51,"value":"function getTooltip({ object }) {\n if (!object) return null;\n console.log(object);\n // return `\n // latitude: xxx\n // longitude: xxx\n // nombre d'accidents: xx\n // `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"### Propriété de couleurs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":55,"value":"🔨 *Sélectionnez 6 nouvelles couleurs (une progression séquentielle).*\n*Utilisez le site https://colorbrewer2.org/ pour cela (il est possible d'y afficher les couleurs choisies dans le format attendu ici).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":46,"value":"colorRange = [\n [1, 152, 189],\n [73, 227, 206],\n [216, 254, 181],\n [254, 237, 177],\n [254, 173, 84],\n [209, 55, 78]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"### Pour aller plus loin...\n\n
\n\n🔨 *D'après la documentation, `deck.HexagonLayer` peut également prendre un argument nommé `upperpercentile` et un argument nommé `lowerPercentile`: https://deck.gl/docs/api-reference/aggregation-layers/hexagon-layer#upperpercentile. \nAjoutez ces propriétés dans la cellule appropriée et, comme pour la propriété `radius` précédemment, créez désormais 2 éléments `Inputs.range` permettant de sélectionner la valeur de `lowerPercentile` et la valeur`upperpercentile` - vous mettez ces éléments `Inputs.range` juste en dessous de celui créé pour `radius`.*\n\n
\n\n🔨 *En modifiant la cellule qui contient le code pour la couche `hexagonLayer`, essayez de créer une nouvelle couche mettant en oeuvre un autre type de représentation. Aidez-vous des [exemples de Deck.gl](https://deck.gl/examples) pour choisir la représentation à créer et de la [documentation des types de couches proposés](https://deck.gl/docs/api-reference/layers) pour écrire le code nécessaire.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":68,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":71,"value":"maplibregl = require(\"maplibre-gl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"deck = require(\"deck.gl@9.1.0/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":77,"value":"### Crédits\n\nBasé sur un notebook de [Shinichiro Kuwahara](https://observablehq.com/@kenbunroku).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"