29:null 2a:["$","title",null,{"children":"Connected scatterplot drives into itself | Toph Tucker | Observable"}] 2f:T4a2,But a connected scatterplot plots pairs time series without explicitly showing time, so the eye relies on a regular interval to infer its march. To fill in the gaps, we need to find more data. The _Times_ graphic cites the Energy Information Administration, Federal Highway Administration, and Brookings Institution. Mike’s original notebook uses a CSV that seems to match the _Times_ version. Noah Veltman’s [variant](https://blocks.roadtolarissa.com/veltman/87596f5a256079b95eb9) (which also incorporates fuel efficiency!) links to sources that are now outdated or broken. Good thing we have [FRED](https://new.observablehq.com/@tophtucker/federal-reserve-economic-data)! We only have partial data for 2026, but there’ve been big moves motivating the fresh look at all this, so I’ll include it. For miles per person per year, we take [Vehicle Miles Traveled (TRFVOLUSM227NFWA)](https://fred.stlouisfed.org/series/TRFVOLUSM227NFWA), from the FHA, and divide it by [Population (POPTHM)](https://fred.stlouisfed.org/series/POPTHM), from the Bureau of Economic Analysis. That seems to be a pretty good match. (For 2026, I extrapolate based on the fraction of the year elapsed.)30:Te06,chart = { replay; // Declare the chart dimensions and margins. const width = 928; const height = 720; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; // Declare the positional encodings. const x = d3.scaleLinear() .domain(d3.extent(driving, d => d.miles)).nice() .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain(d3.extent(driving, d => d.gas)).nice() .range([height - marginBottom, marginTop]); const line = d3.line() .curve(d3.curveCatmullRom) .x(d => x(d.miles)) .y(d => y(d.gas)); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const l = length(line(driving)); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", -height) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", width - 4) .attr("y", -4) .attr("font-weight", "bold") .attr("text-anchor", "end") .attr("fill", "currentColor") .text("Miles per person per year")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(null, "$.2f")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width) .attr("stroke-opacity", 0.1)) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Cost per gallon")); svg.append("path") .datum(driving) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", `0,${l}`) .attr("d", line) .transition() .duration(5000) .ease(d3.easeLinear) .attr("stroke-dasharray", `${l},${l}`); svg.append("g") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", 2) .selectAll("circle") .data(driving) .join("circle") .attr("cx", d => x(d.miles)) .attr("cy", d => y(d.gas)) .attr("r", 3); const label = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll() .data(driving) .join("text") .attr("transform", d => `translate(${x(d.miles)},${y(d.gas)})`) .attr("fill-opacity", 0) .text(d => d.year) .attr("stroke", "white") .attr("paint-order", "stroke") .attr("fill", "currentColor") .each(function(d) { const t = d3.select(this); switch (d.side) { case "top": t.attr("text-anchor", "middle").attr("dy", "-0.7em"); break; case "right": t.attr("dx", "0.5em").attr("dy", "0.32em").attr("text-anchor", "start"); break; case "bottom": t.attr("text-anchor", "middle").attr("dy", "1.4em"); break; case "left": t.attr("dx", "-0.5em").attr("dy", "0.32em").attr("text-anchor", "end"); break; } }); label.transition() .delay((d, i) => length(line(driving.slice(0, i + 1))) / l * (5000 - 125)) .attr("fill-opacity", 1); return svg.node(); }31:T53d,But no amount of fiddling with scales will prevent the self-intersection. The intersections do have _meaning_, as covered in the excellent paper “[The Connected Scatterplot for Presenting Paired Time Series](http://steveharoz.com/research/connected_scatterplot/)” by Steve Haroz, Robert Kosara, and Steven Franconeri, linked in Mike’s D3 example. Intersections mean that the pair have returned to a previous state. But these are not tidy loops that would indicate autocorrelated oscillations; they look pretty noisy. It is _interesting_ to draw attention to an outbreak of stagnation, and brings to mind Jacques Barzun on decadence: >“The forms of art as of life seem exhausted, the stages of development have been run through. Institutions function painfully. Repetition and frustration are the intolerable result.” But I think most readers will just be confused. The legibility of the connected scatterplot — in particular, the reader’s ability to infer the march of time — depends on continually breaking new ground in the two-dimensional state space. In the case of “cost per gallon” and “miles per person per year”, that trait has broken down. The appropriate choice of a graphical form usually depends on the empirical traits of the data so far, and at this point you might fall back on paired line charts:32:T9a8,Now we might say driving miles have “plateaued” — a metaphor of stagnation that arises in this set of visual encodings, where no change over time looks horizontally flat. Do you understand what’s happening better? Do you notice anything new? Are any phenomena shown in the connected scatterplot harder to notice here? Do you see more connections or think less about their interrelation? We have filled in the years Toby omitted, and we have made line charts that show time explicitly. But even the simplest line chart involves a visual lie where you connect one point to the next without actually knowing what happened in-between. Sampling and interpolation are always tricky; I think of Steven Wittens’s “[The Pixel Factory](https://acko.net/tv/pixelfactory/)” and “[Don’t Use Moving Averages](https://observablehq.com/d/a51954c61a72e1ef)”, and Zan Armstrong’s “[Everything is Seasonal](https://www.youtube.com/watch?v=IiF4-g001EQ)”. By sampling at regular intervals, we can reduce artifacts and get away without thinking too hard. But maybe we _should_ think too hard! What are we still not seeing? It made sense for Toby to single out 2020 and 2026 for Covid and the Iran war, but those shocks may be so abrupt that they’re still being diluted by yearly aggregation. Fairfield used heavy annotation and several insets to tell her story; telling today’s story would entail much more than just finding the updated numbers. Maybe we need to bring in other dimensions of data or historical context. Noah’s aforementioned variant brought in fuel efficiency, which makes a lot of sense. What about distinguishing production volume to help tease out supply and demand? Maybe the geography of the production is newly salient. Maybe the price of gas has “dislocated”, diverged across geographies, California vs. New York vs. Texas, urban vs. rural, gone “K”-shaped, such that the story is now happening at a different level of aggregation. What about that moment in April 2020 when crude oil futures went negative? Do we need to break out prices along different steps of the supply chain? Surely that’s historic and salient! And what about electric cars? Maybe they’re now such a substantial fraction of the fleet that you can’t explain miles driven without energy sources other than the gas in cars’ tanks. I begin to imagine a hyper-dimensional connected scatterplot… but no, no, that’s not the point. What’s the story?33:[{"id":"ee06c4a8d8043694d6cd5b884965b71db08aaa7cb4812f88d9c28990634cc013575274525781f41b5274158bc683a6657cb35026b291098a62bfbea380c250d3","href":"https://static.observableusercontent.com/files/ee06c4a8d8043694d6cd5b884965b71db08aaa7cb4812f88d9c28990634cc013575274525781f41b5274158bc683a6657cb35026b291098a62bfbea380c250d3","name":"driving.csv","type":"application/octet-stream","lastModified":1686053554534.331,"size":1546},{"id":"f13dc7473fdc13bd8b2290ffbc1cdf874419839360de793dd3fd8247ae88b76583435cae194c07edb4e13bd07ab8f104d8b4ce109c821511fea3db7649211008","href":"https://static.observableusercontent.com/files/f13dc7473fdc13bd8b2290ffbc1cdf874419839360de793dd3fd8247ae88b76583435cae194c07edb4e13bd07ab8f104d8b4ce109c821511fea3db7649211008","name":"2026-07-01 - connected scatterplot.png","type":"image/png","lastModified":1782925138139.401,"size":341669},{"id":"f64a6deb1c4b5cfb0ec7a5406c2681bd5e7fef9826b5a9c59986be1278fa845c494bdd7fd93b856df30e8fda4dd5e1af030ae3092cc84e774032e1615d89dedf","href":"https://static.observableusercontent.com/files/f64a6deb1c4b5cfb0ec7a5406c2681bd5e7fef9826b5a9c59986be1278fa845c494bdd7fd93b856df30e8fda4dd5e1af030ae3092cc84e774032e1615d89dedf","name":"2026-07-01 - connected scatterplot - detail.png","type":"image/png","lastModified":1782925185843.055,"size":112361},{"id":"743558715d548e7bd9747b943b2a162cc42286cae308ebb09f0c793b6e2b09f22c37ba9eea24440ad37871390123c6b48ec6c46091833b9f0d326d9e4ea0c06d","href":"https://static.observableusercontent.com/files/743558715d548e7bd9747b943b2a162cc42286cae308ebb09f0c793b6e2b09f22c37ba9eea24440ad37871390123c6b48ec6c46091833b9f0d326d9e4ea0c06d","name":"cpi.csv","type":"text/csv","lastModified":1782969035770.488,"size":16311},{"id":"6d840f5c9cf1b73dae53c41febfc798ee4533eb05fa47b82b230261608d48ebd5e3beb5e876689b84905bcd966d7aac0639eb2fefc32bf0e70d9b46abdfa004c","href":"https://static.observableusercontent.com/files/6d840f5c9cf1b73dae53c41febfc798ee4533eb05fa47b82b230261608d48ebd5e3beb5e876689b84905bcd966d7aac0639eb2fefc32bf0e70d9b46abdfa004c","name":"milesPerCapita.json","type":"application/json","lastModified":1783144863960.194,"size":1421},{"id":"ff47650a29d39614c9f6b01f81561516d943004dbf9773884b3e9415ba2f993ad4b8db65191570d76e66328ea28ea838f0936caa01c86da1742b951ef4ee97fe","href":"https://static.observableusercontent.com/files/ff47650a29d39614c9f6b01f81561516d943004dbf9773884b3e9415ba2f993ad4b8db65191570d76e66328ea28ea838f0936caa01c86da1742b951ef4ee97fe","name":"gas.json","type":"application/json","lastModified":1783144872387.729,"size":952}] 2d:{"id":"a43517a00e4360bd","slug":"connected-scatterplot-drives-into-itself","title":"Connected scatterplot drives into itself","thumbnail":"5086dbaa6d7333f0956f3c324197892f9bc7bda43ebfd7a6dc9696502f16a551","access_level":"public","create_time":"$D2026-06-25T15:11:54.408Z","update_time":"$D2026-07-04T22:50:36.939Z","view_time":null,"first_public_time":"$D2026-07-04T04:58:00.822Z","has_unpublished_edits":null,"fork":{"id":"8fc3faefbbd73413","slug":"connected-scatterplot/2","title":"Connected scatterplot","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":5,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":972,"publish_version":972,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"},{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Connected scatterplot drives into itself","cells":[{"id":0,"value":"# Connected scatterplot drives into itself","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"“[Connected scatterplot](https://new.observablehq.com/@d3/connected-scatterplot/2)” is a popular D3 example that recreates one part of Hannah Fairfield’s [*Driving Shifts Into Reverse*](http://www.nytimes.com/imagepages/2010/05/02/business/02metrics.html), published in _The New York Times_ in 2010. Recently, [Toby M. on Bluesky](https://bsky.app/profile/thelatentspace.bsky.social/post/3mp3ctftkhc2s) shared an update, adding points for 2020 and 2026.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"bluesky(\"https://bsky.app/profile/thelatentspace.bsky.social/post/3mp3ctftkhc2s\")","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"It’s a good opportunity to revisit a classic graphic, and made me want to fill in the other missing years. But first I want to consider Toby’s incomplete version, since it illustrates challenges with both connected scatterplots and sampling.\n\nWhat happens after 2010? My eye does not notice that years are missing. It looks like the path speeds up, jumping way down to the left and then way up to the right in a smooth swoop.\n\nA line chart shows time explicitly, so the reader can discern an irregularity, especially if we mark the sampled points:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"Plot.plot({\n x: {tickFormat: d => String(d), label: null},\n y: {label: \"Cost per gallon\", tickFormat: \"$.2f\"},\n height: 200,\n width: Math.min(640, width),\n marks: [\n Plot.lineY(\n driving.filter(({year}) => year <= 2010 || year === 2020 || year === 2025),\n {x: \"year\", y: \"gas\", marker: \"circle\"}\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"Plot.legend({color: {domain: [\"D3 example data\", \"FRED data\"], range: [\"black\", \"red\"]}})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"Plot.plot({\n x: {tickFormat: d => String(d)},\n y: {label: \"Miles per person per year\", tickFormat: \"s\"},\n height: 200,\n marks: [\n Plot.ruleX([cutover + 0.5], {strokeDasharray: \"2,2\"}),\n Plot.dot(nytData, {x: \"year\", y: \"miles\", opacity: 0.7}),\n Plot.dot(milesPerCapita, {x: \"0\", y: \"1\", stroke: \"red\", opacity: 0.7})\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"For cost per gallon, the _Times_ used “regular grade, adjusted for inflation”. I used [US Regular All Formulations Gas Price (GASREGW)](https://fred.stlouisfed.org/series/GASREGW), from the EIA, inflation-adjusted by the [Consumer Price Index for All Urban Consumers: All Items in U.S. City Average (CPIAUCSL)](https://fred.stlouisfed.org/series/CPIAUCSL), from the Bureau of Labor Statistics. That match is also pretty good; I think the 1990 number is off because the FRED data started in August, and the 2010 number is off because the _Times_ data ended in February.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"Plot.plot({\n x: {tickFormat: d => String(d)},\n y: {label: \"Cost per gallon\", tickFormat: \"$.2f\"},\n height: 200,\n marks: [\n Plot.ruleX([cutover + 0.5], {strokeDasharray: \"2,2\"}),\n Plot.dot(nytData, {x: \"year\", y: \"gas\", opacity: 0.7}),\n Plot.dot(gas, {x: \"0\", y: \"1\", stroke: \"red\", opacity: 0.7})\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"So I cut over from the D3 example data to the FRED data after 2009, combining them to form the full updated connected scatterplot, with data for all years, including partial data for 2026.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"The effect is very different. Fairfield’s original graphic had one one small modest self-intersection: the loop-de-loop from 1999 to 2002. But now it’s all backtracking and running over itself. You can follow the animation, but the final static form is a mess. How are we to interpret that? Broadly, it means that miles per person per year has stagnated while gas prices have fluctuated within a familiar range.\n\nWe can improve legibility of the recent past a bit by giving it more room to breathe and focusing on just the story since 1990:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"Plot.plot({\n x: {domain: [8500, 10200], label: \"Miles per person per year\"},\n y: {label: \"Cost per gallon\", tickFormat: \"$.2f\"},\n clip: true,\n inset: 15,\n grid: true,\n marks: [\n Plot.line(driving, {x: \"miles\", y: \"gas\", curve: \"natural\"}),\n Plot.text(driving, {x: \"miles\", y: \"gas\", text: d => String(d.year), fill: \"black\", stroke: \"white\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"Plot.plot({\n x: {tickFormat: d => String(d), label: null, axis: false},\n y: {label: \"Cost per gallon\", tickFormat: \"$.2f\"},\n marginRight: 20,\n marginBottom: 20,\n height: 170,\n width: Math.min(640, width),\n marks: [\n Plot.ruleY([0], {stroke: \"#ccc\"}),\n Plot.lineY(driving, {x: \"year\", y: \"gas\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"Plot.plot({\n x: {tickFormat: d => String(d), label: null},\n y: {label: \"Miles per person per year\", tickFormat: \"s\"},\n height: 180,\n width: Math.min(640, width),\n marks: [\n Plot.ruleY([0], {stroke: \"#ccc\"}),\n Plot.lineY(driving, {x: \"year\", y: \"miles\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"

\n ${inset(2012, 2016, \"Shale oil boom\")}\n ${inset(2019, 2022, \"Covid\")}\n ${inset(2024, 2026, \"Iran war\")}\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"(OK, now imagine little sparklines under each inset chart showing domestic crude oil production, Covid cases, and airstrikes in the Middle East, respectively… maybe I’ll come back to it…)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"---\n## Appendix\n\nThe FRED calls will fail unless you’re in a private notebook with a `FRED_API_KEY` secret. [Learn more](https://new.observablehq.com/@tophtucker/fred) about loading from FRED.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"nytData = FileAttachment(\"driving.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"const fetchFred = async series => (await fetch(`https://api.stlouisfed.org/fred/series/observations?series_id=${series}&api_key=${Secret(\"FRED_API_KEY\")}&file_type=json`, {proxy: true})).json();\n\nconst timeParse = d3.timeParse(\"%Y-%m-%d\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"miles = d3.rollups(\n (await fetchFred(\"TRFVOLUSM227NFWA\")).observations,\n arr => {\n const sum = d3.sum(arr, d => +d.value) * 1e6; // convert from millions\n const n = arr.length;\n return n < 12 ? sum * (12 / n) : sum; // annualize partial years\n },\n d => timeParse(d.date).getFullYear()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"population = d3.rollups(\n (await fetchFred(\"POPTHM\")).observations,\n arr => Math.round(d3.mean(arr, d => +d.value) * 1000), // convert from thousands\n d => timeParse(d.date).getFullYear()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"// Cached version\nmilesPerCapita = FileAttachment(\"milesPerCapita.json\").json()\n\n// Regenerate from FRED\n// milesPerCapita = d3.range(\n// d3.max([d3.min(population, d => d[0]), d3.min(miles, d => d[0])]),\n// d3.min([d3.max(population, d => d[0]), d3.max(miles, d => d[0])]) + 1, // inclusive upper bound\n// )\n// .map(year => [\n// year,\n// miles.find(d => d[0] === year)[1] / population.find(d => d[0] === year)[1]\n// ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"display(Inputs.button(\"Download milesPerCapita.json\", {\n reduce: () => {\n const blob = new Blob([JSON.stringify(milesPerCapita)], {type: \"application/json\"});\n const a = Object.assign(document.createElement(\"a\"), {\n href: URL.createObjectURL(blob),\n download: \"milesPerCapita.json\"\n });\n a.click();\n URL.revokeObjectURL(a.href);\n }\n}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"// Cached version\ngas = FileAttachment(\"gas.json\").json()\n\n// Regenerate from FRED\n// gas = d3.rollups(\n// (await fetchFred(\"GASREGW\")).observations,\n// arr => d3.mean(arr, d => +d.value),\n// d => timeParse(d.date).getFullYear()\n// )\n// .map(([year, value]) => [year, convert(value, new Date(year, 0, 1), new Date(2010, 0, 1))]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"display(Inputs.button(\"Download gas.json\", {\n reduce: () => {\n const blob = new Blob([JSON.stringify(gas)], {type: \"application/json\"});\n const a = Object.assign(document.createElement(\"a\"), {\n href: URL.createObjectURL(blob),\n download: \"gas.json\"\n });\n a.click();\n URL.revokeObjectURL(a.href);\n }\n}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"const sideHints = new Map([\n [2004, \"right\"],\n [2008, \"right\"],\n [2005, \"right\"],\n [2009, \"left\"],\n [2000, \"left\"],\n [2011, \"right\"],\n [2017, \"right\"],\n [2018, \"top\"],\n [2019, \"right\"],\n [2020, \"right\"],\n [2023, \"right\"],\n [2025, \"bottom\"]\n])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"const cutover = 2009","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"driving = d3.range(d3.min(nytData, d => d.year), new Date().getFullYear() + 1).map(year => {\n const d = year <= cutover && nytData.find(d => d.year === year);\n return {\n year,\n side: sideHints.get(year) ?? d?.side ?? \"left\",\n miles: d?.miles ?? milesPerCapita.find(d => d[0] === year)?.[1],\n gas: d?.gas ?? gas.find(d => d[0] === year)?.[1]\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"const length = (path) => d3.create(\"svg:path\").attr(\"d\", path).node().getTotalLength()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"const cpi = await FileAttachment(\"cpi.csv\").csv({typed: true});\n\nconst convert = (dollars, fromDate, toDate) => {\n return dollars * (findCpi(toDate) / findCpi(fromDate));\n};\n\nconst findCpi = (date) => {\n const [minDate, maxDate] = d3.extent(cpi, d => d.date);\n if (date < minDate || date > maxDate) throw new RangeError(\"date is out of bounds of CPI data\");\n const i = d3.bisector(d => d.date).left(cpi, date);\n const lo = cpi[i - 1];\n const hi = cpi[i];\n return Math.abs(+lo.date - +date) <= Math.abs(+hi.date - +date)\n ? lo.value\n : hi.value;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"const endpointLabel = (data, from, to) => {\n from = data.at(from);\n to = data.at(to);\n const milesExtent = d3.extent(data, d => d.miles);\n const gasExtent = d3.extent(data, d => d.gas);\n const dx = (to.miles - from.miles) / (milesExtent[1] - milesExtent[0]);\n const dy = (to.gas - from.gas) / (gasExtent[1] - gasExtent[0]);\n const side = Math.abs(dx) >= Math.abs(dy)\n ? (dx > 0 ? \"left\" : \"right\")\n : (dy > 0 ? \"bottom\" : \"top\");\n return Plot.text(\n [from],\n {\n x: \"miles\",\n y: \"gas\",\n text: d => String(d.year),\n fill: \"black\",\n stroke: \"white\",\n textAnchor: side === \"left\" ? \"end\" : side === \"right\" ? \"start\" : \"middle\",\n dx: side === \"left\" ? -8 : side === \"right\" ? 8 : 0,\n dy: side === \"top\" ? -8 : side === \"bottom\" ? 8 : 0,\n }\n );\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"const inset = (lo, hi, subtitle) => {\n const filtered = driving.filter(d => d.year >= lo && d.year <= hi);\n const gasExtent = d3.extent(filtered, d => d.gas);\n const milesExtent = d3.extent(filtered, d => d.miles);\n return Plot.plot({\n subtitle,\n width: 300,\n height: 300,\n x: {label: \"Miles per person per year\", domain: milesExtent, ticks: milesExtent},\n y: {label: \"Cost per gallon\", tickFormat: \"$.2f\", domain: gasExtent, ticks: gasExtent},\n clip: true,\n inset: 40,\n marks: [\n Plot.frame(),\n Plot.line(driving, {x: \"miles\", y: \"gas\", stroke: \"#ccc\", strokeWidth: 1}),\n Plot.line(filtered, {x: \"miles\", y: \"gas\", markerStart: \"arrow\", marker: \"circle\", markerEnd: \"arrow\"}),\n endpointLabel(filtered, 0, 1),\n endpointLabel(filtered, -1, -2),\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"import {bluesky} from \"observable:@tophtucker/bluesky\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 2e:"$2d:body"