csv = FileAttachment("example_cohorts.csv").csv({typed: true})
data = processCohortData(csv)
rollupAllSegments = d3.rollups(csv, v => d3.sum(v, d => d.users), d => d.cohort_date, d => d.period_date)
.flatMap(([cohort_date, values]) =>
values.flatMap(([period_date, users]) =>
({cohort_date, period_date, users})))
selectedSegment = segment === "all"
? processCohortData(rollupAllSegments)
: data.filter(d => d.segment === segment);
numCohortsInSegment = d3.max(selectedSegment, d => d.period_number)
numCohortsOverall = d3.max(data, d => d.period_number)
compareSegments = Array.from(d3.rollup(
data.filter(d => d.period_number > 0 && d.period_number <= segmentPlotPeriodsToShow),
values => ({
period_number: values[0].period_number,
segment: values[0].segment,
mean: d3.mean(values, d => d.percentage),
median: d3.median(values, d => d.percentage)
}),
d => `${d.period_number}/${d.segment}`
).values())
segments = data[0].segment ? Array.from(new Set(data.map(d => d.segment))) : []
dateFormat = d3.utcFormat("%B %d, %Y")
import {CohortGrid, processCohortData} from "@observablehq/cohort-grid"
import {Table} from "@data-workflows/table-validator"
import {legend, swatches} from "@d3/color-legend"
import {toc} from "@observablehq/templates-table-of-instructions"
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.
