Public
Edited
Jun 5, 2023
Paused
5 forks
25 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 subsamplingMetbrewer 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
Animate a bar chart (OBSOLETE)
Also listed in…
Plot Experiments
barchart = bars.plot({
y: { _domain: [0, 10] },
color: { scheme: "bupu", domain: [-2, 10] }
})
bars = barY(data, { x: (d, i) => i, fill: (d) => d })
data = Array.from({ length: 10 }, d3.randomInt(1, 10))
{
barchart;
do {
const updated = data.map(d3.randomInt(1, 10));
yield updated;
await bars
.transition({ Y: updated, F: updated }, { delay: 1300, duration: 750 })
.end();
} while (true);
}
barY = function (data, options) {
const B = Plot.barY(data, options);
const { render } = B;
const G = [];
let c;
let that;
B.render = function (I, scales, channels, dimensions) {
c = { scales, dimensions };
that = this;
const g = render.apply(this, arguments);
G.push(g);
return g;
};
B.transition = ({ Y, F }, { delay = 500, duration = 1000 } = {}) => {
const y1 = Array.from(Y, () => c.scales.y(0));
const y2 = Array.from(Y, c.scales.y);
// here's how bars dimensions are controlled within Plot.BarY:
const y = that._y(c.scales, { y1, y2 }, c.dimensions);
const height = that._height(c.scales, { y1, y2 }, c.dimensions);
return d3
.selectAll(G)
.selectAll("rect")
.transition()
.delay(delay)
.duration(duration)
.attr("height", height)
.attr("fill", (i) => c.scales.color(F[i]))
.attr("y", y);
};
return B;
}
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.
