2e:null 2f:["$","title",null,{"children":"deck.gl GeoJsonLayer Example | Nick Meyer | Observable"}] 34:[] 32:{"id":"fb0e1293e94029be","slug":"deck-gl-geojsonlayer-example","title":"deck.gl GeoJsonLayer Example","thumbnail":"a9c023a5365ec3eb6a2fe23329891fbebd5a08330081f41b918522a8cd2d823c","access_level":"public","create_time":"$D2018-06-07T18:44:16.304Z","update_time":"$D2018-06-07T18:45:25.087Z","view_time":null,"first_public_time":"$D2018-06-07T19:06:59.414Z","has_unpublished_edits":null,"fork":{"id":"e96550cdb9f98768","slug":"deck-gl-geojsonlayer-example","title":"deck.gl GeoJsonLayer Example","owner":{"id":"ca1430b8d5366f0e","login":"pessimistress","name":"Xiaoji Chen"}},"stars":5,"starred":false,"owner":{"type":"team","id":"2bdf2e6ab78b8e96","login":"mkandalf","name":"Nick Meyer","avatar_url":"https://avatars-next.observableusercontent.com/3705bcf1d72c456395105563355362198988d8b34cc68c14fd4822da720f7fa6","tier":"starter_2024"},"version":221,"publish_version":221,"role":null,"authored":false,"authors":[{"type":"individual","id":"e6306c19c1e3d0e5","login":"mkandalf","name":"Nick Meyer","avatar_url":"https://avatars-next.observableusercontent.com/3705bcf1d72c456395105563355362198988d8b34cc68c14fd4822da720f7fa6","tier":null}],"members":[{"type":"individual","id":"e6306c19c1e3d0e5","login":"mkandalf","name":"Nick Meyer","avatar_url":"https://avatars-next.observableusercontent.com/3705bcf1d72c456395105563355362198988d8b34cc68c14fd4822da720f7fa6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"deck.gl GeoJsonLayer Example","cells":[{"id":0,"value":"md`# deck.gl GeoJsonLayer Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"tooltip = container.querySelector('#tooltip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":157,"value":"html `\n\n(Stylesheets)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"