30:T7cf,paint = function() { map.setLayoutProperty('covid-cases state 3d', 'visibility', 'none'); map.setPaintProperty('covid-cases state 3d', 'fill-extrusion-height', [ "interpolate", ["linear"], ["zoom"], 0, 0, 3, styleData(dataStatesFips, joinByFips, casesToExtrusionHeight, 0) ]); map.setPaintProperty( 'covid-cases state 3d', 'fill-extrusion-color', styleData(dataCountiesFips, joinByFips, casesToFillColor, '#383838') ); map.setPaintProperty('covid-cases county 3d', 'fill-extrusion-height', [ "interpolate", ["linear"], ["zoom"], 4, 0, 5, styleData(dataCountiesFips, joinByFips, casesToExtrusionHeight, 0) ]); map.setPaintProperty( 'covid-cases county 3d', 'fill-extrusion-color', styleData(dataCountiesFips, joinByFips, casesToFillColor, '#383838') ); map.setLayoutProperty('covid-deaths county 3d', 'visibility', 'none'); map.setPaintProperty( 'covid-deaths county 3d', 'fill-extrusion-base', styleData(dataCountiesFips, joinByFips, casesToExtrusionHeight, -1) ); map.setPaintProperty( 'covid-deaths county 3d', 'fill-extrusion-height', styleData(dataCountiesFips, joinByFips, deathsToExtrusionHeight, -1) ); map.setPaintProperty( 'covid-deaths county 3d', 'fill-extrusion-color', styleData( dataCountiesFips, joinByFips, deathsToFillColor, 'hsla(0,10%,10%,0.6)' ) ); map.setPaintProperty('covid county points', 'circle-opacity', 0); map.setPaintProperty('covid county points', 'circle-color', 'hsla(0,0,0,0)'); map.setPaintProperty( 'covid county points', 'circle-stroke-color', 'hsla(0,0,0,0)' ); map.setPaintProperty( 'covid county points', 'circle-radius', styleData(dataCountiesFips, joinByFips, casesToCircleRadius, 0) ); map.setPaintProperty( 'covid county points', 'circle-stroke-width', styleData(dataCountiesFips, joinByFips, deathsToCircleStroke, 0.1) ); }31:T944,addMapPopups = function() { // Based on https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/ var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: true, closeOnMove: true }); function showInfo(e) { map.getCanvas().style.cursor = 'pointer'; var feature = e.features[0]; var coordinates = e.lngLat; var description = feature.properties.name; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } // Populate the popup and set its coordinates // based on the feature found. popup.remove(); popup .setLngLat(coordinates) .setHTML(description) .addTo(map); let hasData = dataCountiesFips.hasOwnProperty(joinByFeatureId(feature)) ? true : false; let dataSelector = map.getZoom() < 5 ? 'state' : 'county'; let infoHTML = `

${feature.properties.name} County, ${ feature.properties.state_abbrev }

FIPS:${joinByFeatureId(feature)}

Cases: ${ hasData ? dataCountiesFips[joinByFeatureId(feature)]['cases'] : 'No data' }
Cases(per million): ${ hasData ? ( (dataCountiesFips[joinByFeatureId(feature)]['cases'] / feature.properties["2016_pop_count"]) * 1000000 ).toFixed(0) : 'No data' }
Infected: ${ hasData ? ( (dataCountiesFips[joinByFeatureId(feature)]['cases'] / feature.properties["2016_pop_count"]) * 100 ).toFixed(0) + "%" : 'No data' }
Deaths: ${ hasData ? dataCountiesFips[joinByFeatureId(feature)]['deaths'] : 'No data' }

`; document.getElementById('info').innerHTML = infoHTML; } map.on( 'mousemove', 'covid-cases state 3d', map.on('mousemove', 'covid-cases county 3d', showInfo) ); map.on('mouseleave', 'covid-cases county 3d', function() { map.getCanvas().style.cursor = ''; popup.remove(); }); }32:T5d0,loadLayers = { map.on('load', function() { map.addSource('county-points', { type: 'vector', url: 'mapbox://mapbox.hist-pres-election-county-points' }); map.addSource('state-points', { type: 'vector', url: 'mapbox://mapbox.hist-pres-election-state-points' }); map.addSource('county', { type: 'vector', url: 'mapbox://mapbox.hist-pres-election-county' }); map.addSource('state', { type: 'vector', url: 'mapbox://mapbox.hist-pres-election-state' }); map.addLayer( { id: 'covid-cases state 3d', type: 'fill-extrusion', source: 'state', 'source-layer': 'historical_pres_elections_state' }, "waterway-label" ); map.addLayer( { id: 'covid-cases county 3d', type: 'fill-extrusion', source: 'county', 'source-layer': 'historical_pres_elections_county' }, "waterway-label" ); map.addLayer( { id: 'covid-deaths county 3d', type: 'fill-extrusion', source: 'county', 'source-layer': 'historical_pres_elections_county' }, "waterway-label" ); map.addLayer( { id: 'covid county points', type: 'circle', source: 'county-points', 'source-layer': 'historical_pres_elections_county_points' }, "waterway-label" ); paint(); addMapPopups(); }); return map.getStyle().layers; }33:[] 2e:{"title":"US Covid-19 Map","cells":[{"id":0,"value":"md`# US Covid-19 Map\n\nMap to visualize the Covid-19 data from [NYTimes](https://github.com/nytimes/covid-19-data)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"viewof mapContainer = {\n const outerContainer = html`

`;\n const infoContainer = html`

`;\n const mapContainer = html`

`;\n outerContainer.appendChild(infoContainer);\n outerContainer.appendChild(mapContainer);\n\n return outerContainer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"viewof days = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 80,\n title: `Days`,\n description: \"Days since first case\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"selectedDate = d3.timeFormat(\"%Y-%m-%d\")(\n d3.timeDay.offset(new Date(\"2020-01-21\"), days)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## 1. Data\nLoad data for states and counties. Use selected days to filter data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"dataStates = d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-states.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"dataCounties = d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"md`#### Aggregate by fips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"dataStatesFips = d3\n .nest()\n .key(function(row) {\n // Group by\n return row['fips'];\n })\n .rollup(function(groupRows) {\n return {\n // Aggregate properties\n state: groupRows[0]['state'],\n cases: d3.sum(groupRows, function(d) {\n return d.date < d.cases;\n }),\n deaths: d3.sum(groupRows, function(d) {\n return d.deaths;\n })\n };\n })\n .object(dataStates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"dataCountiesFips = d3\n .nest()\n .key(function(row) {\n // Group by\n return row['fips'];\n })\n .rollup(function(groupRows) {\n return {\n // Aggregate properties\n county: groupRows[0]['county'],\n state: groupRows[0]['state'],\n cases: d3.sum(groupRows, function(d) {\n return d3.timeDay.count(new Date(d.date), new Date(selectedDate)) > 0\n ? d.cases\n : 0;\n }),\n deaths: d3.sum(groupRows, function(d) {\n return d3.timeDay.count(new Date(d.date), new Date(selectedDate)) > 0\n ? d.deaths\n : 0;\n })\n };\n })\n .object(dataCounties)","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"md`#### Aggregate daily totals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"dataDailyTotals = d3\n .nest()\n .key(function(row) {\n // Group by\n return d3.timeDay.count(new Date(\"2020-01-21\"), new Date(row['date']));\n })\n .rollup(function(groupRows) {\n return d3.sum(groupRows, function(d) {\n return d.cases;\n });\n })\n .object(dataCounties)","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"viewof myslider = histogramSlider(dataDailyTotals, {\n h: 100,\n defaultRange: [0, 75],\n bucketSize: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"md`### Map data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"featureList = {\n return Generators.observe(change => {\n map.on('moveend', function() {\n var features = map.querySourceFeatures('county-points', {\n sourceLayer: \"historical_pres_elections_county_points\"\n });\n change(features);\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`## 2. Join expression\nWrite a [Mapbox GL data expression](https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#data-expressions) that matches the value of the FIPS to the feature id in the vector tiles.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"joinByFips = function(row, key) {\n return [\"==\", parseInt(key), [\"id\"]];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"joinByFeatureId = function(feature) {\n return feature.id.toString().padStart(5, '0');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`## 3. Style expressions\nDefine how the data values will be converted to the value for one of the [GL layer styles](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"layerStyles = new Object({\n countyStateRadius: styleData(\n dataStatesFips,\n joinByFips,\n casesToCircleRadius,\n 0\n ),\n circleStroke: styleData(\n dataStatesFips,\n joinByFips,\n deathsToCircleStroke,\n 0\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"casesToCircleRadius = function(d) {\n var scaleValue = d3\n .scaleSqrt()\n .domain([1, 200000])\n .range([1, 50]);\n return d['cases'] ? +scaleValue(d['cases']).toFixed(1) : 0;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"casesToExtrusionHeight = function(d) {\n var scaleValue = d3\n .scaleLinear()\n .domain([0, 1000])\n .range([0, 4000]);\n return d['cases'] ? +scaleValue(d['cases']).toFixed(0) : 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"deathsToExtrusionHeight = function(d) {\n var scaleValue = d3\n .scaleLinear()\n .domain([0, 1000])\n .range([0, 100]);\n\n return d['deaths']\n ? +scaleValue(d['cases']).toFixed(0) + +scaleValue(d['deaths']).toFixed(0)\n : 0;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"casesToFillColor = function(d) {\n var scaleValue = d3\n .scaleSqrt()\n .domain([1, 50000])\n .range(['#514f34', '#f5fd58']);\n return scaleValue(d['cases']);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":856,"value":"deathsToFillColor = function(d) {\n var scaleValue = d3\n .scaleSqrt()\n .domain([1, 50000])\n .range(['red', 'red']);\n return d['deaths'] ? scaleValue(d['deaths']) : 'hsla(0,0,0,0)';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":728,"value":"scaleValue = d3.scaleSqrt(d3.interpolateViridis).domain([1, 200000])","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"scaleValue(23)","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"d3.interpolateViridis(.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"legend({\n color: d3.scaleSqrt(d3.interpolateViridis).domain([1, 200000]),\n title: \"Temperature (°F)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"deathsToCircleStroke = function(d) {\n var scaleValue = d3\n .scaleSqrt()\n .domain([1, 5000])\n .range([0, 5]);\n return d['deaths'] ? +scaleValue(d['deaths']).toFixed(1) : 0;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"md`### Mapbox Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"map = {\n let map = new mapboxgl.Map({\n container: 'map',\n style: 'mapbox://styles/mapbox/dark-v9',\n center: [-87.0413, 38.878], //[-96, 37.8],\n zoom: 3\n });\n\n map.addControl(\n new mapboxglGeocoder({\n accessToken: mapboxgl.accessToken,\n mapboxgl: mapboxgl,\n countries: 'us'\n }),\n 'top-left'\n );\n\n var nav = new mapboxgl.NavigationControl();\n map.addControl(nav, 'top-right');\n\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"mapboxglGeocoder = {\n let mapboxglGeocoder = await require('@mapbox/mapbox-gl-geocoder');\n\n const href = await require.resolve(\n \"@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css\"\n );\n document.head.appendChild(html``);\n return mapboxglGeocoder;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@1.9.0');\n mapboxgl.accessToken =\n 'pk.eyJ1IjoibXBtY2tlbm5hOCIsImEiOiJfYWx3RlJZIn0.v-vrWv_t1ytntvWpeePhgQ';\n const href = await require.resolve(\"mapbox-gl@1.9.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`### Data and helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"import { copy } from '@mbostock/copy-to-clipboard'","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"import { styleData } from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"import { getLayers } from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":"import { autoSelect } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"import { histogramSlider } from \"@trebor/snapping-histogram-slider\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}