viewof data = Inputs.select(
new Map([
["cars", FileAttachment("Car_Insurance_Claim.csv").csv({typed: true})],
["peguins", penguins]
]),
{ label: "dataset" }
)
viewof fields = Inputs.checkbox(data.columns, {
label: "fields",
value: data.columns.filter((c) => data.find((d) => typeof d[c] === "number"))
})
Plot.plot({
marginLeft: 150,
width: 1500,
height: 400,
color: { scheme: "rdylbu", pivot: 0, legend: true, label: "correlation" },
marks: [
Plot.cell(d3.cross(fields, fields), {
fill: ([a, b]) => corr(Plot.valueof(data, a), Plot.valueof(data, b))
}),
Plot.text(d3.cross(fields, fields), {
text: ([a, b]) =>
corr(Plot.valueof(data, a), Plot.valueof(data, b)).toFixed(2),
fill: "white",
stroke: "rgba(0,0,0,.3)"
})
]
})
// 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.
