31: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 }) ] })32:[{"id":"d2ee76ca05621b4022071d1d2aa0e80110901286f18765aa2bc8a83cbc6e3da8ab7f93dbf864130cf3f0a2b7dec9b19936fb66def72a2f600156fdda16150afb","href":"https://static.observableusercontent.com/files/d2ee76ca05621b4022071d1d2aa0e80110901286f18765aa2bc8a83cbc6e3da8ab7f93dbf864130cf3f0a2b7dec9b19936fb66def72a2f600156fdda16150afb","name":"weather.tsv","type":"text/tab-separated-values","lastModified":1612255143106.308,"size":6982}] 2f:{"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"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}