2c:null 2d:["$","title",null,{"children":"Exercice Deck.gl: Accidents de la route au Japon | BUT SD - Cours Programmation Web Dataviz | Observable"}] 32:[{"id":"6b9e36d94d9769ead59c5a2d4d395f20f5b53648d76105c7a6251e7a8b693ceaa7ce4b143c748f6655e095e06df72739d65cc19f7bc69002301f7b215092ae51","href":"https://static.observableusercontent.com/files/6b9e36d94d9769ead59c5a2d4d395f20f5b53648d76105c7a6251e7a8b693ceaa7ce4b143c748f6655e095e06df72739d65cc19f7bc69002301f7b215092ae51","name":"accidents@1.csv","type":"text/csv","lastModified":1730757996722.557,"size":14719474}] 30:{"id":"9db17bbcef1accc5","slug":"exercice-deck-gl-road-accidents-in-japan","title":"Exercice Deck.gl: Accidents de la route au Japon","thumbnail":"85c229e933039cfbc8ff123378df60b9e04a864bf8dfbf33a4fb4c6a5c4786d1","access_level":"public","create_time":"$D2024-11-04T22:06:36.722Z","update_time":"$D2026-09-09T08:47:43.518Z","view_time":null,"first_public_time":"$D2024-11-04T22:06:36.722Z","fork":{"id":"e0597236a0d1af23","slug":null,"title":"deck.gl Practice: Road Accidents in Japan","owner":{"id":"6bd07d5d45d1a90f","login":"kenbunroku","name":"kenbunroku"}},"stars":0,"starred":false,"owner":{"type":"team","id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024"},"version":507,"publish_version":507,"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":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":18,"collection":{"id":"c3e3e267a1ef9194","slug":"exercices","title":"TP / Exercices","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":424,"value":"

Support de cours pour les étudiants 2026-2027 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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":78,"value":"const data = d3.csvParse(await FileAttachment(\"accidents@1.csv\").text()).map((row) => ({\n lng: +row.lng_decimal,\n lat: +row.lat_decimal\n}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":40,"value":"container = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"html`\n(Mapbox Stylesheet)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"### Conteneur de la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":56,"value":"const 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\nconst 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\nlet deckgl = await new deck.DeckGL(props);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":269,"value":"### Propriété de la couche d’agrégation des points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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` de la variable `hexagonLayer`. Placez cet élément `Inputs.range` directement sous la carte.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":369,"value":"🔨 *Regardez le contenu de l'objet `object` dans le bloc de code suivant 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","author":"$undefined","summary":"$undefined"},{"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":"js","author":"$undefined","summary":"$undefined"},{"id":271,"value":"### Propriété de couleurs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":46,"value":"const 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":"js","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":276,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":426,"value":"mapboxgl","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":427,"value":"deck","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":96,"value":"import mapboxgl from \"npm:mapbox-gl\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":4,"value":"import deck from \"npm:deck.gl@8.9.35/dist.min.js/+esm\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":419,"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":"2","titling":"auto"}} 31:"$30:body"