Liquid flow velocity in pipesTernary plotMerging hexagonsSpotify Pop ArtistsDistance Angle VoronoiAoC 12: shortest path under constraintsVoronoi labelsHello, olliRough PlotCorrelation heatmapUsing d3.blur with PlotJob vacancies in AustraliaWarming stripesAssemblée nationale 2017-2022Minimalist dodge plotPlot.image borderAge/Handgroup, bin and sortPlot.stereoHistogramVariants of SARS-Cov-2 in EuropeVariants du SARS-CoV-2 en FranceTopological subsamplingAnimate a bar chart (OBSOLETE)Metbrewer color schemesHow many books was I reading?Road traffic under COVID restrictions (France)Convex hull mark (#154)Hello, Open MeteoK-means binningMatrix diagramQuasi-random Monte Carlo integrationDifference chartELD ViewerPlot early birdROC curveSkies PlotHappy anniversary, Project Gutenberg!The Sun’s analemmaObservable Plot in a Web WorkerregressionEdit data with PlotConical gradient PlotPlot HyperboloidExperimental Plot BeeswarmThe ARPANET in December 1969Irregular bins histogramLog-scale histogramDatabase Outage Plotcount distinct (#412)Scatterplot matrixIrregular Bar ChartFacet exclusion transformCanvas PlotHow to attach a plot to a DOM elementRenko ChartWaffle ChartQatar Population PyramidSlope ChartSequence LogosStacked bin dots
from columnar to tidy data
untidy = d3.zip(
d3.cumsum({ length: 130 }, d3.randomNormal()),
d3.cumsum({ length: 130 }, d3.randomNormal())
)
timeof = {
const startDate = new Date(2010, 0, 1);
return (index) => d3.utcDay.offset(startDate, index);
}
Plot.plot({
marks: [
Plot.lineY(untidy, { x: (d, i) => timeof(i), y: "0", stroke: "green" }),
Plot.lineY(untidy, { x: (d, i) => timeof(i), y: "1", stroke: "red" }),
Plot.ruleY([0])
]
})
tidy = untidy.flatMap(([v1, v2], index) => [
{ series: "a", value: v1, time: timeof(index) },
{ series: "b", value: v2, time: timeof(index) }
])
Plot.plot({
facet: { data: tidy, x: "series" },
marks: [
Plot.frame(),
Plot.lineY(tidy, { x: "time", y: "value", stroke: "series" }),
Plot.ruleY([0])
]
})
Plot.plot({
facet: { data: tidy, x: "series" },
marks: [
Plot.frame(),
Plot.lineY(tidy, {
x: "time",
y: "value",
z: "series",
facet: "exclude",
stroke: "lightgray",
strokeWidth: 0.5
}),
Plot.lineY(tidy, { x: "time", y: "value", stroke: "series" }),
Plot.ruleY([0])
]
})
{
const shared = Plot.plot({
width: width / 2,
marks: [
Plot.lineY(untidy, { x: (d, i) => timeof(i), y: "0" }),
Plot.lineY(untidy, { x: (d, i) => timeof(i), y: "1" })
]
});
const x = shared.scale("x");
const y = shared.scale("y");
return html`<div style="display: flex">
${[
{ y: "0", stroke: "green" },
{ y: "1", stroke: "red" }
].map((opts) =>
Plot.plot({
width: width / 2,
marks: [
Plot.frame(),
Plot.ruleY([0]),
Plot.lineY(untidy, { x: (d, i) => timeof(i), ...opts })
],
x,
y
})
)}
</div>`;
}
Plot.plot({
width,
facet: { data: ["a", "b"], x: (d) => d },
marks: [
Plot.frame(),
Plot.lineY(untidy, {
transform: (data, facets) => ({
data: data.flat(), // shortcut for, more generally, data.flatMap(d => [first, second…])
facets: [
d3.range(0, 2 * data.length, 2), // evens: column "0"
d3.range(1, 2 * data.length, 2) // odds: column "1"
]
}),
x: (d, i) => timeof(Math.floor(i / 2)),
y: (d) => d,
facet: true,
stroke: (d, i) => (i % 2 === 0 ? "a" : "b"),
strokeWidth: 0.5
}),
Plot.ruleY([0])
]
})
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.
