Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen
Public
Edited
Nov 3, 2022
1 star
rawData = FileAttachment("Project_Tycho___Level_1_Data.csv").csv()
// parseData
data = rawData
.map((d) => {
const year = Math.floor(d.epi_week / 100);
const week = d.epi_week % 100; // from 196601 returns 01
return {
state: d.state,
loc: d.loc,
year: year,
week: week,
date: getDateOfTheWeek(week, year),
disease: d.disease,
cases: +d.cases,
incidence: +d.incidence_per_100000
};
})
.sort((a, b) => a.date - b.date)
getDateOfTheWeek(1, 1966)
// getDateOfTheWeek
function getDateOfTheWeek(w, y) {
const d = 1 + (w - 1) * 7;
return d3.utcWeek(new Date(y, 0, d));
}
viewof table_all_data = Inputs.table(search_all_data)
viewof search_all_data = Inputs.search(data)
// histogram y = count and x = year
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "count"}, {x: "year"})),
Plot.ruleY([0])
]
})
// stacked bar chart y = cases and x = year fill by disease
Plot.plot({
color: { legend: true },
marks: [
Plot.rectY(data, Plot.binX({ y: "count" }, { x: "year", fill: "disease" })),
Plot.ruleY([0]),
Plot.ruleY([10000], { stroke: "red" }),
Plot.text(["Threshold"], {
y: 11000,
x: 2010,
fill: "red",
fontWeight: "bold"
})
]
})
// line chart y = incidence, x = date, fill by state highlighted in inputs, filter only to the selected disase in input
addTooltips(
Plot.plot({
color: colorScale,
marks: [
Plot.ruleY([0]),
Plot.line(
data
.slice(0, 100000)
.filter((d) => d.disease === select_disease_line_chart)
.sort((a, b) => {
const a_value = a.state === select_state_line_chart ? 1 : 0;
const b_value = b.state === select_state_line_chart ? 1 : 0;
return a_value - b_value;
}),
Plot.windowY({
x: "date",
y: "incidence",
fill: "state",
fillOpacity: 0,
stroke: (d) =>
d.state === select_state_line_chart ? d.state : "Other state",
strokeOpacity: (d) => (d.state === select_state_line_chart ? 1 : 0.5),
strokeWidth: (d) => (d.state === select_state_line_chart ? 2 : 1),
k: 15,
title: (d) => d.state
})
)
]
})
)
addTooltips(
Plot.plot({
marks: [
Plot.link([{ "power (hp)": 140 }, { "power (hp)": 180 }], {
x: "power (hp)",
y1: 0,
y2: 10
}),
Plot.dot(cars, {
x: "power (hp)",
y: "economy (mpg)",
title: (d) => `${d.name}
${d.year}`
})
]
})
)
viewof table = Inputs.table(cars)
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
// areaY y = cases, x = date, fill = highlight
// area facets by state, same as previous area chart y = cases, x = date, fill = highlight
// input by state
// checkbox disease
// input range of years
// input max years
// scatterplot x = date, y = incidence, stroke = disease, add tooltip
import { addTooltips } from "@mkfreeman/plot-tooltip"
// input disease
// input year range
// box plot x = incidence, y = state, sort by x, filter using inputs above
<!-- add CSS .tick line, line, circle and line -->
// manage inputs to add all
// create colour scale "#1f77b4", "#7f7f7f"
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.
