2b:null 2c:["$","title",null,{"children":"Interactive Plot Dashboard | Ben Zipperer | Observable"}] 31:Tc0d,viewof currentState = { const mapWidth = 635, margin = (width - mapWidth) / 2; const gridMap = d3.select( Plot.plot({ width: width, height: 400, padding: 0, marginTop: 10, marginBottom: 10, marginLeft: margin, marginRight: margin, x: { axis: null }, y: { axis: null }, color: { type: "identity" }, marks: cells }) ); let timeout, focus = null; const rect = gridMap.selectAll("rect"); gridMap .on("pointerover", highlight) .on("pointerout", restore) .on("click", handleClick) .on("pointerdown", handlePointerDown) .on("pointerup", handlePointerUp) .style("cursor", "default"); const map = html`

${gridMap.node()}

${Legend(colors, { title: `${number} in ${thisMonth}`, tickFormat: "s", tickSize: 2 })}

Live data from The New York Times, based on reports from state and local health agencies.

Hover over the map to see state numbers. Click on a cell to focus; click on focused cell or empty space to cancel focus.

`; updateState(null); return map; function highlight(e) { if (focus !== null) return; const index = getTargetIndex(e); fill(index, true); if (timeout) clearTimeout(timeout); timeout = setTimeout( () => updateState(index >= 0 ? lookupState(index) : null), 25 ); } function restore(e) { if (focus !== null) return; const index = getTargetIndex(e); fill(index); } function fill(index, highlight, darker) { if (index >= 0) { const color = highlight ? "#edc949" : colors(mapData[index].total); d3.select(rect.nodes()[index]) .attr("fill", darker ? d3.color(color).darker(darker) : color) .attr("stroke-width", highlight ? 1 : 0); } } function handleClick(e) { const index = getTargetIndex(e); if (focus === index) { focus = null; return; } if (focus !== null) fill(focus); if (index >= 0) { fill(index, true); focus = index; updateState(lookupState(index)); } else { focus = null; updateState(null); } } function handlePointerDown(e) { const index = getTargetIndex(e); if (index >= 0) fill(index, true, 0.25); } function handlePointerUp(e) { const index = getTargetIndex(e); if (index >= 0) fill(index, true); } function getTargetIndex(e) { let tar = e.target; // Plot 0.4.0 tspan if (tar instanceof SVGTSpanElement) tar = tar.parentElement; return tar instanceof SVGTextElement || tar instanceof SVGRectElement ? [...tar.parentElement.children].indexOf(tar) : -1; } function lookupState(index) { return mapData[index].code; } function updateState(state) { map.value = state; map.dispatchEvent(new CustomEvent("input")); } }32:T5bc,lineChart = () => { const state = currentState ? stateNumbers.find((d) => d.code === currentState) : totals, tidyState = tidy(state), k = 3, windowLabel = (d, i) => i === tidyState.length - 1 ? `${k}mo moving avg` : "", text = (bg) => Plot.text(tidyState, { x: "month", y: "value", dy: "-1em", fontWeight: "bold", strokeWidth: bg ? 5 : null, stroke: bg ? "white" : null, fill: bg ? null : "#edc949", text: windowLabel }); return Plot.plot({ width: width - 300, height: 150, marginBottom: 10, x: { label: null, tickFormat: null, tickSize: 0 }, y: { grid: true, tickFormat: "s", label: `${currentState ?? "total"} monthly ${number}` }, marks: [ xRules, Plot.ruleY([0], { stroke: "#aaa", strokeWidth: 0.1 }), // Something is wrong here /* currentState ? Plot.lineY(tidyAll, { x: "month", y: "value", stroke: "#ddd" }) : null, */ Plot.lineY(tidyState, { x: "month", y: "value", stroke: miniPlotColor, strokeWidth: 3 }), Plot.line( tidyState, Plot.windowY({ x: "month", y: "value", k: k, stroke: "#edc949", strokeWidth: 3, strokeOpacity: 0.5 }) ), text(true), text() ] }); }33:T40f,lastTwelveMonths = () => { const stateNumbers = covidData.slice(1), keys = Object.keys(stateNumbers[0]), months = keys.slice(keys.length - 12); const data = months.flatMap(month => stateNumbers.map(state => ({ month, state: state.code, number: state[month] }))); const coordinates = new Map(mapData.map(d => [d.code, {col: d.col, row: d.row}])); const colors = new Map(d3.rollups( data, v => d3.scaleSequential(d3.interpolateRdPu).domain(d3.extent(v.map(s => s.number))), d => d.month)); return Plot.plot({ width: width, height: 90, marginLeft: 0, marginRight: 0, x: {axis: null, round: false}, y: {axis: null}, color: {type: "identity"}, facet: { data: data, x: "month", label: null }, marks: [ Plot.cell(data, { x: d => coordinates.get(d.state).col, y: d => coordinates.get(d.state).row, fill: d => colors.get(d.month)(d.number), inset: 0.15 }) ] }) }34:[] 2f:{"id":"52b0cdffc0acabf5","slug":null,"title":"Interactive Plot Dashboard","thumbnail":"15ada9672d04a6d0f5356942206d813b60ac1e6bf0f32b7f43205071f09e25df","access_level":"public","create_time":"$D2022-11-21T04:23:08.377Z","update_time":"$D2022-11-21T04:23:08.377Z","view_time":null,"first_public_time":"$D2022-11-21T04:23:08.377Z","has_unpublished_edits":null,"fork":{"id":"23d9d61e435f4875","slug":"interactive-plot-dashboard","title":"Interactive Plot Dashboard","owner":{"id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8978ec88c24e0992","login":"benzipperer","name":"Ben Zipperer","avatar_url":"https://avatars-next.observableusercontent.com/952924ac48e7a7cd2485b8d58b1423359044cd451fb2d8aa85af00ca661697e4","tier":"starter_2024"},"version":409,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1bd99dfe6b6a753a","login":"benzipperer","name":"Ben Zipperer","avatar_url":"https://avatars-next.observableusercontent.com/952924ac48e7a7cd2485b8d58b1423359044cd451fb2d8aa85af00ca661697e4","tier":null}],"members":[{"type":"individual","id":"1bd99dfe6b6a753a","login":"benzipperer","name":"Ben Zipperer","avatar_url":"https://avatars-next.observableusercontent.com/952924ac48e7a7cd2485b8d58b1423359044cd451fb2d8aa85af00ca661697e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interactive Plot Dashboard","cells":[{"id":0,"value":"# Interactive Plot Dashboard\nA little bit of this and that... Voila! Here's a nice workaround to make Plot fully interactive while we are still waiting for the native support of event handling to come.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof number = Inputs.radio([\"newcases\", \"newdeaths\"/*, \"cases\", \"deaths\"*/], {label: `${thisMonth} Month-to-date` , value: \"newcases\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"miniPlots = html`\n

${[lineChart(), columnChart()]}

${[trendChart(), barChart()]}

\n ${lastTwelveMonths()}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"### Map and mini plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"cells = {\n const threshold = extent[1] / 3;\n\n return [\n Plot.cell(mapData, {\n x: \"col\",\n y: \"row\",\n rx: 6,\n ry: 6,\n fill: (d) => colors(d.total),\n stroke: (d) => colors(d.total),\n strokeWidth: 0,\n inset: 1\n }),\n Plot.text(mapData, {\n x: \"col\",\n y: \"row\",\n fontWeight: \"bold\",\n fill: (d) => (d.total < threshold ? \"#333\" : \"#eee\"),\n // Plot 0.4 tspan\n text: (d) => `${d.code}\\n${formatNum(d.total)}`\n })\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"columnChart = () => {\n const \n series = currentState ? stateNumbers.find(d => d.code === currentState) : totals,\n title = d => `${d.month}\\n${formatNum(d.value)}`;\n \n return Plot.plot({\n width: width - 300,\n height: 95, \n marginTop: 0,\n x: {\n label: null,\n tickFormat: d => ticks.get(d),\n tickSize: 0\n },\n y: {\n grid: true,\n label: null,\n tickFormat: \"s\", \n //domain: currentState ? d3.extent(tidyAll.map(d => d.value)) : undefined\n },\n marks: [\n xRules,\n Plot.barY(tidy(series), {x: \"month\", y: \"value\", fill: miniPlotColor, fillOpacity: 0.75, title: title})\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"barChart = () => {\n const ticks = d => {\n const date = d.getDate();\n return dailyNumbers.length > 20 ? date % 2 === 0 ? date : \"\" : date;\n },\n title = d => `${formatDate(d.date)}\\n${formatNum(d.value)}`;\n \n return Plot.plot({ \n width: 300,\n height: 190,\n marginTop: 10,\n marginLeft: 30,\n x: {\n grid: true,\n tickFormat: \"s\",\n label: `${currentState ?? \"total\"} daily ${number}`\n },\n y: { \n round: false,\n label: thisMonth,\n labelOffset: 25,\n tickSize: 3,\n tickFormat: ticks,\n },\n marks:[Plot.barX(dailyNumbers, {x: \"value\", y: \"date\", fill: miniPlotColor, fillOpacity: 0.8, title: title})]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"trendChart = () => { \n const chart = dataset => Plot.plot({\n width: 125,\n height: 20,\n x: {axis: null},\n y: {axis: null},\n marks: [Plot.lineY(dataset, {x: \"date\", y: \"number\", stroke: miniPlotColor})]\n });\n\n return html`\n

${currentState ?? \"Total\"} numbers in the last 30 days

Cases

${chart(cases30.get(currentState))}

Deaths

${chart(deaths30.get(currentState))}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"xRules = Plot.ruleX([...ticks.keys()], {stroke: \"#ccc\", strokeWidth: 0.7, strokeDasharray: \"2\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"ticks = {\n const time = d3.scaleTime().domain([months[0], months[months.length - 1]]).range([40, width - 300]);\n const map = new Map(time.ticks().map(d => {\n const key = d3.timeFormat(\"%y-%m\")(d);\n let value = d.getMonth() === 0 && d.getDate() === 1 \n ? d.getFullYear().toString()\n : d3.timeFormat(\"%b\")(d);\n return [key, value];\n }));\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"LTM mini maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`### Data and other stuff...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"**Colors**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"extent = d3.extent(mapData.map(d => d.total))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"miniPlotColor = colors.range()[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"oppositeColor = \"#edc949\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"colors = d3.scaleSequential(d3.interpolateRdPu).domain(extent);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"**Formats**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"formatDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"formatNum = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"**Data & utilities**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"tidy = row => row ? Object.keys(row).slice(2).map(d => ({month: d, value: row[d]})) : null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"thisMonth = d3.timeFormat(\"%B %Y\")(new Date())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"months = Object.keys(totals).slice(2).map(d => d3.timeParse(\"%y-%m\")(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"covidData = getStates(number)\n .map(d => ({code: states.get(d.state), ...d}))\n .filter(d => d.code || d.state === \"Total\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"totals = covidData[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"stateNumbers = covidData.filter(d => d.code)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"dailyNumbers = {\n const thisMonth = new Date().getMonth();\n return tidy(getStatesLastNDays(number, new Date().getDate(), true, true).find(d => d.code === (currentState ?? \"\")))\n .map(d => ({\n date: d3.timeParse(\"%Y/%m/%d\")(d.month),\n value: d.value\n }))\n .filter(d => d.date.getMonth() === thisMonth);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"tidyAll = stateNumbers.flatMap(state => Object.keys(state).slice(2).map(d => ({state: state.code, month: d, value: state[d]})));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"mapData = {\n const months = Object.keys(stateNumbers[0]).slice(2);\n return new GridMap()\n .field({name: \"state\", code: \"code\", values: [months[months.length - 1]]})\n .mapGrid(map)\n .data(stateNumbers)\n .process();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"Data for mini trend charts 📉","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"cases30 = get30Days(\"newcases\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"deaths30 = get30Days(\"newdeaths\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"get30Days = field => {\n const data = getStatesLastNDays(field, 30, true, true).filter(d => d.code !== \"\" || d.state === \"Total\");\n return d3.group(tidy(data), d => d.state);\n\n function tidy(dataset) {\n const \n parse = d => d3.timeParse(\"%Y/%m/%d\")(d),\n filtered = dataset.filter(d => d.code !== \"\" || d.state === \"Total\");\n return filtered.flatMap(state => Object.keys(state).slice(2).map(d => ({\n state: state.code === \"\" ? null : state.code,\n date: parse(d),\n number: state[d]\n })).reverse())\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"**Imports**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {getStates, getStatesLastNDays, map as states} from \"@analyzer2004/covid-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {GridMap, map} from \"@analyzer2004/gridcartogram\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`🌐[ericlo.dev](https://ericlo.dev) 🐱[GitHub Repositories](https://github.com/analyzer2004?tab=repositories) 🐦[Twitter](https://twitter.com/analyzer2004)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"