Plot.plot({
marks: [
dualAxisY(left, {y: "Close", anchor: "left", color: leftColor}),
dualAxisY(right, {y: "Close", anchor: "right", color: rightColor}),
Plot.lineY(left, Plot.normalizeY("extent", {x: "Date", y: "Close", stroke: leftColor})),
Plot.lineY(right, Plot.normalizeY("extent", {x: "Date", y: "Close", stroke: rightColor}))
]
})
function dualAxisY(data, {y, ticks = 10, tickFormat, ...options} = {}) {
const [y1, y2] = d3.extent(Plot.valueof(data, y));
const scale = d3.scaleLinear().domain([y1, y2]);
return Plot.axisY(d3.ticks(y1, y2, ticks), {...options, y: scale, tickFormat: scale.tickFormat(ticks, tickFormat)});
}
left = FileAttachment("aapl.csv").csv({typed: true})
leftColor = "#4e79a7"
right = FileAttachment("goog.csv").csv({typed: true})
rightColor = "#f28e2c"
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.
