31:T46c,{ const layers = [ new deck.ArcLayer({ id: 'arc-layer', data: data, pickable: true, opacity: 0.05, 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,0,255,255], onHover, visible: true, }), new deck.ScatterplotLayer({ id: 'scatterplot-from', data: data, pickable: true, opacity: 0.001, radiusScale: 1, getPosition: d => d.to.coordinates, getRadius: d => 25, getColor: d => [0, 0, 255], autoHighlight: true, onHover, visible: true, }), new deck.ScatterplotLayer({ id: 'scatterplot-to', data: data, pickable: true, opacity: 0.001, radiusScale: 1, getPosition: d => d.to.coordinates, getRadius: d => 25, getColor: d => [255, 0, 0], autoHighlight: true, onHover, visible: true, }) ]; deckgl.setProps({layers}); return layers; }32:[] 2f:{"title":"clx. BikeTown PDX","cells":[{"id":0,"value":"md`# clx. BikeTown PDX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md `Exploring Portland's BikeTown bike sharing program with deck.gl`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"deckgl = {\n return new deck.DeckGL({\n container,\n map: mapboxgl,\n mapStyle: 'https://free.tilehosting.com/styles/darkmatter/style.json?key=U0iNgiZKlYdwvgs9UPm1',\n longitude: -122.66,\n latitude: 45.5231,\n zoom: 12,\n pitch: 60,\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$31","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":151,"value":"mapboxgl = require('mapbox-gl@~0.44.1/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"deck = require('deck.gl@~5.2.0/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"tooltip = container.querySelector('#tooltip')","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":198,"value":"html `\n\n(Stylesheets)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html `\n(Mapbox Stylesheet)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}