2c:null 2d:["$","title",null,{"children":"Hello, deck.gl | Observable | Observable"}] 32:T59e,const radiusCtl = Inputs.range([500, 20000], {value: 1000, label: "radius", step: 100}); const coverageCtl = Inputs.range([0, 1], {value: 1, label: "coverage", step: 0.01}); const upperPercentileCtl = Inputs.range([0, 100], {value: 100, label: "upper percentile", step: 1}); const replayCtl = Inputs.button("↻ replay"); for (const i of [radiusCtl, coverageCtl, upperPercentileCtl]) i.style.setProperty("--label-width", "90px"), i.style.width = "100%"; const container = html`

`; const deckLayout = display(html`

UK Road Safety

Personal injury road accidents from 1979

${d3.format(".4s")(accidents.length)} ACCIDENTS

${colorLegend}

data.gov.uk

${radiusCtl}${coverageCtl}${upperPercentileCtl}

${replayCtl}

${container}

`);33:[{"id":"f91b4e43fad464872f7fd3889ff6772227f66fda75a819e0ef37185558f29c08aaa8a760230e352cfdd50de38b494e6e2ed35c3ed51725fd1854a28335a0db8f","href":"https://static.observableusercontent.com/files/f91b4e43fad464872f7fd3889ff6772227f66fda75a819e0ef37185558f29c08aaa8a760230e352cfdd50de38b494e6e2ed35c3ed51725fd1854a28335a0db8f","name":"uk-accidents.csv","type":"text/csv","lastModified":1791360546653,"size":2921538},{"id":"6955b046c9cd76a83724e6bac7d35bcd275b9cf38ef56409ce05d94c7f3a6eb407762d939162b7212b44839a5e35a41d35874f38d7255cf66c5c0f2c7720efac","href":"https://static.observableusercontent.com/files/6955b046c9cd76a83724e6bac7d35bcd275b9cf38ef56409ce05d94c7f3a6eb407762d939162b7212b44839a5e35a41d35874f38d7255cf66c5c0f2c7720efac","name":".observable/cache/fetch-5rzwrfro9fm58f716o19l1ms13eycx22.blob","type":"application/javascript; charset=utf-8","lastModified":1791360632000,"size":1646765}] 30:{"id":"a67fb2bbc7c11348","slug":"deck-gl","title":"Hello, deck.gl","thumbnail":"2946ed55b136040c9c99024f1b53604d934f1edf4b8a4e1d895a3c749eb4355f","access_level":"public","create_time":"$D2026-10-07T08:04:07.353Z","update_time":"$D2026-10-07T08:10:59.498Z","view_time":null,"first_public_time":"$D2026-10-07T08:05:31.867Z","has_unpublished_edits":null,"fork":{"id":"56635bc24795833f","slug":"deck-gl-map","title":"deck.gl map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":3,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports."},"version":242,"publish_version":242,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"bio":"Vocateur."}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello, deck.gl","cells":[{"id":1,"value":"# Hello, deck\\.gl\n\n[deck.gl](https://deck.gl/) is a GPU-powered framework for visual exploratory data analysis of large datasets.","pinned":false,"hidden":false,"mode":"md","author":"user","summary":"$undefined","providerMetadata":"$undefined","attachments":[],"output":"$undefined","database":"$undefined"},{"id":59,"value":"The example below is adapted from the [documentation](https://deck.gl/examples/hexagon-layer). It combines a [HexagonLayer](https://deck.gl/docs/api-reference/aggregation-layers/hexagon-layer) and a [GeoJsonLayer](https://deck.gl/docs/api-reference/layers/geojson-layer).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Build layout and Deck instance","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"Importing Deck.gl is a bit tricky, but Observable's AI figured it out for me:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"const deckLib = await (async () => {\n const src = await fetch(\"https://cdn.jsdelivr.net/npm/deck.gl@9.3.7/dist.min.js\", {cache: true}).then((r) => r.text());\n const module = {exports: {}};\n delete globalThis.deck; delete globalThis.luma;\n new Function(\"module\", \"exports\", \"define\", src)(module, module.exports, undefined);\n return module.exports.DeckGL ? module.exports : globalThis.deck;\n})();","pinned":true,"hidden":false,"mode":"js","author":"agent","summary":"Evaluate UMD in isolation","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"The code powering this example is quite elaborate. Let's split it into its main components:\n\n### 1. The data\n\nThe accident data is loaded as a CSV file. The country shapes come from a TopoJSON file, which we convert to GeoJSON.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"const accidents = (await FileAttachment(\"uk-accidents.csv\").csv({typed: \"auto\"})).map(({lng, lat}) => [+lng, +lat]);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import world50m from \"npm:visionscarto-world-atlas/world/50m.json\" with {type: \"json\"};\nconst countries = topojson.feature(world50m, world50m.objects.countries);","pinned":true,"hidden":false,"mode":"js","author":"agent","summary":"Parse data and build legend","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"### 2. The layout\n\nUsing nested divs, the layout cell above positions a large area for the chart, with a card floating on top that holds the title, the color legend, and the interactive controls. The map's element is created in code as `container` and passed to deck\\.gl explicitly.\n\nThe colors are represented as (red, green, blue) triplets, as expected by deck\\.gl. The legend is made using Observable Plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"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];\n\nconst colorLegend = Plot.plot({\n margin: 0,\n marginTop: 20,\n width: 240,\n height: 35,\n x: {padding: 0, round: false, axis: null},\n marks: [\n Plot.cellX(colorRange, {fill: ([r, g, b]) => `rgb(${r},${g},${b})`}),\n Plot.text([\"Fewer\"], {frameAnchor: \"top-left\", dy: -12, fill: \"currentColor\"}),\n Plot.text([\"More\"], {frameAnchor: \"top-right\", dy: -12, fill: \"currentColor\"})\n ]\n});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"### 3. The DeckGL instance\n\nWe create a DeckGL instance targeting the container defined in the layout. This code can run several times, so we clean up each time the cell runs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"container.innerHTML = \"\";\n\nconst deckInstance = new deckLib.DeckGL({\n container, // the standalone DeckGL class takes `container`, not `parent`\n initialViewState,\n getTooltip,\n effects,\n controller: true\n});\n\n// clean up if this code reruns\ninvalidation.then(() => deckInstance.finalize());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"`initialViewState` describes the initial position of the camera:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"const initialViewState = {\n longitude: -2,\n latitude: 53.5,\n zoom: 5.7,\n minZoom: 5,\n maxZoom: 15,\n pitch: 40.5,\n bearing: -5\n};","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"`getTooltip` generates the contents displayed when you mouse over a hexagon:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function getTooltip({object, coordinate}) {\n if (!object || !coordinate) return null;\n const [lng, lat] = coordinate;\n return `latitude: ${lat.toFixed(2)}\\nlongitude: ${lng.toFixed(2)}\\n${object.count} accidents`;\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"`effects` defines the lighting:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"const effects = [\n new deckLib.LightingEffect({\n ambientLight: new deckLib.AmbientLight({color: [255, 255, 255], intensity: 1.0}),\n pointLight: new deckLib.PointLight({color: [255, 255, 255], intensity: 0.8, position: [-0.144528, 49.739968, 80000]}),\n pointLight2: new deckLib.PointLight({color: [255, 255, 255], intensity: 0.8, position: [-3.807751, 54.104682, 8000]})\n })\n];","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"### 4. The props\n\nSince some parameters are interactive, we use the `setProps` method to update the layers when their value changes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"deckInstance.setProps({\n layers: [\n new deckLib.GeoJsonLayer({\n id: \"base-map\",\n data: countries,\n lineWidthMinPixels: 1,\n getLineColor: [60, 60, 60],\n getFillColor: [9, 16, 29]\n }),\n new deckLib.HexagonLayer({\n id: \"heatmap\",\n data: accidents,\n coverage,\n radius,\n upperPercentile,\n colorRange,\n elevationScale: 50,\n elevationRange: [0, 3000 * t],\n extruded: true,\n getPosition: (d) => d,\n pickable: true,\n material: {ambient: 0.64, diffuse: 0.6, shininess: 32, specularColor: [51, 51, 51]}\n })\n ]\n});","pinned":true,"hidden":false,"mode":"js","author":"agent","summary":"Set deck layers","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"The `t` variable controls the height of the extruded hexagons with a generator, which you can reset with the replay button:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"const t = (replay, Generators.observe((notify) => {\n const duration = 900;\n const delay = 500;\n notify(0);\n const timer = d3.timer((elapsed) => {\n const k = Math.min(1, elapsed / duration); // clamp so the height never overshoots\n notify(d3.easeCubicInOut(k));\n if (k === 1) timer.stop();\n }, delay);\n return () => timer.stop(); // stop the timer if the cell reruns\n}));","pinned":true,"hidden":false,"mode":"js","author":"agent","summary":"Animated extrusion factor","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"Lastly, the controls in the card are turned into reactive values, so changing one updates the layers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"const radius = Generators.input(radiusCtl);\nconst coverage = Generators.input(coverageCtl);\nconst upperPercentile = Generators.input(upperPercentileCtl);\nconst replay = Generators.input(replayCtl);","pinned":true,"hidden":false,"mode":"js","author":"agent","summary":"Reactive input values","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 31:"$30:body"