Public
Edited
Oct 24, 2023
1 fork
Importers
12 stars
Image Sharpeningd3.blurd3.rankd3.flatGroup, d3.flatRollupd3.moded3.groupSortSet Operationsd3.groups as a hierarchyd3.fsum, d3.Adderd3.cumsumTidy Stacked Area ChartMerging Duplicate Valuesd3.zip, d3.transposed3.bind3.ticksd3.mean, d3.median, and friendsd3.quickselectd3.bisectd3.sumd3.group, d3.rollup, d3.indexd3.countd3.min, d3.max, d3.extentd3.least, d3.greatestd3.pairsd3.crossd3.ascending, d3.descendingd3.merged3.ranged3.permuted3.shuffled3-array 2.0
Time thresholds for d3.bin
Also listed in…
d3-scale
histogram1 = d3.bin()
.value(d => d.date)
.thresholds(20)
(data)
function thresholdTime(n) {
return (data, min, max) => {
return d3.scaleUtc().domain([min, max]).ticks(n);
};
}
histogram2 = d3.bin()
.value(d => d.date)
.thresholds(thresholdTime(20))
(data)
function display(bins) {
const format = d3.utcFormat("%Y-%m-%d");
return md`| start | end | timestamp<sup>1</sup> | #events | median value |
|-----|-----|-----|-----|----|
${bins
.slice(0, 8)
.map(
d =>
`| ${format(d.x0)} | ${format(d.x1)} | ${+d.x0} | ${
d.length
} | ${d3.median(d, d => d.value)}`
)
.join("\n")}
| … etc.|
<small><sup>1</sup> in milliseconds relative to [EPOCH](https://en.wikipedia.org/wiki/Epoch_%28computing%29).
`;
}
data = {
const data = [];
// https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv
await d3.csvParse(await FileAttachment("temperatures.csv").text(), (d, i, columns) => {
for (let i = 1; i < 13; ++i) {
data.push({
date: new Date(Date.UTC(d.Year, i - 1, 1)),
value: +d[columns[i]]
});
}
});
return data;
}
Plot.rectY(data, Plot.binX({y: "median"}, {x: "date", y: "value", thresholds: 20})).plot()
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.
