27:null 28:["$","title",null,{"children":"Difference chart | inanimatedObjects | Observable"}] 2d:Tb53,chart = { // Specify the chart’s dimensions. const width = 928; const height = 600; const marginTop = 20; const marginRight = 20; const marginBottom = 30; const marginLeft = 30; // Create the positional and color scales. const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([ d3.min(data, d => Math.min(d.value0, d.value1)), d3.max(data, d => Math.max(d.value0, d.value1)) ]) .range([height - marginBottom, marginTop]); const colors = [d3.schemeRdYlBu[3][2], d3.schemeRdYlBu[3][0]]; // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;") .datum(data); // Create the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", -marginLeft) .attr("y", -30) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Temperature (°F)")); // Create the clipPaths. svg.append("clipPath") .attr("id", "above") .append("path") .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(d.date)) .y0(0) .y1(d => y(d.value1))); svg.append("clipPath") .attr("id","below") .append("path") .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(d.date)) .y0(height) .y1(d => y(d.value1))); // Create the color areas. svg.append("path") .attr("clip-path", "url(#above)") .attr("fill", colors[1]) .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(d.date)) .y0(height) .y1(d => y(d.value0))); svg.append("path") .attr("clip-path", "url(#below)") .attr("fill", colors[0]) .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(d.date)) .y0(0) .y1(d => y(d.value0))); // Create the black line. svg.append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", d3.line() .curve(d3.curveStep) .x(d => x(d.date)) .y(d => y(d.value0))); return svg.node(); }2e:[{"id":"4adc98b10d124a9baedf976477b8848feecba26cc94672f2b1dc4fbc94c71c67635eb65915c37ad2e4c3d606ddd00b9dc62fde6f4515e399574907f9c0bf6431","href":"https://static.observableusercontent.com/files/4adc98b10d124a9baedf976477b8848feecba26cc94672f2b1dc4fbc94c71c67635eb65915c37ad2e4c3d606ddd00b9dc62fde6f4515e399574907f9c0bf6431","name":"weather.tsv","type":"application/octet-stream","lastModified":1742410492300.713,"size":6982}] 2b:{"id":"447677994eda10de","slug":null,"title":"Difference chart","thumbnail":"18fb92b6d9a405969d46b4ccc766e201e3cd55d84fdb437a7228f9fceb30c373","access_level":"public","create_time":"$D2025-03-19T18:54:52.300Z","update_time":"$D2025-03-19T18:54:52.300Z","view_time":null,"first_public_time":"$D2025-03-19T19:10:28.979Z","has_unpublished_edits":null,"fork":{"id":"1cd22a756bf783ef","slug":"difference-chart/2","title":"Difference chart","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024"},"version":191,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null}],"members":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null,"role":"editor"},{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Difference chart","cells":[{"id":0,"value":"

Difference chart

D3 › Gallery

\n\n# Difference chart\n\nThe temperature in New York compared to San Francisco; days when San Francisco was warmer are orange, and colder days are blue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = {\n const parseDate = d3.timeParse(\"%Y%m%d\");\n return d3.tsvParse(await FileAttachment(\"weather.tsv\").text(), d => ({\n date: parseDate(d.date),\n value0: +d[\"San Francisco\"], // The primary value.\n value1: +d[\"New York\"] // The secondary comparison value.\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"Or, using [Observable Plot](/plot/)’s concise API (see [complete example](/@observablehq/plot-difference-chart)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"Plot.plot({\n y: { grid: true },\n color: {scheme: \"RdYlBu\"},\n marks: [\n Plot.areaY(data, {\n x: \"date\",\n y1: \"value0\",\n y2: \"value1\",\n curve: \"step-after\",\n fill: (d) => (d[\"value0\"] < d[\"value1\"] ? \"SF\" : \"NY\"),\n z: null\n }),\n Plot.lineY(data, {\n x: \"date\",\n y: \"value1\",\n curve: \"step-after\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"