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
rawData = FileAttachment("Project_Tycho___Level_1_Data.csv").csv()
data = rawData
.map((d) => {
const year = Math.floor(d.epi_week / 100);
const week = d.epi_week % 100; // remanent from division
return {
state: d.state,
loc: d.loc,
year: year,
week: week,
date: getDateOfWeek(week, year),
disease: d.disease,
cases: +d.cases,
incidence: +d.incidence_per_100000
};
})
.sort((a, b) => new Date(a.date) - new Date(b.date))
function getDateOfWeek(w, y) {
// brings Sunday number
var d = 1 + (w - 1) * 7; // 1st of January + 7 days for each week
return d3.utcWeek(new Date(y, 0, d));
}
viewof table_all_data = Inputs.table(search_all_data)
viewof search_all_data = Inputs.search(data)
new_data = data.filter((d) => d.year >= 2005)
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({ y: "count" }, { x: "year" })), // fill: "disease"
Plot.ruleY([0])
]
})
Plot.plot({
marginLeft: 50,
color: { legend: true },
marks: [
Plot.rectY(
data,
Plot.binX({ y: "count" }, { x: "year", y: "cases", fill: "disease" })
),
Plot.ruleY([0])
]
})
data.filter(d => d.year >= 1990 && d.year <= 2000)
viewof select_disease_line_chart = Inputs.select(
d3.groupSort(
data,
(g) => g.disease,
(d) => d.disease
),
{
label: "Select one",
value: "All"
}
)
viewof highlight_state_line_chart = Inputs.select(produceSelects("state"), {
label: "Highlight one"
})
Plot.plot({
color: colorScale,
height: 300,
marks: [
Plot.line(
data
.slice(0, 100000)
.filter((d) => d.disease === select_disease_line_chart)
.sort((a, b) => {
const val_a = a.state === highlight_state_line_chart ? 1 : 0;
const val_b = b.state === highlight_state_line_chart ? 1 : 0;
return val_a - val_b;
}),
Plot.windowY({
x: "date",
y: "incidence",
fill: "state",
fillOpacity: 0,
stroke: (d) =>
d.state === highlight_state_line_chart ? "highlight" : "bkg", // from disease to state
k: 15, // rolling average
reduce: "mean",
opacity: (d) => (d.state === highlight_state_line_chart ? 1 : 0.25),
strokeWidth: (d) => (d.state === highlight_state_line_chart ? 3 : 0.5)
})
),
Plot.ruleY([0])
]
})
areaY = {
const this_data = data
.slice(0, 100000)
.filter((d) => d.disease === select_disease_line_chart);
const summary_year = d3.rollups(
this_data,
(g) => d3.sum(g, (d) => d.cases),
(d) => d.date
);
return Plot.plot({
color: colorScale,
height: 300,
marks: [
Plot.areaY(
summary_year,
Plot.windowY({
x: (d) => d[0],
y: (d) => d[1],
fill: (d) => "bkg",
opacity: 0.25,
reduce: "mean",
k: 15
})
),
Plot.area(
this_data.filter((d) => d.state === highlight_state_line_chart),
Plot.windowY({
sort: "date",
x1: "date",
x2: "date",
y1: 0,
y2: "cases",
fill: (d) => "highlight", // from disease to state
opacity: 1,
k: 15, // rolling average
reduce: "mean"
})
),
Plot.ruleY([0])
]
});
}
area_facets = {
const this_data = data
.slice(0, 100000)
.filter((d) => d.disease === select_disease_line_chart);
return Plot.plot({
color: colorScale,
grid: true,
width: width,
marginBottom: 30,
facet: {
data: this_data,
columns: true,
x: "state"
},
x: { axis: "Bottom" },
marks: [
Plot.area(
this_data,
Plot.windowY({
sort: "date",
x1: "date",
x2: "date",
y1: 0,
y2: "cases",
fill: (d) =>
d.state === highlight_state_line_chart ? "highlight" : "bkg", // from disease to state
opacity: 1,
k: 15, // rolling average
reduce: "mean"
})
),
Plot.ruleY([0])
]
});
}
viewof highlight_state_scatter = Inputs.select(produceSelects("state"), {
label: "Highlight one",
value: "MA"
})
viewof checkbox_scatterplot = Inputs.checkbox(
d3.groupSort(
data,
(g) => g.disease,
(d) => d.disease
),
{ label: "Select some", value: ["HEPATITIS A"] }
)
viewof range_min_scatter = Inputs.range(
d3.extent(data, (d) => d.year),
{ label: "Minimum Year", step: 1 }
)
viewof range_max_scatter = Inputs.range(
[range_min_scatter, d3.max(data, (d) => d.year)],
{ label: "Maximum Year", step: 1 }
)
import { addTooltips } from "@mkfreeman/plot-tooltip"
box_plot = {
const this_data = data.filter(
(d) => d.disease === select_disease_boxplot && d.year === range_year_boxplot
);
const max_x = d3.max(
data.filter((d) => d.disease === select_disease_boxplot),
(d) => d.incidence
);
const states = d3.groupSort(
this_data,
(g) => g.state,
(d) => d.state
);
return Plot.plot({
grid: true,
className: "plot",
y: {
label: `↑ States (${states.length} found)`,
labelAnchor: "top"
},
x: { domain: [0, 20] },
marks: [
Plot.boxX(this_data, {
x: "incidence",
y: "state",
sort: { y: "x" },
stroke: "#7d7d7d"
})
]
});
}
<style>
.plot .tick line {
stroke-dasharray: 2px 2px;
}
.plot [aria-label="rule"] line {
stroke-width: 1;
}
.plot [aria-label="dot"] circle {
opacity: 0.5;
}
.plot [aria-label="tick"] line {
stroke: black;
}
</style>
function produceSelects(input) {
const map = d3.groupSort(
data,
(g) => g[input],
(d) => d[input]
);
map.unshift("All");
return map;
}
colorScale = ({
range: ["#1f77b4", "#7f7f7f"],
domain: ["highlight", "bkg"],
unknown: "#e2e2e2",
legend: true
})
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.
