2d:null 2e:["$","title",null,{"children":"Compare Climate Diagrams | Adrian Herzog | Observable"}] 33:Tb9d,chartOverlay = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width + 60, height]); // Gemeinsame Gitterlinien/Achsen — gleiche Skalen wie chart/chart2, damit beide Layer übereinander passen svg.append('g').call(yGridP); svg.append('g').call(yGridT); svg.append('g').call(yGridT0); // --- Hintergrund: Referenzstandort (grau) --- const bgWidth = x.bandwidth() * 0.66; svg.append("g") .attr("fill", "#999") .attr("fill-opacity", 0.9) .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i) + (x.bandwidth() - bgWidth) / 2) .attr("y", d => yP(d.prec)) .attr("height", d => yP(0) - yP(d.prec)) .attr("width", bgWidth); svg.append("path") .datum(data) .style("stroke", "#555") .style("stroke-width", 6) // Dash entfernt — kollidierte mit den Punkten .attr("fill", "none") .attr("d", d3.line() .curve(d3.curveCatmullRom.alpha(0.15)) .x((d, i) => x(i) + x.bandwidth() / 2) .y(d => yT(d.temp))); svg.selectAll("bgCircles") .data(data) .enter() .append("circle") .attr("fill", "#555") .attr("cx", (d, i) => x(i) + x.bandwidth() / 2) .attr("cy", d => yT(d.temp)) .attr("r", 4); // --- Vordergrund: Vergleichsstandort (leicht transparent) --- svg.append("g") .attr("fill", "steelblue") .attr("fill-opacity", 0.78) // war 0.55 .selectAll("rect") .data(data2) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => yP(d.prec)) .attr("height", d => yP(0) - yP(d.prec)) .attr("width", x.bandwidth()); svg.append("path") .datum(data2) .style("stroke", "red") .style("stroke-opacity", 0.85) .style("stroke-width", 6) .attr("fill", "none") .attr("d", d3.line() .curve(d3.curveCatmullRom.alpha(0.15)) .x((d, i) => x(i) + x.bandwidth() / 2) .y(d => yT(d.temp))); svg.selectAll("fgCircles") .data(data2) .enter() .append("circle") .attr("fill", "darkred") .attr("cx", (d, i) => x(i) + x.bandwidth() / 2) .attr("cy", d => yT(d.temp)) .attr("r", 4); // Achsen svg.append('g').call(xGrid); svg.append("g").call(xAxis); svg.append("g").call(yAxisP); svg.append("g").call(yAxisT); // Titel + Legende svg.append("text") .attr("x", width / 2) .attr("y", 18) .attr("text-anchor", "middle") .style("font-size", "22px") .style("font-family", "sans-serif") .style("font-stretch", "condensed") .text(`${location2.short} vs ${location.short}`); svg.append("text") .attr("x", width / 2) .attr("y", height - 18) .attr("text-anchor", "middle") .style("font-size", "13px") .style("font-family", "sans-serif") .text(`gray/dashed = ${location.short} · blue/red = ${location2.short}`); return svg.node(); }34:[] 31:{"id":"9aa44b6e78f7deba","slug":"compare-diagrams","title":"Compare Climate Diagrams","thumbnail":"876213db9950aabfc5dc0cb2fe057870c2a569bcc349a22e32e1130bf14198a7","access_level":"public","create_time":"$D2026-08-02T09:14:08.911Z","update_time":"$D2026-08-17T21:09:54.486Z","view_time":null,"first_public_time":"$D2026-08-02T09:14:08.911Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d51625848c4262aa","login":"aquilo","name":"Adrian Herzog","avatar_url":"https://avatars-next.observableusercontent.com/859a98670ef7987fabfc945b13446c48cb871ef54a09b465c92c0cebc3b1bdf4","tier":"starter_2024"},"version":2435,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"08e3f2fafce98735","login":"aquilo","name":"Adrian Herzog","avatar_url":"https://avatars-next.observableusercontent.com/859a98670ef7987fabfc945b13446c48cb871ef54a09b465c92c0cebc3b1bdf4","tier":null}],"members":[{"type":"individual","id":"08e3f2fafce98735","login":"aquilo","name":"Adrian Herzog","avatar_url":"https://avatars-next.observableusercontent.com/859a98670ef7987fabfc945b13446c48cb871ef54a09b465c92c0cebc3b1bdf4","tier":null,"role":"editor"},{"type":"team","id":"d51625848c4262aa","login":"aquilo","name":"Adrian Herzog","avatar_url":"https://avatars-next.observableusercontent.com/859a98670ef7987fabfc945b13446c48cb871ef54a09b465c92c0cebc3b1bdf4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Compare Climate Diagrams","cells":[{"id":0,"value":"md`# Compare Climate Diagrams\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"viewof latlon = Text({label: html `Coordinates`, placeholder: \"Enter latitude and longitude...\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2117,"value":"viewof latlon2 = Text({label: html `Coordinates`, placeholder: \"Enter latitude and longitude...\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2370,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width + 60, height]);\n// 4.49 -77.58\n// precipitation P\n svg.append('g').call(yGridP)\n svg.append('g').call(yGridT)\n svg.append('g').call(yGridT0)\n svg.append(\"g\").call(precipitations, data)\n\n// temperature T\n svg.append(\"path\").call(temperaturelines, data)\n svg.selectAll(\"myCircles\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"fill\", \"black\")\n .attr(\"stroke\", \"none\")\n .attr(\"cx\", (d, i) => (x(i) + x.bandwidth()/2))\n .attr(\"cy\", function(d) { return yT(d.temp) })\n .attr(\"r\",4)\n svg.append(\"g\").call(yAxisT)\n\n // tile\n svg.append('g').call(locationtext, location.short)\n svg.append('g').call(summarytext, summary)\n\n // x\n svg.append('g').call(xGrid)\n svg.append(\"g\").call(xAxis)\n svg.append(\"g\").call(yAxisP) \n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2112,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width2 + 60, height]);\n// 4.49 -77.58\n// precipitation P\n svg.append('g').call(yGridP)\n svg.append('g').call(yGridT)\n svg.append('g').call(yGridT0)\n svg.append(\"g\").call(precipitations, data2)\n\n// temperature T\n svg.append(\"path\").call(temperaturelines, data2)\n svg.selectAll(\"myCircles\")\n .data(data2)\n .enter()\n .append(\"circle\")\n .attr(\"fill\", \"black\")\n .attr(\"stroke\", \"none\")\n .attr(\"cx\", (d, i) => (x(i) + x.bandwidth()/2))\n .attr(\"cy\", d => yT(d.temp))\n .attr(\"r\",4)\n svg.append(\"g\").call(yAxisT)\n\n // tile\n svg.append('g').call(locationtext, location2.short)\n svg.append('g').call(summarytext, summary2)\n\n // x\n svg.append('g').call(xGrid)\n svg.append(\"g\").call(xAxis)\n svg.append(\"g\").call(yAxisP) \n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2421,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2411,"value":"height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2354,"value":"locationtext = (g, loc) => g\n .append(\"text\")\n .attr(\"x\", (width2 / 2)) \n .attr(\"y\", 18)\n .attr(\"text-anchor\", \"middle\") \n .style(\"font-size\", \"24px\") \n .style(\"font-family\", \"sans-serif\") \n .style(\"text-decoration\", \"none\") \n .style(\"font-stretch\", \"condensed\") \n .text(loc);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2360,"value":"summarytext= (g, text) => g\n .append(\"text\")\n .attr(\"x\", (width2 / 2)) \n .attr(\"y\", height - 18)\n .attr(\"text-anchor\", \"middle\") \n .style(\"font-size\", \"14px\") \n .style(\"font-family\", \"sans-serif\") \n .style(\"text-decoration\", \"none\") \n .style(\"font-stretch\", \"condensed\") \n .text(text);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2291,"value":"precipitations = (g, ddd) => g\n .attr(\"fill\", myColor)\n .selectAll(\"rect\")\n .data(ddd)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(i))\n .attr(\"y\", d => yP(d.prec))\n .attr(\"height\", d => yP(0) - yP(d.prec))\n .attr(\"width\", x.bandwidth());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2307,"value":"temperaturelines = (g, ddd) => g\n .data([ddd])\n .style(\"stroke\", \"red\")\n .style(\"stroke-width\", 10)\n .attr(\"class\", \"line\")\n .attr(\"fill\", \"none\")\n .attr(\"d\", d3.line()\n .curve(d3.curveCatmullRom.alpha(0.15))\n .x((d, i) => (x(i) + x.bandwidth()/2))\n .y((d) => yT(d.temp)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2313,"value":"temperaturepoints = (g, ddd) => g \n .selectAll(\"myCircles\")\n .data(ddd)\n .enter()\n .append(\"circle\")\n .attr(\"fill\", \"black\")\n .attr(\"stroke\", \"none\")\n .attr(\"cx\", (d, i) => (x(i) + x.bandwidth()/2))\n .attr(\"cy\", d => yT(d.temp))\n .attr(\"r\",40)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2051,"value":"summary = \"⌀: \" + Math.round(10 * d3.mean(data, d => d.temp)) / 10 + \" ℃, Σ: \" + Math.round(d3.sum(data, d => d.prec)) + \" mm, ϕ / λ: \" + Math.round(100 * lat)/100 + \" \" + Math.round(100 * lon)/100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2166,"value":"summary2 = \"⌀: \" + Math.round(10 * d3.mean(data2, d => d.temp)) / 10 + \" ℃, Σ: \" + Math.round(d3.sum(data2, d => d.prec)) + \" mm, ϕ / λ: \" + Math.round(100 * lat2)/100 + \" \" + Math.round(100 * lon2)/100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"myColor = d3.interpolateBlues(Math.max(maxPrecVal, 60) / 250)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"maxPrecVal = d3.max(datam, d => d.prec) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2226,"value":"width2 = width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2233,"value":"width1 = width2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"xGrid = (g) => g\n .attr('class', 'grid-lines-x')\n .selectAll('myCircles')\n .data(data)\n .join('line')\n .attr('x1', (d, i) => x(i) - x.bandwidth()/20)\n .attr('x2', (d, i) => x(i) - x.bandwidth()/20)\n .attr('y1', margin.top)\n .attr('y2', height - margin.bottom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"yGridP = (g) => g\n .attr('class', 'grid-lines-p')\n .selectAll('path')\n .data(ypticks)\n .join('line')\n .attr('x1', margin.left)\n .attr('x2', width - margin.right)\n .attr(\"y1\", d => 0.5 + yP(d))\n .attr(\"y2\", d => 0.5 + yP(d))\n .style(\"stroke-dasharray\", (\"3, 3\")) // <== This line here!!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2021,"value":"ypticks = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000].filter(\n function(num){\n return num < d3.max(data, d => d.prec) && num > d3.min(data, d => d.prec)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1850,"value":"ytticks = [-40 -35, -30, -25, -20, -15, -10, -5, 0, 5, 10, 15, 20, 25, 30, 35, 40].filter(\n function(num){\n return num < d3.max(datam, d => d.temp) && num > d3.min(datam, d => d.temp)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2288,"value":"ytlines = [-40, -30, -20, -10, 0, 10, 20, 30, 40].filter(\n function(num){\n return num < d3.max(datam, d => d.temp) && num > d3.min(datam, d => d.temp)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"yGridT = (g) => g\n .attr('class', 'grid-lines-t')\n .selectAll('path')\n .data(ytlines)\n .join('line')\n .attr('x1', margin.left)\n .attr('x2', width - margin.right)\n .attr(\"y1\", d => 0.5 + yT(d))\n .attr(\"y2\", d => 0.5 + yT(d))\n .style(\"stroke-dasharray\", (\"8, 3\")) // <== This line here!!\n .attr(\"class\", \"axisT\") ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2265,"value":"yGridT0 = (g) => g\n .attr('class', 'grid-lines-t0')\n .selectAll('path')\n .data([0])\n .join('line')\n .attr('x1', margin.left)\n .attr('x2', width - margin.right)\n .attr(\"y1\", d => 0.5 + yT(d))\n .attr(\"y2\", d => 0.5 + yT(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"x = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"yP = d3.scaleLinear()\n .domain([0, Math.max(d3.max(datam, d => d.prec), 30)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2162,"value":"yT = d3.scaleLinear()\n .domain([d3.min(datam, d => d.temp) - 2.5, d3.max(datam, d => d.temp) + 2.5]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(i => months[data[i].month - 1]).tickSizeOuter(0))\n .attr(\"font-size\", \"15px\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"yAxisP = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"axisP\")\n\n .call(d3.axisLeft(yP).ticks(12, datam.format))\n .attr(\"font-size\", \"16px\")\n .attr(\"color\", \"darkblue\")\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 35)\n .attr(\"fill\", \"darkblue\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-size\", \"16px\")\n .text(\"Precipitation [mm]\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"yAxisT = g => g\n .attr(\"transform\", `translate(${width + margin.right},0)`)\n .call(d3.axisRight(yT).ticks(null, datam.format))\n .attr(\"font-size\", \"16px\")\n .attr(\"color\", \"darkred\")\n .call(g => g.append(\"text\")\n .attr(\"x\", - margin.right - 70)\n .attr(\"y\", 35)\n .attr(\"fill\", \"darkred\")\n .attr(\"font-size\", \"16px\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Temperature [ºC]\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2152,"value":"datam = climate.data.concat(climate2.data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2251,"value":"data = climate.data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2129,"value":"data2 = climate2.data ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"climate = d3.json(url, data => {\n data.forEach(d => {} );\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2127,"value":"climate2 = d3.json(url2, data => {\n data.forEach(d => {} );\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1715,"value":"coordparam = \"&lat=\" + lat + \"&lon=\" + lon","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2123,"value":"coordparam2 = \"&lat=\" + lat2 + \"&lon=\" + lon2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"url = \"https://climate.mapresso.com/climate-data.php?\" + coordparam.substring(1)\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2125,"value":"url2 = \"https://climate.mapresso.com/climate-data.php?\" + coordparam2.substring(1)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"location = d3.json(\"https://climate.mapresso.com/api/address/?\" + coordparam, data => {\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2135,"value":"location2 = d3.json(\"https://climate.mapresso.com/api/address/?\" + coordparam2, data => {\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1762,"value":"lat = isNaN(+latlon.split(\" \")[1]) ? 47.37 : Math.min(+latlon.split(\" \")[0], 84)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2119,"value":"lat2 = isNaN(+latlon2.split(\" \")[1]) ? 47.37 : Math.min(+latlon2.split(\" \")[0], 84)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1765,"value":"lon = isNaN(+latlon.split(\" \")[1]) ? 8.54 : +latlon.split(\" \")[1] ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2121,"value":"lon2 = isNaN(+latlon2.split(\" \")[1]) ? 8.54 : +latlon2.split(\" \")[1] ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1523,"value":"margin = ({top: 60, right: 0, bottom: 60, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"import {Text} from \"@observablehq/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"