Public
Edited
Jul 12, 2024
Importers
Plot.plot({
y: {
// domain: [15, 87],
ticks: 7,
grid: true,
label: "↑ temperature (°F)"
},
x: {
inset: 4
},
// facet: { data: data, y: "Trading partner", marginRight: 90 },
marks: [
differenceY(wide_data, {
x: "Date",
y1: "US dollar_Russia_Export",
y2: "US dollar_Russia_Import",
curve: "step",
fill: "orange"
}),
differenceY(wide_data, {
x: "Date",
y2: "US dollar_Russia_Export",
y1: "US dollar_Russia_Import",
curve: "step",
fill: blue
}),
Plot.line(wide_data, {
x: "Date",
y: "US dollar_Russia_Import",
// stroke: "Type",
curve: "step"
})
],
width,
height: 450
})
wider_data
Type Table, then Shift-Enter. Ctrl-space for more options.
differenceY = (data, options) => {
class DifferenceY extends Plot.Area {
constructor(data, {x, y1, y2, ...options} = {}) {
y1 = maybeZero(y1);
y2 = maybeZero(y2);
super(data, {...options, x1: x, x2: undefined, y1, y2});
}
render(I, scales, {x1: X, y1: Y1, y2: Y2 = Y1}, {width}) {
const g = super.render(...arguments);
const uid = DOM.uid();
const line = d3.line().x(i => X[i]).y(i => Y1[i]).curve(this.curve);
d3.select(g)
.style("clip-path", uid)
.append("defs")
.append("clipPath")
.attr("id", uid.id)
.append("path")
.attr("d", `
${line(I)}
L${width},${Y1[I[I.length-1]]} L${width},0 L0,0 M${width},${Y1[I[0]]} Z`
);
return g;
}
}
return new DifferenceY(data, options);
}
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.
