viewof selectedStates = { const container = html`

`; const tooltip = new Tooltip(d3.select(container)); function handleClick(event, { id }) { updateState(id); updateFill(event, id); } function handleMouseover(event, { id }) { d3.select(event.target).attr("fill", colors[3]); tooltip.display({ id }, tooltipContents); } function handleMouseleave(event, { id }) { d3.select(event.target).attr("fill", getFillColor(id)); tooltip.hide(); } function handleMousemove(event) { tooltip.move(event); } function updateState(id) { if (state1 === null && state2 === null) { viewof state1.value = id; viewof state2.vaue = null; } else if (state1 !== null && id !== state1 && state2 === null) { viewof state1.value = state1; viewof state2.value = id; } else if (state1 !== null && id === state1) { viewof state1.value = null; viewof state2.value = state2; } else if (state1 !== null && id !== state1 && id === state2) { viewof state1.value = state1; viewof state2.value = null; } else if (state1 === null && id !== state1) { viewof state1.value = id; viewof state2.value = state2; } else if (state1 === null && state2 === id) { viewof state1.value = null; viewof state2.value = null; } viewof state1.dispatchEvent(new CustomEvent("input")); viewof state2.dispatchEvent(new CustomEvent("input")); } function updateFill(event, id) { d3.select(event.target).attr("fill", getFillColor(id)); } function getFillColor(id) { if (id === state1) { return colors[0]; } else if (id === state2) { return colors[1]; } else { return "#e2e2e2"; } } function tooltipContents(d) { return `${statesGeoByFips.get(d.id).properties.name}`; } return container; }