30:T443,{ const layers = [ new deckGL.ArcLayer({ id: 'arc-layer', data: bikeData, pickable: true, opacity: 0.1, strokeWidth: 5, getSourcePosition: d => d.from.coordinates, getTargetPosition: d => d.to.coordinates, getSourceColor: d => [255,237,160], getTargetColor: d => [240,59,32], autoHighlight: true, highlightColor: [0,200,5,255], onHover }), new deckGL.ScatterplotLayer({ id: 'scatterplot-from', data: bikeData, pickable: true, opacity: 0.05, radiusScale: 1, getPosition: d => d.from.coordinates, getRadius: d => 25, getColor: d => [0, 0, 255], autoHighlight: true, onHover }), new deckGL.ScatterplotLayer({ id: 'scatterplot-to', data: bikeData, pickable: true, opacity: 0.001, radiusScale: 1, getPosition: d => d.to.coordinates, getRadius: d => 25, getColor: d => [255, 0, 0], autoHighlight: true, onHover }) ]; deck.setProps({layers: [layers]}); return layers; }31:[] 2e:{"title":"BikeTown Portland","cells":[{"id":0,"value":"md`# BikeTown Portland`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md `Exploring Portland's bike sharing program with deck.gl`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"deck = {\n return new deckGL.DeckGL({\n container,\n map: mapbox,\n mapStyle: mapstyles.DarkV9,\n longitude: -122.66,\n latitude: 45.5231,\n zoom: 12,\n pitch: 60,\n mapboxApiAccessToken: toke,\n layers: [],\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"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

Start: ${object.from.name}

End: ${object.to.name}

\n `;\n } else { \n tooltip.innerHTML = '';\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"tooltip = container.querySelector('#tooltip')","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`#### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"data = (await fetch('https://gist.githubusercontent.com/mendozaline/e216b3daef263d703e266d119ef25089/raw/13102d3326187eddfd0be8094add777ed581b3f7/pdx-bike-data.json')).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"bikeData = data.filter((d,i) => d.to.name && d.from.name).filter((d,i) => i < 2000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"md`#### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"deckGL = require('deck.gl@5.2.5/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"mapbox = {\n let mapbox = await require('mapbox-gl');\n return mapbox;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"toke = \"pk.eyJ1IjoidGhlbWVuZG96YWxpbmUiLCJhIjoiY2p3NWpheGxxMXFtajQ5cHM2MHQ0ZndpOCJ9.xKEeKZfe48_dOSbF-qZnqQ\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`#### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html `\n(Mapbox Stylesheet)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"mapstyles = {\n return {\n 'DarkV9': 'mapbox://styles/mapbox/dark-v9',\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"html `\n\n(Stylesheets)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}