The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
May 10, 2023
6 forks
Importers
26 stars
Liquid flow velocity in pipesTernary plotMerging hexagonsSpotify Pop ArtistsDistance Angle VoronoiAoC 12: shortest path under constraintsVoronoi labelsHello, olliRough PlotUsing 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 ChartQatar Population PyramidSlope ChartSequence LogosStacked bin dots
Correlation heatmap
Also listed in…
Algorithms
Plot.plot({
marginLeft: 100,
label: null,
color: { scheme: "rdylbu", pivot: 0, legend: true, label: "correlation" },
marks: [
Plot.cell(correlations, { x: "a", y: "b", fill: "correlation" }),
Plot.text(correlations, {
x: "a",
y: "b",
text: (d) => d.correlation.toFixed(2),
fill: (d) => (Math.abs(d.correlation) > 0.6 ? "white" : "black")
})
]
})
correlations = d3.cross(fields, fields).map(([a, b]) => ({
a,
b,
correlation: corr(Plot.valueof(data, a), Plot.valueof(data, b))
}))
// https://en.wikipedia.org/wiki/Correlation#Sample_correlation_coefficient
function corr(x, y) {
const n = x.length;
if (y.length !== n)
throw new Error("The two columns must have the same length.");
const x_ = d3.mean(x);
const y_ = d3.mean(y);
const XY = d3.sum(x, (_, i) => (x[i] - x_) * (y[i] - y_));
const XX = d3.sum(x, (d) => (d - x_) ** 2);
const YY = d3.sum(y, (d) => (d - y_) ** 2);
return XY / Math.sqrt(XX * YY);
}
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.
