The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Sep 21, 2021
17 forks
Importers
36 stars
1
Examples for Data Analysts
Discovering Date PatternsCorrelation over timeTargets vs. Actuals
User Retention with Segments
Introduction to dataSpreadsheet-based data collaboration gets supercharged with ObservableSummary TableConnecting to databasesObservable for Excel Users: IntroductionData Loading and CleanupAdding Columns to DataAnalyzing DataModeling in ObservablePlot for Matplotlib Users: OverviewUpset Plots with Observable PlotDistributions and summary statistics - a collection of Plot examplesSankey With Animated GradientsHacking Power BI Charts with PlotNF Difference ChartGreenhouse gas emission projectionsConcentration values vs. TimePlot: regression
Also listed in…
Templates: Product Insights
Templates
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
csv = FileAttachment("example_cohorts.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = processCohortData(csv)
Insert cell
Insert cell
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})))
Insert cell
selectedSegment = segment === "all"
? processCohortData(rollupAllSegments)
: data.filter(d => d.segment === segment);
Insert cell
numCohortsInSegment = d3.max(selectedSegment, d => d.period_number)
Insert cell
numCohortsOverall = d3.max(data, d => d.period_number)
Insert cell
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())
Insert cell
segments = data[0].segment ? Array.from(new Set(data.map(d => d.segment))) : []
Insert cell
dateFormat = d3.utcFormat("%B %d, %Y")
Insert cell
Insert cell
import {CohortGrid, processCohortData, validationRules} from "@observablehq/cohort-grid"
Insert cell
import {Table} from "@data-workflows/table-validator"
Insert cell
import {legend, swatches} from "@d3/color-legend"
Insert cell
import {toc} from "@observablehq/templates-table-of-instructions"
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more