US population density

Hover over a state!

${legend}

` yield content const map = new mapboxgl.Map({ container, center: [-96, 38], zoom: 3, style: "mapbox://styles/benjaminadk/cjxvbvmsl03ce1co1gtw4zohi", scrollZoom: true }) map.on('load', function() { var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'] var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'] for (let i = 0; i < layers.length; i++) { var layer = layers[i] var color = colors[i] var item = document.createElement('div') var key = document.createElement('span') key.className = 'legend-key' key.style.backgroundColor = color var value = document.createElement('span') value.innerHTML = layer item.appendChild(key) item.appendChild(value) legend.appendChild(item) } }) map.on('mousemove', function(e) { var states = map.queryRenderedFeatures(e.point, { layers: ['statedata'] }) var pd = document.getElementById('pd') if (states.length > 0) { var {name, density} = states[0].properties pd.innerHTML = `

${name}

${density} people per square mile

` } else { document.getElementById('pd').innerHTML = `

Hover over a state!

` } }) map.getCanvas().style.cursor = 'default' map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]) invalidation.then(() => map.remove()) }32:Tda3,viewof m3 = { var container = html`

` var content = html`

${container}

Motor vehicle collisions

Data: Motor vehicle collision injuries and deaths in NYC, Jan 2016

Casualty

Hour: 12PM

Day of the week

All Weekday Weekend

` yield content var map = new mapboxgl.Map({ container, style: 'mapbox://styles/mapbox/light-v10', center: [-74.0059, 40.7128], zoom: 12 }) map.on('load', function() { var filterHour = ['==', ['number', ['get', 'Hour']], 12] var filterDay = ['!=', ['string', ['get', 'Day']], 'placeholder'] map.addLayer({ id: 'collisions', type: 'circle', source: { type: 'geojson', data: 'https://gist.githubusercontent.com/benjaminadk/9e9c109575673bbbdc0c188246043fbc/raw/7140545eea38c6982faca0b946a7070e5ff251ed/collisions.geojson' }, paint: { 'circle-radius': [ 'interpolate', ['linear'], ['number', ['get', 'Casualty']], 0, 4, 5, 24 ], 'circle-color': [ 'interpolate', ['linear'], ['number', ['get', 'Casualty']], 0, '#2DC4B2', 1, '#3BB3C3', 2, '#669EC4', 3, '#8B88B6', 4, '#A2719B', 5, '#AA5E79' ], 'circle-opacity': 0.8 }, filter: ['all', filterHour, filterDay] }) document.getElementById('slider').addEventListener('input', function(e) { var hour = parseInt(e.target.value) filterHour = ['==', ['number', ['get', 'Hour']], hour] map.setFilter('collisions', ['all', filterHour, filterDay]) var ampm = hour >= 12 ? 'PM' : 'AM' var hour12 = hour % 12 ? hour % 12 : 12 document.getElementById('active-hour').innerText = hour12 + ampm }) document.getElementById('filters').addEventListener('change', function(e) { var day = e.target.value if (day === 'all') { filterDay = ['!=', ['string', ['get', 'Day']], 'placeholder'] } else if (day === 'weekday') { filterDay = ['match', ['get', 'Day'], ['Sat', 'Sun'], false, true]; } else if (day === 'weekend') { filterDay = ['match', ['get', 'Day'], ['Sat', 'Sun'], true, false]; } else { console.log('error'); } map.setFilter('collisions', ['all', filterHour, filterDay]) }) }) invalidation.then(() => map.remove()) }33:T58c,html``34:[] 2f:{"title":"Mapbox Tutorials","cells":[{"id":0,"value":"md`# Mapbox Tutorials`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`## Hello Mapbox\n\n- Display a basic map\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof m1 = {\n const container = html`

`\n yield container\n const map = container.value = new mapboxgl.Map({\n container,\n center: [-96, 38],\n zoom: 3,\n style: \"mapbox://styles/mapbox/streets-v10\",\n scrollZoom: true\n });\n invalidation.then(() => map.remove())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`## State Population Choropleth\n\n- Display an interactive choropleth map\n- Create a legend\n- Create an information box\n- Using *Studio* to create custom map style\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`## Data Changes Over Time\n\n- Add a layer via JavaScript\n - Circle Layer\n - Interpolators\n- Use Property Expressions to filter results\n - Combine filters\n- Listen to input events\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.1.0\");\n if (!gl.accessToken) {\n gl.accessToken = \"pk.eyJ1IjoiYmVuamFtaW5hZGsiLCJhIjoiY2p4bndvOHp6MDB0MTNucXVudzU5MGh6NiJ9.w0jaZd2EhKnoe0ttahUmuQ\"\n const href = await require.resolve(\"mapbox-gl@1.0.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}