The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
May 27, 2024
1 fork
Importers
6 stars
zoom(
Plot.plot({
x: {
transform: (d) => d3.utcYear.offset(d, 2000 - d.getUTCFullYear()),
tickFormat: ((a) => (d) => a(d.getUTCMonth()))(Plot.formatMonth()),
line: true
},
y: { nice: true, grid: true, label: "↑ ice extent" },
marks: [
Plot.dot(data, {
x: "date",
y: "extent",
title: ({ date }) => date.getUTCFullYear(),
fill: ({ date }) => date.getUTCFullYear(),
r: 0.75
})
]
})
)
function zoom(chart) {
// creates an intermediary layer which takes the transform
const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
for (const s of [...chart.children]) g.appendChild(s);
chart.appendChild(g);
const zoom = d3
.zoom()
.on("zoom", ({ transform }) => g.setAttribute("transform", transform));
d3.select(chart).call(zoom);
return chart;
}
{
const div = d3.create("div");
const plotDiv = div.append("div");
function insertPlot({ k, x, y }) {
const plot = Plot.plot({
x: {
transform: (d) => d3.utcYear.offset(d, 2000 - d.getUTCFullYear()),
//tickFormat: ((a) => (d) => a(d.getUTCMonth()))(Plot.formatMonth()),
line: true,
range: [50 + x, width * k + x]
},
y: { nice: true, grid: true, label: "↑ ice extent" },
marks: [
Plot.dot(data, {
x: "date",
y: "extent",
title: ({ date }) => date.getUTCFullYear(),
fill: ({ date }) => date.getUTCFullYear(),
r: 0.75
})
]
});
plotDiv.html("").append(() => plot);
}
insertPlot({ k: 1, x: 0, y: 0 });
const zoom = d3.zoom().on("zoom", ({ transform }) => insertPlot(transform));
div.call(zoom);
return div.node();
}
data
{
const div = d3.create("div");
const plotDiv = div.append("div");
const domain0 = d3.extent(Plot.valueof(data, "date"), (d) =>
d3.utcYear.offset(d, 2000 - d.getUTCFullYear())
);
const plot = (xDomain) =>
Plot.plot({
x: {
transform: (d) => d3.utcYear.offset(d, 2000 - d.getUTCFullYear()),
//tickFormat: ((a) => (d) => a(d.getUTCMonth()))(Plot.formatMonth()),
line: true,
domain: xDomain,
clamp: true
},
y: { nice: true, grid: true, label: "↑ ice extent" },
marks: [
Plot.dot(data, {
x: "date",
y: "extent",
title: ({ date }) => date.getUTCFullYear(),
fill: ({ date }) => date.getUTCFullYear(),
r: 0.75
})
]
});
function insertPlot(xDomain) {
const chart = plot(xDomain);
plotDiv.html("").append(() => chart);
return chart.scale("x");
}
const xScale = insertPlot();
const l = d3.scaleUtc();
function scaledDomain({ k, x }) {
l.domain(xScale.domain).range(xScale.range);
return [
l.invert((xScale.range[0] - x) / k),
l.invert((xScale.range[1] - x) / k)
];
}
const zoom = d3
.zoom()
.on("zoom", ({ transform }) => insertPlot(scaledDomain(transform)));
div.call(zoom);
return div.node();
}
{
let C;
const plot = Plot.plot({
x: {
transform: (d) => d3.utcYear.offset(d, 2000 - d.getUTCFullYear()),
//tickFormat: ((a) => (d) => a(d.getUTCMonth()))(Plot.formatMonth()),
line: true,
range: [50, width]
},
y: { nice: true, grid: true, label: "↑ ice extent" },
marks: [
Plot.dot(data, {
x: "date",
y: "extent",
title: ({ date }) => date.getUTCFullYear(),
fill: ({ date }) => date.getUTCFullYear(),
r: 0.75,
render: (index, scales, values, dimensions, context, next) => {
const g = next(index, scales, values, dimensions, context);
C = {g, values, dimensions};
return g
}
})
],
figure: true
});
const zoom = d3.zoom().on("zoom", ({ transform }) => {
// TODO: hide the points that go outside the frame
d3.select(C.g).selectAll("circle")
.attr("cx", (i) => transform.applyX(C.values.x[i]))
.style("opacity", (i) => transform.applyX(C.values.x[i]) < C.dimensions.marginLeft ? 0.2 : 1); // etc.
// TODO: also change the x axis
// TODO: also update the pointer transform (for tip: true)
});
d3.select(plot).call(zoom);
return plot;
}
import { data as data0 } from "@fil/plot-cyclical-time-scale"
data = data0.filter((d) => d.date.getFullYear() > 2004) // filtering otherwise everything is too slow
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.
