36:["$","title",null,{"children":"Interactive COVID-19 Map | Danny | Observable"}] 3e:Tecf,viewof map = { const mapboxGlGeocoder = await require('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js'); // Div for map const container = html`

`; // Div for map and legend const outerContainer = html`

${style()}

`; // Add legend to outer container outerContainer.appendChild(mapLegend()); // Add map container to outer container outerContainer.appendChild(container); yield outerContainer; // Give the container dimensions. // Create MapBox map centered on US. const map = container.value = new mapboxgl.Map({ container, center: [-97, 38.88], zoom: 3.2, style: "mapbox://styles/mapbox/light-v10" }); // Search map.addControl(new mapboxGlGeocoder({ accessToken: mapBoxToken, mapboxgl: mapboxgl }), 'top-left'); // Add county shape files, with relevant data stored as properites map.on('load', function() { map.addSource('counties', { 'type': 'geojson', 'data':layerData }); // Keeps track of the county id of the county that the mouse is currently hovered on var hoveredCountyId = null; // Find the index of the first symbol layer in the map style, use to this overlay state/city names over // fill layer var layers = map.getStyle().layers; var firstSymbolId; for (var i = 0; i < layers.length; i++) { if (layers[i].type === 'symbol') { firstSymbolId = layers[i].id; break; } } // Add a fill layer, color based off number of cases and pre-computed bin values (stops) map.addLayer({ 'id': 'countyLayer', 'type': 'fill', 'source': 'counties', 'layout': {}, 'paint': { 'fill-color': { property: 'cases', stops: stops, default : "#DCDCDC" }, 'fill-opacity': 0.8 } }, firstSymbolId); // Add a highlight layer, which appears when the user hovers over a given county map.addLayer({ 'id': 'countyHighlight', 'source': 'counties', 'type': 'line', 'paint': { 'line-color': 'white', 'line-width': 2, 'line-opacity': [ 'case', ['boolean', ['feature-state', 'hover'], false], 1, 0 ] }}, firstSymbolId); // Mapbox popup let popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); // Implement hover behavior. Highlight the county and drop the popup. map.on('mousemove', 'countyLayer', function(e) { if (e.features.length > 0) { if (hoveredCountyId) { map.setFeatureState( { source: 'counties', id: hoveredCountyId }, { hover: false } ); } hoveredCountyId = e.features[0].id; map.setFeatureState( { source: 'counties', id: hoveredCountyId }, { hover: true } ); } /* Popop behavior */ // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; const feature = e.features[0]; const popupContent = tipHTML(feature); // Add popup popup .setLngLat(e.lngLat) .setHTML(popupContent) .addTo(map); }); // When the mouse leaves the state-fill layer, update the feature state of the // previously hovered feature. map.on('mouseleave', 'countyLayer', function() { if (hoveredCountyId) { map.setFeatureState( { source: 'counties', id: hoveredCountyId }, { hover: false } ); } hoveredCountyId = null; /* Popup */ map.getCanvas().style.cursor = ''; popup.remove(); }); }); } 3f:[] 3a:{"id":"b923d481227776d3","slug":"untitled/2","title":"Interactive COVID-19 Map","thumbnail":"6edd82014cf0a5ef5587f83825517502dc3fe0a785768aabb4d7ef17ef61c144","access_level":"public","create_time":"$D2020-06-04T17:47:08.449Z","update_time":"$D2020-06-13T22:28:25.351Z","view_time":null,"first_public_time":"$D2020-06-05T01:51:38.930Z","has_unpublished_edits":null,"fork":{"id":"307de3f2b0b188a5","slug":"mapbox-fly-to","title":"Mapbox Fly-To","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f84cf639513e8f2c","login":"onoratod","name":"Danny","avatar_url":"https://avatars-next.observableusercontent.com/355aa7300a9c6bc1475aacf1f75c0aa0fba98d15ca6719110be7b9eac5bd52da","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1351,"publish_version":1351,"role":null,"authored":false,"authors":[{"type":"individual","id":"a837c2df96380ba6","login":"onoratod","name":"Danny","avatar_url":"https://avatars-next.observableusercontent.com/355aa7300a9c6bc1475aacf1f75c0aa0fba98d15ca6719110be7b9eac5bd52da","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a837c2df96380ba6","login":"onoratod","name":"Danny","avatar_url":"https://avatars-next.observableusercontent.com/355aa7300a9c6bc1475aacf1f75c0aa0fba98d15ca6719110be7b9eac5bd52da","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive COVID-19 Map","cells":[{"id":1222,"value":"md `# Interactive COVID-19 Map\nInteractive map of COVID-19 cases and death using NYT COVID Tracker public data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"md `## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"md `This function draws the legend on top of the map. It calls \\`\\`legendVals()\\`\\` which computes the text for each swatch based on the bins calculated with \\`\\`d3.scaleQuantile()\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"mapLegend = () => html`\n \n\n

\n ${legendVals.map(d => {\n return html`

\n ${d[0]}\n

`;\n })}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"md `Sets the style for the MapBox popup.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"style = () => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"md `Color scale function to convert cases to colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"color = d3.scaleQuantile(d3.schemeRdPu[9]).domain(layerData.features.map(d => d.properties.cases)); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"md `This functions draws a line graph to be placed in the MapBox popup.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"function tipLine(width, height, values, color) {\n \n // Take an array of arrays with [date, value]\n const test = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n //values = diff(values);\n\n const timeParse = d3.timeParse(\"%Y-%m-%d\");\n const x = d3.scaleLinear().domain(d3.extent(dateList.map(d => timeParse(d)))).range([0.5, width - 0.5]);\n const y = d3.scaleLinear().domain(d3.extent(values.map(d => d[1]))).range([height - 0.5, 0.5]);\n \n const line = d3.line()\n .x(function(d, i) { return x(d[0]); })\n .y(function(d) { return y(d[1]) })\n .curve(d3.curveBasis);\n\n test.append(\"path\")\n .attr(\"d\", line(values))\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", color);\n\n\n if (values.length > 0) {\n return test.html();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"md `This is a test for \\`\\`tipLine()\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"tipLine(500, 200, countyCaseData.get(\"11001\").entries().map(d => [d3.timeParse(\"%Y-%m-%d\")(d.key), d.value.ma_new_cases]), \"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"md `This is the equivalent of \\`\\`tipLine()\\`\\` but creates a bar graph.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"function tipBar(width, height, values, color) {\n\n // Take an array of arrays with [date, value]\n const test = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n const timeParse = d3.timeParse(\"%Y-%m-%d\");\n const x = d3.scaleLinear().domain(d3.extent(dateList.map(d => timeParse(d)))).range([0.5, width - 0.5]);\n const y = d3.scaleLinear().domain(d3.extent(values.map(d => d[1]))).range([height - 0.5, 0.5]);\n \n var actualWidth = d3.extent(values.map(d => x(d[0])))\n var barWidth = ((actualWidth[1] - actualWidth[0])/values.length);\n test.append(\"g\")\n .selectAll(\"rect\")\n .data(values)\n .join(\"rect\")\n .attr(\"fill\", color)\n .attr(\"stroke\", \"none\")\n .attr(\"opacity\", .8)\n .attr(\"x\", d => x(d[0]) - 0.5*(barWidth))\n .attr(\"width\", barWidth)\n .attr(\"y\", d => y(d[1]))\n .attr(\"height\", d => height - y(d[1]))\n\n\n if (values.length > 0) {\n return test.html();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"md `This function creates the HTML for the MapBox popup.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"function tipHTML(feature) {\n return `\n

${feature.properties.NAME} County

\n \n \n \n \n \n \n \n \n \n \n \n

\n	Cases	Deaths
Per 100,000	${feature.properties.cases ? feature.properties.cases : \"\"}	${feature.properties.deaths ? feature.properties.deaths : \"\"}

\n ${tipGraph(feature)}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"md `This function creates the HTML for the graph in the MapBox popup and is called by \\`\\`tipHTML()\\`\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"function tipGraph(feature) {\n if (feature.properties.cases) {\n return `\n New Cases\n 7-day moving average\n `;\n } else {\n return \"\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"md `Compute the cut values to use for assigning colors to counties.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"stops = {\n const temp = color.range().map((d, i) => [+d3.format(\".0f\")(color.quantiles()[i]), d]);\n temp[temp.length-1][0] = +d3.format(\".0f\")(d3.max(color.domain()));\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"md `Calculate the text ranges for each bin in the legend.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"legendVals = {\n var vals = [];\n const extent = d3.extent(layerData.features.map(x=>x.properties.cases));\n\n for (var i = 0; i <= stops.length-1; i++) {\n if (i == 0) {\n vals.push([`< ${d3.format(\",.0f\")(stops[0][0]+1)}`, stops[i][1]]);\n } else if (i == stops.length - 1) {\n vals.push([`${d3.format(\",.0f\")(stops[i-1][0]+1)}+`, stops[i][1]]);\n } else {\n vals.push([`${d3.format(\",.0f\")(stops[i-1][0]+1)} - ${d3.format(\",.0f\")(stops[i][0])}`, stops[i][1]]);\n }\n }\n \n return vals;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1227,"value":"md `Date to display on the map. Computed automatically as the last date available in the underlying data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"mapDate = dateList.slice(-1).pop()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"md `Load the raw geoJSON data for US counties.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"json = await d3.json('https://gist.githubusercontent.com/onoratod/2782c6e5874d03b60fe7b032f3f24865/raw/196337d47e60a2a56645ac55fd15a2aa33835426/us_counties.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"md `Load the county case data. The data is structured as a set of nested \\`\\`d3.map\\`\\` data structures. The first layer maps county FIPS codes to dates, the second layer maps dates to relevent data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"countyCaseData = {\n const dataMap = d3.map();\n const data = await d3.csv(\"https://gist.githubusercontent.com/onoratod/7b17d341cb5bce241c36a0f31092800b/raw/f65423d815b84259f43e4d78de21af08fa55b50f/covid_clean.csv\", d => {\n var fips = +d.fips\n var entry = {cases : +d.cases, new_cases : +d.new_cases, ma_cases : +d.ma_cases, ma_new_cases : +d.ma_new_cases, deaths : +d.deaths}\n if (dataMap.has(\"\"+fips)) {\n dataMap.get(\"\"+fips).set(d.date, entry);\n } else {\n dataMap.set(\"\"+fips, d3.map().set(d.date, entry))\n }\n });\n return dataMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"md `Construct the data for the county fill layer. Here we just assign the number of cases, deaths, and new cases as properties to the geoJSON data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"layerData = {\n json.features.forEach(function(d,i) {\n var countyData = countyCaseData.get(\"\"+d.properties.COUNTY_FIPS);\n if (countyData) {\n var dateData = countyData.get(mapDate);\n if (dateData) {\n d.properties.cases = +d3.format(\".0f\")(dateData.cases);\n d.properties.deaths = +d3.format(\".0f\")(dateData.deaths);\n d.properties.new_cases = +d3.format(\".0f\")(dateData.new_cases);\n }\n }\n d.id = i;\n });\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"md `Get a list of dates that appear in the data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"dateList = {\n var dates = [];\n var list = countyCaseData.values().map(d => d.keys());\n for (var i = 0; i < list.length; i++) {\n dates = dates.concat(list[i]);\n }\n return [...new Set(dates)].sort();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"mapBoxToken = \"pk.eyJ1Ijoib25vcmF0b2QiLCJhIjoiY2theW11Yzk4MGQ2cDJ5bG44ZmliNXpmZCJ9.zsiYeUGjzf7ClRW0oDNwAA\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n // https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken = mapBoxToken;\n const href = await require.resolve(\"mapbox-gl@1.0/dist/mapbox-gl.css\");\n const href2 = await require.resolve('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css')\n document.head.appendChild(html``);\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 35:null