25:["$","title",null,{"children":"Difference chart | marlow deneal | Observable"}] 49: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(); }4a:[{"id":"4adc98b10d124a9baedf976477b8848feecba26cc94672f2b1dc4fbc94c71c67635eb65915c37ad2e4c3d606ddd00b9dc62fde6f4515e399574907f9c0bf6431","href":"https://static.observableusercontent.com/files/4adc98b10d124a9baedf976477b8848feecba26cc94672f2b1dc4fbc94c71c67635eb65915c37ad2e4c3d606ddd00b9dc62fde6f4515e399574907f9c0bf6431","name":"weather.tsv","type":"application/octet-stream","lastModified":1697770226547.899,"size":6982}] 29:{"id":"c918cfcf7558fadc","slug":null,"title":"Difference chart","thumbnail":"18fb92b6d9a405969d46b4ccc766e201e3cd55d84fdb437a7228f9fceb30c373","access_level":"public","create_time":"$D2023-10-20T02:50:26.547Z","update_time":"$D2023-10-20T02:50:26.547Z","view_time":null,"first_public_time":"$D2023-10-20T02:50:26.547Z","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":"1dd8a7f5cbbe3892","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":191,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0fd8cc0ebc06ad87","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":null,"bio":"Traditional artist digital artist exploring the wonderful world of today through data visualization art ai exploring creating exploring creating more thank you d3 observable you help me to explore new possibilities 😀 ","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0fd8cc0ebc06ad87","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null