3e:null 3f:["$","title",null,{"children":"deck.gl GeoJsonLayer Example | @thinkinggis | Observable"}] 45:[] 43:{"id":"9329a2fc8f8b3485","slug":null,"title":"deck.gl GeoJsonLayer Example","thumbnail":"dc0bff354e39e4746c057d4695da5b02a1612f565990558da116c29dd925c472","access_level":"public","create_time":"$D2023-09-12T02:50:01.414Z","update_time":"$D2023-09-12T02:51:21.283Z","view_time":null,"first_public_time":"$D2023-09-12T02:50:01.414Z","has_unpublished_edits":null,"fork":{"id":"fb0e1293e94029be","slug":"deck-gl-geojsonlayer-example","title":"deck.gl GeoJsonLayer Example","owner":{"id":"2bdf2e6ab78b8e96","login":"mkandalf","name":"Nick Meyer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cc43abf8ab0ec3e4","login":"lzxue","name":"@thinkinggis","avatar_url":"https://avatars-next.observableusercontent.com/17b39ae83e04edf17a4e5d96dd9bd0ae6cb1a0b324776f39792078d08b2ca5a3","tier":"starter_2024","bio":"","following":false},"version":227,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e3425f425f067ce","login":"lzxue","name":"@thinkinggis","avatar_url":"https://avatars-next.observableusercontent.com/17b39ae83e04edf17a4e5d96dd9bd0ae6cb1a0b324776f39792078d08b2ca5a3","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"4e3425f425f067ce","login":"lzxue","name":"@thinkinggis","avatar_url":"https://avatars-next.observableusercontent.com/17b39ae83e04edf17a4e5d96dd9bd0ae6cb1a0b324776f39792078d08b2ca5a3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"deck.gl GeoJsonLayer Example","cells":[{"id":0,"value":"md`# deck.gl GeoJsonLayer Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"tooltip = container.querySelector('#tooltip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"colorScale = {\n const COLOR_SCALE = [\n // negative\n [65, 182, 196],\n [127, 205, 187],\n [199, 233, 180],\n [237, 248, 177],\n // positive\n [255, 255, 204],\n [255, 237, 160],\n [254, 217, 118],\n [254, 178, 76],\n [253, 141, 60],\n [252, 78, 42],\n [227, 26, 28],\n [189, 0, 38],\n [128, 0, 38]\n ];\n\n return x => {\n const i = Math.round(x * 7) + 4;\n if (x < 0) {\n return COLOR_SCALE[i] || COLOR_SCALE[0];\n }\n return COLOR_SCALE[i] || COLOR_SCALE[COLOR_SCALE.length - 1];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"lightSettings = {\n return {\n lightsPosition: [-125, 50.5, 5000, -122.8, 48.5, 8000],\n ambientRatio: 0.2,\n diffuseRatio: 0.5,\n specularRatio: 0.3,\n lightsStrength: [1.0, 0.0, 2.0, 0.0],\n numberOfLights: 2\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"Plot.plot({\n marks: [\n Plot.auto(null, {})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"roaddata = {\n \"type\": \"FeatureCollection\",\n \"features\": [\n {\n \"type\": \"Feature\",\n \"properties\": {},\n \"geometry\": {\n \"type\": \"LineString\",\n \"coordinates\": [\n [\n 116.26191000524402,\n 40.01346243590182\n ],\n [\n 116.26191262306759,\n 40.01341607545047\n ],\n [\n 116.26191490936715,\n 40.01337305146164\n ],\n [\n 116.26191719868861,\n 40.01332966034864\n ],\n [\n 116.26191945904797,\n 40.01328598892853\n ]\n ]\n }\n }\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"deckgl = {\n return new deck.DeckGL({\n container,\n map: mapboxgl,\n mapboxAccessToken: '',\n mapStyle: 'https://free.tilehosting.com/styles/positron/style.json?key=U0iNgiZKlYdwvgs9UPm1',\n latitude: 49.254,\n longitude: -123.13,\n zoom: 11,\n maxZoom: 16,\n pitch: 45\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"{\n const geojsonLayer = new deck.GeoJsonLayer({\n data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json',\n opacity: 0.8,\n stroked: false,\n filled: true,\n extruded: true,\n wireframe: true,\n fp64: true,\n lightSettings,\n \n getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10,\n getFillColor: f => colorScale(f.properties.growth),\n getLineColor: f => [255, 255, 255],\n \n pickable: true,\n onHover\n });\n \n deckgl.setProps({layers: [geojsonLayer]});\n \n return geojsonLayer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"onHover = {\n return function(info) {\n const {x, y, object} = info;\n if (object) {\n tooltip.style.top = `${y}px`;\n tooltip.style.left = `${x}px`;\n tooltip.innerHTML = `\n

Average Property Value

${object.properties.valuePerSqm} / m²

Growth

${Math.round(object.properties.growth * 100)}%

\n `;\n } else { \n tooltip.innerHTML = '';\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"deck = require('deck.gl@~5.3.0/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"html `\n\n(Stylesheets)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"