Public
Edited
Oct 12, 2023
4 forks
23 stars
Insert cell
Insert cell
{
const v1 = (d) => d.sales;
const v2 = (d) => d.efficiency;
const y2 = d3.scaleLinear(d3.extent(cars, v2), [0, d3.max(cars, v1)]);
return Plot.plot({
x: {tickFormat: ""}, // no comma for years
y: {axis: "left", label: "sales (M)", transform: (d) => d / 1e6}, // show sales in millions
marks: [
Plot.axisY(y2.ticks(), {color: "steelblue", anchor: "right", label: "efficiency (mpg)", y: y2, tickFormat: y2.tickFormat()}),
Plot.ruleY([0]),
Plot.lineY(cars, {x: "year", y: v1}),
Plot.lineY(cars, Plot.mapY((D) => D.map(y2), {x: "year", y: v2, stroke: "steelblue"}))
]
});
}
Insert cell
cars = FileAttachment("new-passenger-cars.csv").csv({typed: true})
Insert cell

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.
Learn more