2b:null 2c:["$","title",null,{"children":"Difference chart | akanksha | Observable"}] 31:Tb6c,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.scaleLinear() .domain(d3.extent(data, d => d.Gene)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([ d3.min(data, d => Math.min(d.MAE_Train, d.MAE_Test)), d3.max(data, d => Math.max(d.MAE_Train, d.MAE_Test)) ]) .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.Gene)) .y0(0) .y1(d => y(d.MAE_Test))); svg.append("clipPath") .attr("id","below") .append("path") .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(d.Gene)) .y0(height) .y1(d => y(d.MAE_Test))); // 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.Gene)) .y0(height) .y1(d => y(d.MAE_Train))); svg.append("path") .attr("clip-path", "url(#below)") .attr("fill", colors[0]) .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(d.Gene)) .y0(0) .y1(d => y(d.MAE_Train))); // 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.Gene)) .y(d => y(d.MAE_Train))); return svg.node(); }32:[{"id":"4adc98b10d124a9baedf976477b8848feecba26cc94672f2b1dc4fbc94c71c67635eb65915c37ad2e4c3d606ddd00b9dc62fde6f4515e399574907f9c0bf6431","href":"https://static.observableusercontent.com/files/4adc98b10d124a9baedf976477b8848feecba26cc94672f2b1dc4fbc94c71c67635eb65915c37ad2e4c3d606ddd00b9dc62fde6f4515e399574907f9c0bf6431","name":"weather.tsv","type":"application/octet-stream","lastModified":1728843914034.12,"size":6982},{"id":"8b1a135aa20a38b55147b21b5b9912e943ed1b0c789b87f294a46e5f171730e484175a36f138ee78186a2d12581732949522f30fd343cd4ffdae60368e66d0b3","href":"https://static.observableusercontent.com/files/8b1a135aa20a38b55147b21b5b9912e943ed1b0c789b87f294a46e5f171730e484175a36f138ee78186a2d12581732949522f30fd343cd4ffdae60368e66d0b3","name":"OZ_MAE.csv","type":"text/csv","lastModified":1728843915141.091,"size":137434}] 2f:{"id":"916d7a5ee130097a","slug":null,"title":"Difference chart","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-10-13T18:25:14.034Z","update_time":"$D2024-10-13T18:25:14.034Z","view_time":null,"first_public_time":"$D2024-10-13T18:25:14.034Z","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":"62728f3cec297de2","login":"dmru2","name":"akanksha","avatar_url":"https://avatars-next.observableusercontent.com/7a209c2f2f0979e0078ce7cb061de2d05ba9c7d947d1af7a0e491e2a08e3d144","tier":"starter_2024"},"version":221,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8638839db421c1c2","login":"akanksha-sharma","name":"akanksha sharma","avatar_url":"https://avatars-next.observableusercontent.com/4658a505dc618cc7495745d976f8e172df3940442a6335cc93c8bf581d2d63cc","tier":null}],"members":[{"type":"individual","id":"8638839db421c1c2","login":"akanksha-sharma","name":"akanksha sharma","avatar_url":"https://avatars-next.observableusercontent.com/4658a505dc618cc7495745d976f8e172df3940442a6335cc93c8bf581d2d63cc","tier":null,"role":"editor"},{"type":"team","id":"62728f3cec297de2","login":"dmru2","name":"akanksha","avatar_url":"https://avatars-next.observableusercontent.com/7a209c2f2f0979e0078ce7cb061de2d05ba9c7d947d1af7a0e491e2a08e3d144","tier":"starter_2024","role":"editor"}],"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":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = {\n const processedData = d3.Gene;\n return d3.tsvParse(await FileAttachment(\"OZ_MAE.csv\").text(), d => ({\n Gene: d.Gene,\n MAE_Train: +d[\"MAE Train\"], // Convert to number\n MAE_Test: +d[\"MAE Test\"] \n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"oz_mae = await FileAttachment(\"OZ_MAE.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"oz_mae","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"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"