3c:null 3d:["$","title",null,{"children":"Plot: Difference chart | Bankn8II©$A | Observable"}] 43:T4cd,chart = Plot.plot({ width: 928, height: 550, x: { inset: 4 }, y: { grid: true, label: "temperature (°F)" }, color: { scheme: "RdYlBu", label: "colder" }, marks: [ Plot.areaY(data, { x: "date", y1: "New York", y2: "San Francisco", curve: "step-after", fill: (d) => d["San Francisco"] < d["New York"] ? "SF" : "NY", z: null, tip: true }), Plot.lineY(data, { x: "date", y: "San Francisco", curve: "step-after" }), Plot.text( data, Plot.selectMaxY({ x: "date", y: "New York", text: () => "New York", dy: -6 }) ), Plot.text(data, { ...Plot.selectMaxY({ x: "date", y: "New York" }), y: "San Francisco", text: () => "San Francisco", dy: 13 }), Plot.text( data, Plot.selectMinY({ x: "date", y: "New York", text: () => "New York", textAnchor: "start", dy: -10, dx: 6 }) ), Plot.text(data, { ...Plot.selectMinY({ x: "date", y: "New York", text: () => "San Francisco" }), y: "San Francisco", dy: -40 }) ] })44:[{"id":"d2ee76ca05621b4022071d1d2aa0e80110901286f18765aa2bc8a83cbc6e3da8ab7f93dbf864130cf3f0a2b7dec9b19936fb66def72a2f600156fdda16150afb","href":"https://static.observableusercontent.com/files/d2ee76ca05621b4022071d1d2aa0e80110901286f18765aa2bc8a83cbc6e3da8ab7f93dbf864130cf3f0a2b7dec9b19936fb66def72a2f600156fdda16150afb","name":"weather.tsv","type":"text/tab-separated-values","lastModified":1692441796828.821,"size":6982}] 41:{"id":"27aeefffc2e114a9","slug":null,"title":"Plot: Difference chart","thumbnail":"8d4d94fdb687e2dd8ad1945c3b731df5e3ed06158110a30fde4e4a6280de7d29","access_level":"public","create_time":"$D2023-08-19T10:43:16.828Z","update_time":"$D2023-08-19T10:43:16.828Z","view_time":null,"first_public_time":"$D2023-08-19T10:43:16.828Z","has_unpublished_edits":null,"fork":{"id":"e0a18b6089d7a68d","slug":"plot-difference-chart","title":"Plot: Difference chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"826e22a6d0207f7d","login":"barionleg","name":"Bankn8II©$A","avatar_url":"https://avatars-next.observableusercontent.com/01aafb4d3023fde86c946f4eaa08ddba3fad6e278d831c67730af442a1cfa3a9","tier":"starter_2024","bio":"©om₽o$€℞AРхитектBunoom\r\nBunioonArcomposers\r\nHere Just ©omposers Union of Georgia Represented science 1932. 1942E_BernVakUeartz B℞oliKBil©A₽$ \r\nвÅRDavweli Д3e uR"},"version":354,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6469a70b76e2cb5a","login":"barionleg","name":"Bankn8II©$A","avatar_url":"https://avatars-next.observableusercontent.com/4522b5e3c79c8e1ae16b69c19cbb684b8cebf9258059a4c5b89887471c967620","tier":null,"bio":"©om₽o$€℞AРхитектBunoom\r\nBunioonArcomposers\r\nHere Just ©omposers Union of Georgia Represented science 1932. 1942E_BernVakUeartz B℞oliKBil©A₽$ \r\nвÅRDavweli Д3e uR"}],"members":[{"type":"individual","id":"6469a70b76e2cb5a","login":"barionleg","name":"Bankn8II©$A","avatar_url":"https://avatars-next.observableusercontent.com/4522b5e3c79c8e1ae16b69c19cbb684b8cebf9258059a4c5b89887471c967620","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"data = 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 42:"$41:body"