2b:null 2c:["$","title",null,{"children":"deck.gl - National Bridge Inventory | Eric Czajkowski | Observable"}] 31:[] 2f:{"id":"b1fb56e34a35f774","slug":"deck-gl-national-bridge-inventory","title":"deck.gl - National Bridge Inventory","thumbnail":"eb07a69ca395b58469ca2a97a9664038bb5a92e20b51ee3066c5d52372f010ef","access_level":"public","create_time":"$D2019-02-21T18:52:45.133Z","update_time":"$D2019-03-04T04:58:10.309Z","view_time":null,"first_public_time":"$D2019-02-21T21:20:35.810Z","fork":{"id":"36f151a31ad1bc63","slug":"deck-gl-railroad-crossings","title":"deck.gl - Railroad Crossings","owner":{"id":"69cdca4061c2cf84","login":"eczajk1","name":"Eric Czajkowski"}},"stars":0,"starred":false,"owner":{"type":"team","id":"69cdca4061c2cf84","login":"eczajk1","name":"Eric Czajkowski","avatar_url":"https://avatars-next.observableusercontent.com/8ed9f8d17a8cd736b96a1ba8161063a8093e15748651bb093b0ebe4b23aab7f5","tier":"starter_2024"},"version":673,"publish_version":673,"role":null,"authored":false,"authors":[{"type":"individual","id":"c4a2b1a98fdc9354","login":"eczajk1","name":"Eric Czajkowski","avatar_url":"https://avatars-next.observableusercontent.com/8ed9f8d17a8cd736b96a1ba8161063a8093e15748651bb093b0ebe4b23aab7f5","tier":null}],"members":[{"type":"individual","id":"c4a2b1a98fdc9354","login":"eczajk1","name":"Eric Czajkowski","avatar_url":"https://avatars-next.observableusercontent.com/8ed9f8d17a8cd736b96a1ba8161063a8093e15748651bb093b0ebe4b23aab7f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"47fb66e31647c191","slug":"geodev-summit-2019","title":"GeoDev Summit 2019","owner":{"id":"69cdca4061c2cf84","login":"eczajk1","name":"Eric Czajkowski"}},"type":"notebook","body":{"title":"deck.gl - National Bridge Inventory","cells":[{"id":0,"value":"md`# deck.gl - National Bridge Inventory\n## Data from the U.S. Federal Highway Administration\n\nThis notebook demonstrates using [deck.gl](https://deck.gl) to view a \"large\" number of [GeoJSON](http://geojson.org/) point features.\n\nThis map depicts bridges from the [National Bridge Inventory](https://www.fhwa.dot.gov/bridge/nbi.cfm). The color of each bridge is indicative of the year that the bridge was built:\n- darkest RED indicates 1900 or earlier\n- darkest GREEN indicates 2000 or later \n\nPlease be patient while the data loads.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"md`The data has ${data && data.features.length.toLocaleString() } features.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"md` ## Demo: deck.gl data filtering\n\nEven with a **larger** number of map features, map filtering is still pretty efficient here. Use the **min** and **max** values for \"Year Built\" to filter bridges shown in the map below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"viewof minYearBuilt = slider({\n min: settings.minBridgeAge, \n max: settings.maxBridgeAge, \n step: 1, \n value: settings.minBridgeAge, \n title: 'Min Year Built', \n description: 'Select the minimum year year built to map',\n submit: true,\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"viewof maxYearBuilt = slider({\n min: settings.minBridgeAge, \n max: settings.maxBridgeAge, \n step: 1, \n value: settings.maxBridgeAge, \n title: 'Max Year Built', \n description: 'Select the maximum year year built to map',\n submit: true,\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"md`## Application Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"data = {\n return fetch(dataUrl)\n .then(response => response.json())\n .then((d) => {\n d.features = d.features.filter((f) => !!f.geometry);\n return d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"deckgl = new deck.DeckGL({\n container,\n map: mapboxgl,\n mapboxApiAccessToken: 'pk.eyJ1IjoiZWN6YWprMSIsImEiOiIzeVJsZENzIn0.qU3ya0uQmCvX5OyCxkKCuw',\n mapStyle: 'mapbox://styles/eczajk1/cieszaiux00knqam3b7444bmd',\n latitude: 39.828175,\n longitude: -98.5795,\n zoom: 4,\n layers: [],\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":653,"value":"{\n const getFillColor = (d) => {\n const yr = d.properties.YEARBUILT;\n if (yr < minYearBuilt || yr > maxYearBuilt) {\n return null;\n }\n const scaled = yearBuiltScale(d.properties.YEARBUILT);\n const rgb = d3.interpolateRdYlGn(scaled).split('');\n rgb.splice(0, 4);\n rgb.pop();\n const mapped = rgb.join('').split(',').map(s => Number(s));\n return mapped;\n };\n deckgl.setProps({\n layers: [\n new deck.ScatterplotLayer({\n id: `${minYearBuilt}_${maxYearBuilt}`,\n visible: true,\n data: data.features,\n opacity: 0.8,\n stroked: true,\n filled: true,\n radiusScale: 10,\n radiusMinPixels: 2,\n radiusMaxPixels: 4,\n getPosition: d => d.geometry.coordinates,\n getFillColor,\n }),\n ],\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"yearBuiltScale = d3.scaleLinear()\n .domain([\n settings.minBridgeStyleAge,\n settings.maxBridgeStyleAge,\n ])\n .range([0, 1]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"settings = ({\n minBridgeStyleAge: 1900,\n maxBridgeStyleAge: 2000,\n minBridgeAge: 1697,\n maxBridgeAge: 2017,\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"dataUrl = 'https://s3.amazonaws.com/centuryeng-sample-data/bridges-03.geojson';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":628,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":154,"value":"deck = require('deck.gl@6.4.2/deckgl.min.js');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"import {checkbox, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"d3 = require(\"d3-scale-chromatic@1\", \"d3-scale@1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"