33: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(); }34:[{"id":"4adc98b10d124a9baedf976477b8848feecba26cc94672f2b1dc4fbc94c71c67635eb65915c37ad2e4c3d606ddd00b9dc62fde6f4515e399574907f9c0bf6431","href":"https://static.observableusercontent.com/files/4adc98b10d124a9baedf976477b8848feecba26cc94672f2b1dc4fbc94c71c67635eb65915c37ad2e4c3d606ddd00b9dc62fde6f4515e399574907f9c0bf6431","name":"weather.tsv","type":"application/octet-stream","lastModified":1688066458335.982,"size":6982}] 32:{"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"},{"id":39,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":156,"value":"Or, using [Observable Plot](/plot/)’s concise API (see [complete example](/@observablehq/plot-difference-chart)).","pinned":false,"hidden":false,"mode":"md"},{"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"}],"files":"$W34","stdlib":"1","titling":"auto"}