Recreating Visualisation
Link : https://archive.nytimes.com/www.nytimes.com/imagepages/2010/05/02/business/02metrics.html
import {addTooltips} from "@mkfreeman/plot-tooltip"
data = d3.json("https://raw.githubusercontent.com/vega/vega-datasets/next/data/driving.json");
Inputs.table(data)
Plot.plot({
width: width,
height: 500,
x: {label: "Miles driven per capita each year →", ticks: 7, tickFormat: d => d + " mi"},
y: {label: "Price of a gallon of gasoline ↑", ticks: 4, tickFormat: "$"},
marks: [
Plot.line(data, {x: "miles", y: "gas", strokeWidth: 4, curve: "catmull-rom"}),
Plot.dot(data, {x: "miles", y: "gas", fill: "white", strokeWidth: 4, r: 6, stroke: "black"}),
Plot.text(data, {x: "miles", y: d => d.gas - 0.1, text: "year", fill: "grey", fontSize: 11, fontFamily: "Georgia", fontWeight: 500}),
],
grid: true,
inset: 10
})
{
data.forEach(function (d) {
if(d.year <= 1972)
d["series"] = '1956-72';
else if(d.year <= 1974)
d["series"] = '1973-74';
else if(d.year <= 1981)
d["series"] = '1975-81';
else if(d.year <= 1998)
d["series"] = '1982-98';
else
d["series"] = '1999-2010';
})
}
Plot.plot({
width: width,
height: 250,
x: {label: null, ticks: 4, tickSize: 0, tickFormat: d => d + " mi"},
y: {label: null, ticks: 4, tickSize: 0, tickFormat: "$", domain: [d3.extent(data, d => d.gas)[0], 4]},
facet: {data, x: "series"},
fx: {label: null},
marks: [
Plot.text(data, {x: d3.median(data, d => d.miles), y: 3.8, text: (d, i) => (d.year == 1956 ? "Cheap gas, longer commutes" : d.year == 1973 ? "The Arab oil embargo" : d.year == 1975 ? "Energy Crisis" : d.year == 1982 ? "Record low prices" : d.year == 1999 ? "The swing backward" : ""), fontSize: 14, fontFamily: "Georgia", fontWeight: 800}),
Plot.line(data.slice(), {x: "miles", y: "gas", strokeWidth: 4, stroke: "gainsboro", curve: "catmull-rom"}),
Plot.line(data, {x: "miles", y: "gas", strokeWidth: 4, stroke: "#1e1e1e", curve: "catmull-rom"})
],
grid: true,
inset: 5
})
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.
