viewof currentState = { const mapWidth = 500, 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: `Cumulative total of ${number} `, tickFormat: "s", tickSize: 4 })}

Coronavirus (Covid_19) statistics cases and deaths in Morocco

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].Totaldescasconfirmes); 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].Region; } function updateState(state) { map.value= state map.dispatchEvent(new CustomEvent("input")); } }