2c:null 2d:["$","title",null,{"children":"Plot: Difference chart | Observable | Observable"}] 32:T46a,chart = Plot.plot({ width: 928, height: 550, x: { inset: 4 }, y: { grid: true, label: "temperature (°F)" }, color: { scheme: "RdYlBu", label: "colder" }, marks: [ Plot.differenceY(weather, { x: "date", y1: "New York", y2: "San Francisco", curve: "step-after", positiveFill: () => "NY", negativeFill: () => "SF", tip: true }), Plot.text( weather, Plot.selectMaxY({ x: "date", y: "New York", text: () => "New York", dy: -6 }) ), Plot.text(weather, { ...Plot.selectMaxY({ x: "date", y: "New York" }), y: "San Francisco", text: () => "San Francisco", dy: 13 }), Plot.text( weather, Plot.selectMinY({ x: "date", y: "New York", text: () => "New York", textAnchor: "start", dy: -10, dx: 6 }) ), Plot.text(weather, { ...Plot.selectMinY({ x: "date", y: "New York", text: () => "San Francisco" }), y: "San Francisco", dy: -40 }) ] })33:[{"id":"d2ee76ca05621b4022071d1d2aa0e80110901286f18765aa2bc8a83cbc6e3da8ab7f93dbf864130cf3f0a2b7dec9b19936fb66def72a2f600156fdda16150afb","href":"https://static.observableusercontent.com/files/d2ee76ca05621b4022071d1d2aa0e80110901286f18765aa2bc8a83cbc6e3da8ab7f93dbf864130cf3f0a2b7dec9b19936fb66def72a2f600156fdda16150afb","name":"weather.tsv","type":"text/tab-separated-values","lastModified":1612255143106.308,"size":6982}] 30:{"id":"e0a18b6089d7a68d","slug":"plot-difference-chart","title":"Plot: Difference chart","thumbnail":"793e500112154a703d9d48ac12065f91f8a79ad73aeced76f2dd39bc94ea7248","access_level":"public","create_time":"$D2021-02-02T08:38:49.627Z","update_time":"$D2023-12-20T18:12:20.442Z","view_time":null,"first_public_time":"$D2021-07-27T07:50:53.834Z","fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":356,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[{"id":"e0b366dd5ea6305f","reply_to_id":null,"content":"The examples in this notebook pass y0 and y (or x0 and x); I’m tempted to rename these options to y1 and y2 respectively, and to remove the other y-options (leaving only y1 and y2). Do we need four y-options?\n\nAlso, I wonder about using the chart dimensions (the last argument to render) instead of computing the extends eX and eY.","create_time":"$D2021-03-03T18:33:21.348Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"2fe0f54511f09aea","reply_to_id":"e0b366dd5ea6305f","content":"I think both ideas make perfect sense. (We don't need the four ys, it's just that I was reading d3 code.)","create_time":"$D2021-03-03T18:43:14.517Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"66a2eabcc3063f29","reply_to_id":"e0b366dd5ea6305f","content":"done!","create_time":"$D2021-03-03T19:24:47.977Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"492d72aff953191d","reply_to_id":"e0b366dd5ea6305f","content":"Removed the clip option, since it's equivalent to switching y1 and y2","create_time":"$D2021-03-04T07:07:37.113Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":32,"collection":{"id":"01bf424a8b6ed8a2","slug":"plot-experiments","title":"Plot Experiments","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"type":"notebook","body":{"title":"Plot: Difference chart","cells":[{"id":0,"value":"

Plot: Difference chart

Observable Plot › Gallery

\n\n# Difference chart\n\nA difference chart highlights the difference between two values, typically entries vs exits. The amount is encoded as height, and the sign (surplus vs. deficit) as a solid color. In the chart below, we compare the temperatures on the same day; days when San Francisco was warmer are orange, and colder days are blue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"weather = FileAttachment(\"weather.tsv\").tsv({typed: true})\n .then(l => l.map(d => ({...d, date: d3.utcParse(\"%Y%m%d\")(`${d.date}`)})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"