add driving example

Author: mbostock

test/data/README.md

@@ -43,6 +43,10 @@ https://github.com/hemanrobinson/preattentive/blob/a58dd4795d0ee063a38a2d7bf3381
 ggplot2 “diamonds” dataset (carat and price columns only)
 https://github.com/tidyverse/ggplot2/blob/master/data-raw/diamonds.csv
 
+## driving.csv
+Based on Hannah Fairfield’s Driving Shifts Into Reverse
+https://archive.nytimes.com/www.nytimes.com/imagepages/2010/05/02/business/02metrics.html
+
 ## energy-production.csv
 U.S. Energy Information Administration; monthly energy review, primary energy production by source, Jan. 2022
 https://www.eia.gov/totalenergy/data/monthly/index.php

test/data/driving.csv

@@ -0,0 +1,56 @@
+side,year,miles,gas
+left,1956,3683.6965,2.3829
+right,1957,3722.7648,2.4026
+bottom,1958,3776.8595,2.2539
+top,1959,3912.0962,2.3079
+right,1960,3942.1488,2.2658
+bottom,1961,3984.2224,2.2526
+right,1962,4089.4064,2.2158
+bottom,1963,4230.6536,2.1237
+bottom,1964,4383.9219,2.1039
+bottom,1965,4546.2059,2.1368
+top,1966,4681.4425,2.1421
+bottom,1967,4837.716,2.1408
+right,1968,5048.0841,2.1263
+right,1969,5216.3787,2.0737
+right,1970,5384.6732,2.0118
+bottom,1971,5652.1412,1.9316
+bottom,1972,5979.7145,1.8737
+right,1973,6160.0301,1.9026
+left,1974,5946.6566,2.3447
+bottom,1975,6117.9564,2.3079
+bottom,1976,6400.4508,2.3237
+right,1977,6634.861,2.3592
+bottom,1978,6890.308,2.2288
+left,1979,6755.0714,2.6829
+left,1980,6670.9241,3.2974
+right,1981,6743.0503,3.2961
+right,1982,6836.2134,2.9197
+right,1983,6938.3921,2.6566
+right,1984,7127.7235,2.475
+right,1985,7326.0706,2.3618
+left,1986,7554.4703,1.7605
+top,1987,7776.8595,1.7553
+bottom,1988,8089.4064,1.6842
+left,1989,8395.9428,1.7473
+top,1990,8537.1901,1.8763
+right,1991,8528.1743,1.7776
+right,1992,8675.432,1.6855
+left,1993,8843.7265,1.5974
+bottom,1994,8906.837,1.5842
+bottom,1995,9144.2524,1.5987
+top,1996,9183.3208,1.6737
+right,1997,9405.71,1.6461
+bottom,1998,9577.0098,1.3881
+right,1999,9688.2044,1.4987
+top,2000,9706.2359,1.8947
+left,2001,9685.1991,1.7658
+bottom,2002,9802.4042,1.6381
+right,2003,9853.4936,1.8592
+left,2004,9991.7355,2.1421
+left,2005,10054.846,2.5329
+right,2006,10030.8039,2.7934
+right,2007,10012.7724,2.9487
+left,2008,9871.5252,3.3066
+bottom,2009,9652.1412,2.3776
+left,2010,9592.0361,2.6066

test/output/driving.svg

@@ -0,0 +1,20 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+export default async function() {
+  const driving = await d3.csv("data/driving.csv", d3.autoType);
+  return Plot.plot({
+    inset: 10,
+    grid: true,
+    x: {
+      label: "Miles driven (per person-year) →"
+    },
+    y: {
+      label: "↑ Cost of gasoline ($ per gallon)"
+    },
+    marks: [
+      Plot.line(driving, {x: "miles", y: "gas", curve: "catmull-rom", markerMid: "arrow"}),
+      Plot.text(driving, {filter: d => d.year % 5 === 0, x: "miles", y: "gas", text: d => `${d.year}`, dy: -12})
+    ]
+  });
+}

test/plots/driving.js

@@ -41,6 +41,7 @@ export {default as decathlon} from "./decathlon.js";
 export {default as diamondsCaratPrice} from "./diamonds-carat-price.js";
 export {default as diamondsCaratPriceDots} from "./diamonds-carat-price-dots.js";
 export {default as documentationLinks} from "./documentation-links.js";
+export {default as driving} from "./driving.js";
 export {default as empty} from "./empty.js";
 export {default as emptyLegend} from "./empty-legend.js";
 export {default as emptyX} from "./empty-x.js";