Example things I like: geometry, trippy geometry, recursion, maps. 👌
Public
Edited
Oct 27, 2022
1 star
// data.map((d) => ({ ...d, age: d.age + Math.random() * 0.1 }))
<style>
.plot {
font-size: ${fontSizePixels}px;
}
</style>
viewof fontSizePixels = Inputs.range([10, 40], { step: 1 })
function plot(options) {
const p = Plot.plot({
// marginLeft: fontSizePixels * 2 + 10,
// marginRight: fontSizePixels * 2 + 10,
// marginTop: fontSizePixels + 30,
// marginBottom: fontSizePixels * 2 + 10,
// width,
// height: width / 1.6,
...options,
x: {
ticks: Math.round(width / 100),
nice: true,
...options.x
},
y: {
ticks: Math.round(width / 1.6 / 100),
nice: true,
...options.y
}
});
// d3.select(p).classed("plot", true);
return p;
}
plot({
x: {
tickFormat: "s",
label: "Income →"
},
marks: [
Plot.rectY(
data,
Plot.binX({ y: "count", thresholds: 30 }, { x: "inc", fill: "#ccc" })
),
Plot.ruleX([d3.mean(data, (d) => d.inc)], {
stroke: "red",
strokeWidth: 3
}),
Plot.ruleX([d3.median(data, (d) => d.inc)], {
stroke: "blue",
strokeWidth: 3
}),
Plot.ruleY([0])
]
})
Inputs.table(data)
sampleCorrelation("lng", "whh")
plot({
// width: width * 0.8,
// height: width * 0.8,
marks: [Plot.dot(data, { x: "lng", y: "whh", r: 7, fill: "orange" })]
})
sampleCorrelation("lng", "ehh")
plot({
// width: width * 0.8,
// height: width * 0.8,
marks: [Plot.dot(data, { x: "lng", y: "ehh", r: 7, fill: "blue" })]
})
plot({
// width: width * 0.8,
// height: width * 0.8,
marks: [
Plot.dot(data, { x: "lng", y: "whh", r: 7, fill: "orange" }),
Plot.dot(data, { x: "lng", y: "ehh", r: 7, fill: "blue" })
]
})
sampleCorrelation("cl", "whh")
sampleCorrelation("cl", "ehh")
plot({
// width: width * 0.8,
// height: width * 0.8,
y: {
label: "↑ Hip hop"
},
marks: [
Plot.dot(data, { x: "cl", y: "whh", r: 7, fill: "orange" }),
Plot.dot(data, { x: "cl", y: "ehh", r: 7, fill: "blue" })
]
})
sampleCorrelation("lng", "cl")
plot({
// width: width * 0.8,
// height: width * 0.8,
marks: [Plot.dot(data, { x: "lng", y: "cl", r: 7, fill: "blue" })]
})
sampleCorrelation("age", "cl")
trend_age_cl = trendLine(data, d => d.age, d => d.cl, {stroke: "orange", strokeWidth: 3})
function trendLine(data, getX, getY, options) {
const points = data.map((d) => [getX(d), getY(d)]);
const [x1, x2] = d3.extent(points, (d) => d[0]);
const fit = ss.linearRegression(points);
const f = ss.linearRegressionLine(fit);
const [y1, y2] = [x1, x2].map(f);
return {
fit,
plot: Plot.line(
[
[x1, y1],
[x2, y2]
],
options
)
};
}
ss = import("simple-statistics@7.8.0")
"cl ehh whh age".split(" ").map((key) => d3.deviation(data, (d) => d[key]))
"cl ehh whh age".split(" ").map((key) => d3.mean(data, (d) => d[key]))
Plot.plot({
marks: [Plot.dot(data, { x: "age", y: (d) => d.ehh + d.whh })]
})
md`## s = ${d3.format(".1f")(d3.mean(data, (d) => d.height))}`
hist("height", { sigmaCount: 1 })
hist("height", { sigmaCount: 2 })
function colorLegend(entries, options) {
return html`<div style="display: flex; align-items: center; font-family: sans-serif; font-size: ${fontSizePixels}px">${entries.map(
({ label, color }) =>
html`<div><div style="display: inline-block; margin-left: 20px; margin-right: 5px; background-color: ${color}; width: ${fontSizePixels}px; height: ${fontSizePixels}px; transform: translateY(${
fontSizePixels / 10
}px);"></div><span>${label}</span></div>`
)}</div>`;
}
vmdata = {
const seed = 1;
const rand = d3.randomUniform.source(d3.randomLcg(seed))(1, 11);
const data = Array.from({ length: 6 }, rand).map((d, i) => [
i + 1,
Math.round(d)
]);
return data;
}
plot({
x: {
ticks: 0,
domain: [0.5, vmdata.length + 0.5]
},
y: {
domain: [-10, 10]
},
marks: [
Plot.dot(vmdata, { fill: "blue", r: 10 }),
Plot.ruleY([d3.mean(vmdata, (d) => d[1])], {
stroke: "red",
strokeWidth: 3
}),
Plot.ruleY([0])
]
})
{
const µ = d3.mean(vmdata, (d) => d[1]);
return plot({
x: {
ticks: 0,
domain: [0.5, vmdata.length + 0.5]
},
y: {
domain: [-10, 10]
},
marks: [
Plot.dot(vmdata, {
fill: "blue",
r: 10,
x: (d) => d[0],
y: (d) => d[1] - µ
}),
Plot.ruleY([], {
stroke: "red",
strokeWidth: 3
}),
Plot.ruleY([0])
]
});
}
{
const µ = d3.mean(vmdata, (d) => d[1]);
return plot({
x: {
ticks: 0,
domain: [0.5, vmdata.length + 0.5]
},
y: {
domain: [-10, 10]
},
marks: [
Plot.dot(vmdata, {
fill: "blue",
r: 10,
x: (d) => d[0],
y: (d) => (d[1] - µ) ** 2
}),
Plot.ruleY([], {
stroke: "red",
strokeWidth: 3
}),
Plot.ruleY([0])
]
});
}
{
const µ = d3.mean(vmdata, (d) => d[1]);
const v = d3.variance(vmdata, (d) => d[1]);
return plot({
y: {
domain: [-10, 10]
},
x: {
ticks: 0,
domain: [0.5, vmdata.length + 0.5]
},
marks: [
Plot.dot(vmdata, {
fill: "blue",
r: 10,
x: (d) => d[0],
y: (d) => (d[1] - µ) ** 2
}),
Plot.ruleY([v], {
stroke: "red",
strokeWidth: 3
}),
Plot.ruleY([0])
]
});
}
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.
