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":1730757996722.557,"size":14719474}] 2f:{"title":"Exercice Deck.gl: Accidents de la route au Japon","cells":[{"id":0,"value":"# Exercice Deck.gl: Accidents de la route au Japon","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"

Support de cours pour les étudiants 2025-2026 de 3ème année du BUT Science des données de l'IUT2 (Université Grenoble Alpes).

\n\nIntervenant : Matthieu Viry

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

","pinned":false,"hidden":false,"mode":"html"},{"id":383,"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 diverses 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"},{"id":387,"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"},{"id":78,"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":false,"hidden":false,"mode":"ojs"},{"id":394,"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"},{"id":49,"value":"colorLegend = Plot.plot({\n margin: 0,\n marginTop: 20,\n width: 180,\n height: 35,\n style: \"color: black;\",\n x: { padding: 0, axis: null },\n marks: [\n Plot.cellX(colorRange, {\n fill: ([r, g, b]) => `rgb(${r},${g},${b})`,\n inset: 0.5\n }),\n Plot.text([\"Fewer\"], { frameAnchor: \"top-left\", dy: -12 }),\n Plot.text([\"More\"], { frameAnchor: \"top-right\", dy: -12 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"container = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"html`\n(Mapbox Stylesheet)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"### Conteneur de la carte","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"deckgl = {\n const props = {\n container,\n map: mapboxgl,\n mapStyle:\n \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\",\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 getTooltip,\n controller: true,\n layers: [hexagonLayer]\n };\n\n // Avoid creating multiple instances\n const prevDeckInstance = this;\n if (prevDeckInstance) {\n prevDeckInstance.setProps(props);\n return prevDeckInstance;\n }\n\n return await new deck.DeckGL(props);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"### Propriété de la couche d’agrégation des points","pinned":false,"hidden":false,"mode":"md"},{"id":365,"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"},{"id":60,"value":"hexagonLayer = {\n return 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}","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"🔨 *Regardez le contenu de l'objet `object` et essayez de retournez une chaine de caractères contenant le texte :* \nlatitude: valeur \nlongitude: valeur \nnombre d'accidents: valeur ","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"function getTooltip({ object }) {\n if (!object) return null;\n console.log(object);\n // return `\n // latitude: \n // longitude: \n // nombre d'accidents:\n // `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"### Propriété de couleurs","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"🔨 *Sélectionnez 6 nouvelles couleurs (soit une progression séquentielle, soit une progression divergente).*\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"},{"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"},{"id":402,"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. Ajoutez 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🔨 *Sur la base de la cellule `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 aidez-vous de la documentation pour écrire le code nécessaire.*","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"mapboxgl = require(\"mapbox-gl@^0.53.1/dist/mapbox-gl.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"deck = require(\"deck.gl@8.9.35/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"### Crédits\n\nBasé sur un notebook de [Shinichiro Kuwahara](https://observablehq.com/@kenbunroku).","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}