Published
Edited
Jan 1, 2022
1 fork
Importers
15 stars
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 dataAge/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 ChartSlope ChartSequence LogosStacked bin dots
Qatar Population Pyramid
Also listed in…
Plot Experiments
chart = hatchPlot({
color: {
range: [
textures.circles().size(4),
textures.lines().orientation("3/8").size(7).strokeWidth(0.25)
]
},
x: {
tickFormat: (d) => d3.format("~s")(Math.abs(d)),
label: "←male female→ (thousands)",
nice: true,
round: true
},
y: {
domain: d3.groupSort(
data,
(v) => parseInt(v[0].age),
(d) => d.age
),
reverse: true
},
marginLeft: 60,
marks: [
Plot.barX(data, {
x: (d) => d["population"] * (1 - 2 * (d["sex"] === "male")),
y: "age",
fill: "sex",
inset: 2
}),
Plot.barX(data, {
x: (d) => d["population"] * (1 - 2 * (d["sex"] === "male")),
y: "age",
stroke: "black"
})
],
height: width * 0.9
})
function hatchPlot(plot) {
const textures = plot.color?.range?.slice();
if (textures) {
plot.color.range.forEach((texture, i) => texture.url && (plot.color.range[i] = texture.url()));
}
plot = Plot.plot(plot);
if (textures) {
for (const texture of textures) {
if (texture.apply) d3.select(plot).call(texture);
}
}
return plot;
}
data = FileAttachment("data.json").json()
textures = require("textures")
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.
