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 borderfrom columnar to tidy datagroup, 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
Age/Hand
// curve distribution function suggested by @mootari, thanks!
population = {
const random = d3.randomLcg(42);
const curve = (t) => (1 - t ** 0.4) ** 0.75;
return Array.from({ length: 40 }, () => ({
age: (curve(random()) * 100) | 0,
hand: ["Y", "L", "R", "Z"][(0.9 + random() * 2.2) | 0]
}));
}
Plot.plot({
height: 100,
marks: [
Plot.barY(population, Plot.groupX({ y: "count" }, { x: "age" })),
Plot.ruleY([0])
]
})
Plot.plot({
height: 100,
marks: [
Plot.barY(
population,
Plot.groupX(
{ y: "count" },
{
x: (d) =>
`${5 * Math.floor(d.age / 5)}-${5 + 5 * Math.floor(d.age / 5)}`
}
)
),
Plot.ruleY([0])
]
})
Plot.plot({
height: 300,
marks: [
Plot.rectY(
population,
Plot.binX(
{ y: "count" },
{ x: "age", thresholds: [5, 10, 18, 25, 35, 50, 65] }
)
),
Plot.ruleY([0])
]
})
Plot.plot({
height: 100,
marks: [
Plot.rect(
population,
Plot.stackY(
Plot.binX(
{ y: "count" },
{
x: "age",
thresholds: 90
}
)
)
),
Plot.ruleY([0])
]
})
Plot.plot({
height: 250,
marks: [
Plot.rect(
population,
Plot.stackY(
Plot.binX(
{ y: "count" },
{
x: "age",
interval: 5
}
)
)
),
Plot.ruleY([0])
]
})
Plot.plot({
height: 250,
marks: [
Plot.rectY(
population,
Plot.binX({ y: "count" }, { x: "age", fill: "hand", interval: 5 })
),
Plot.ruleY([0])
],
color: { legend: true }
})
Plot.plot({
height: 250,
marks: [
Plot.rectY(
population,
Plot.binX(
{ y: "count" },
{
x: "age",
fill: (d) => (["R", "L"].includes(d.hand) ? d.hand : "other"),
interval: 5
}
)
),
Plot.ruleY([0])
],
color: { legend: true }
})
Plot.plot({
height: 250,
marks: [
Plot.rectY(
population,
Plot.binX(
{ y: "count" },
{
x: "age",
filter: (d) => d.age >= ageMin && d.age < ageMax,
fill: (d) => (["R", "L"].includes(d.hand) ? d.hand : "other"),
interval: 5
}
)
),
Plot.ruleY([0])
],
color: { legend: true }
})
Plot.plot({
height: 250,
marks: [
Plot.rectY(
population,
Plot.binX(
{ y: "count" },
{
x: "age",
fill: (d) => (["R", "L"].includes(d.hand) ? d.hand : "other"),
interval: 5,
opacity: 0 // 💡 invisible marks!
}
)
),
Plot.rectY(
population,
Plot.binX(
{ y: "count" },
{
x: "age",
filter: (d) => d.age >= ageMin && d.age < ageMax,
fill: (d) => (["R", "L"].includes(d.hand) ? d.hand : "other"),
interval: 5
}
)
),
Plot.ruleY([0])
],
color: { legend: true }
})
Plot.plot({
height: 250,
marks: [
Plot.rectY(
population,
Plot.filter(
([d]) => d.age >= ageMin && d.age < ageMax,
Plot.stackY(
Plot.binX(
{ y: "count" },
{
x: "age",
fill: (d) => (["R", "L"].includes(d.hand) ? d.hand : "other"),
interval: 5
}
)
)
)
),
Plot.ruleY([0])
],
color: { legend: true }
})
Plot.plot({
height: 250,
marks: [
Plot.rectY(
population,
Plot.binX(
{ y: "count" },
{
x: "age",
fill: (d) => (["R", "L"].includes(d.hand) ? d.hand : "other"),
interval: 5
}
)
),
Plot.rectY(
population,
Plot.binX(
{ y: "count" },
{
x: "age",
filter: (d) => !(d.age >= ageMin && d.age < ageMax),
fill: "lightgray",
interval: 5
}
)
),
Plot.ruleY([0])
],
color: { 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.
