Introduction to ObservableWhat's a pound worth today?The great city population race
Covid cases by US State
Also listed in…
Developer Workshop
viewof measure = Inputs.select([
"Total Cases",
"New Cases in Past Week",
"Total Deaths"
])
viewof state = {
const width = 960;
const height = 600;
const path = d3.geoPath();
let value = null;
const svg = d3
.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
const g = svg.append("g").attr("transform", "translate(0,40)");
svg
.append("g")
.attr("fill", "#ccc")
.selectAll("path")
.data(topojson.feature(us, us.objects["states"]).features)
.enter()
.append("path")
.attr("d", path)
.style("fill", (d) => {
const { id } = d;
const [state] = data.filter(
(d) => parseInt(d.number, 10) === parseInt(id, 10)
);
const statePerCapita = parseFloat(state[measure], 10);
return colorScale(statePerCapita);
})
.on("click", (d) => {
const { id } = d;
const [state] = data.filter(
(d) => parseInt(d.number, 10) === parseInt(id, 10)
);
console.log(state["State/Territory"], state.number, state[measure]);
});
svg
.append("path")
.datum(topojson.mesh(us, us.objects["states"], (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none")
.attr("d", path);
return Object.assign(svg.node(), { value: "Hello" });
}
data = FileAttachment(
"united_states_covid19_cases_deaths_and_testing_by_state@3.csv"
).csv({ typed: true })
perCapita = data.map((d) => parseFloat(d[measure]))
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
