31:T9bd,md`# Summer heat 🍦 🌞 - 210 US Cities Since Observable released the new [inputs library](https://observablehq.com/@observablehq/inputs), I've been [experimenting](https://observablehq.com/@radames/google-fonts-analytics-visualized) with the [tabular data API](https://observablehq.com/@observablehq/input-table). I've never had so much fun coding tables 🤣. The fancy API gives you a quick way to visualize rows of data and much more. For example, you can define a format function that returns HTML as an output instead of a simple text string, a temperature number ${html`${formatTemp( randTemp, 0.9 )}`} or even a full mini chart ${html`${chart( 2, 150 )}`}. You can sort the rows by clicking on the headers if your data is orderable. With a quick hack, you can set a value for custom order or wait for [this feature](https://github.com/observablehq/inputs/issues/84 ). In this example, the column Trends can be sorted by its [regression model slope value](#model) *Data: [210 US Cities Data Source](https://kilthub.cmu.edu/articles/dataset/Compiled_daily_temperature_and_precipitation_data_for_the_U_S_cities/7890488). [hosted github](https://github.com/radames/dataset-historical-daily-temperature-210-US)*
*Original Visualization: [Summer Heat](https://observablehq.com/@fil/summer-heat) by [@fil](https://observablehq.com/@fil)* ---

original content

~~_cause it’s that time of the year!_~~ Inspired by Lisa Charlotte Rost’s [small mutiple of temperature increases](https://blog.datawrapper.de/weekly39/), Adam Pearce had proposed a block with [a linear regression for each month](https://bl.ocks.org/1wheel/89ec11ab72a542b2a009d4fcd7b78b4c). This notebook rewrites Adam’s block with a slightly different toolset (Harry Stevens’ [d3-regression](https://observablehq.com/@harrystevens/introducing-d3-regression), Susie Lu’s [d3-annotation](https://d3-annotation.susielu.com/)), and a different dataset, to similar effect. *Data:[source](https://www.dnr.state.mn.us/climate/historical/acis_stn_data_monthly_table.html?sid=mspthr&sname=Twin%20Cities%20Area&sdate=por&edate=por&element=avgt&span=annual&counts=no); [processing](https://observablehq.com/d/e7199dc8ac5ed9f8).*

`32:T9d9,summer_chart = Plot.plot({ marks: [ Plot.ruleX(quantiledata1, { x: "year", y1: (d) => d.temp.min, strokeOpacity: 1, y2: (d) => d.temp.max }), Plot.ruleX(quantiledata1, { x: "year", y1: (d) => d.temp.q02, y2: (d) => d.temp.q98, strokeWidth: 2.5, stroke: "#7EA1CC", strokeOpacity: 1, strokeLinecap: "round" }), Plot.ruleX(quantiledata1, { x: "year", y1: (d) => d.temp.q05, y2: (d) => d.temp.q95, strokeWidth: 4.5, strokeOpacity: 1, stroke: "#f7e0ba", strokeLinecap: "round" }), Plot.dot(quantiledata1, { x: "year", y: (d) => d.temp.mean, stroke: "steelblue", r: 2.5, fill: "steelblue" }), Plot.dot(quantiledata1_sort, { x: "year", y: (d) => d.temp.mean, stroke: "orange", r: 2.5, fill: "orange" }), Plot.line( quantiledata1, Plot.regression({ x: "year", y: (d) => d.temp.mean, //strokeDasharray: [1.5, 4], strokeWidth: 1.5, type, bandwidth: param, //ci: 0.95, order: param }) ), /*Plot.text(quantiledata1, { text: (_) => "Max", x: "year", y: (d) => d.temp.max, fontSize: width / 180 }), Plot.text(quantiledata1, { text: (_) => "Min", x: "year", y: (d) => d.temp.min, fontSize: width / 180 }),*/ Plott.tooltip( quantiledata1.filter((d) => !isNaN(d.temp.mean)), { x: "year", y: (d) => d.temp.mean, content: (d) => `${selectedLocation.Name} - Summer, ${ d.year }\nMean: ${d.temp.mean.toFixed(2)}°C\nMedian: ${d.temp.med.toFixed( 2 )}°C\nP95: ${d.temp.q05.toFixed(2)} - ${d.temp.q95.toFixed( 2 )} °C\nP98: ${d.temp.q02.toFixed(2)} - ${d.temp.q98.toFixed( 2 )} °C\nMin-Max: ${d.temp.min.toFixed(2)} - ${d.temp.max.toFixed( 2 )} °C`, stroke: "#ccc", direction: "up" } ) ], width: width * 0.95, height: 500, color: { scheme: "BuRd" }, y: { line: true, grid: true, nice: true, label: "↑ Temperature (°C)" //transform: d => d * 9 / 5 + 32 // Celsius to Fahrenheit }, x: { tickFormat: (t) => t.toString(), line: true, //nice: true, domain: [yMin - 1, yMax + 1] //ticks: 3 }, marginLeft: 40, marginRight: 20 })33:Tccb,chartOriginal = { const margin = { top: 10, left: 40, bottom: 10, right: 20 }, height = width * 0.4, w = width * 0.95 - margin.left - margin.right, h = height - margin.top - margin.bottom; const xmonth = d3.scaleBand().domain(d3.range(12)).range([0, w]).padding(0.3), xyear = d3 .scaleLinear() .domain([yMin, yMax]) .range([0, xmonth.bandwidth()]), x = (date) => xmonth(date.getMonth()) + xyear(date.getFullYear()), e = d3.extent(data, (d) => d.celsius), y = d3.scaleLinear(e).domain(e).range([h, 0]), yDisplay = d3.scaleLinear().domain(e.map(degrees)).range([h, 0]); const svg = d3.select(DOM.svg(width, height)), g = svg .append("g") .attr("id", "conventions") .attr("transform", `translate(${[margin.left, margin.top]})`); svg.attr("class", "big-chart"); const labels = g .append("g") .attr("id", "labels") .selectAll("text") .data(d3.range(12)) .enter() .append("text") .attr("x", (m) => xmonth(m) + xmonth.bandwidth() / 2) .attr("text-anchor", "middle") .attr("y", (m) => y(means.get(m))) .attr( "transform", (m) => `translate(0,${20 + y(0) - y(2 * deviations.get(m))})` ) .attr("fill", "#E8336D") .text((m) => new Date(1970, m).toLocaleString("en-US", { month: "short" })); const line = d3 .line() .x((d) => xyear(d[0])) .y((d) => y(d[1])); g.append("g") .attr("id", "arrows") .selectAll("path") .data(d3.range(12)) .enter() .append("path") .attr("d", (m) => line(model.get(m))) .attr("transform", (m) => `translate(${xmonth(m)},0)`) .attr("stroke-width", width > 500 ? 3 : 1.5) .attr("stroke", "#E8336D") .attr("fill", "none") .attr("marker-end", "url(#arrow)"); const dotdata = data .filter((d) => !isNaN(d.celsius)) .map((d) => Object.assign([x(d.date), y(d.celsius)], { datum: d, year: +d.date.getFullYear() }) ); const dots = g .append("g") .attr("id", "dots") .selectAll("circle") .data(dotdata) .enter() .append("circle") .attr("r", width > 500 ? 1.5 : 0.8) .attr("fill", "#777") .attr("transform", (d) => `translate(${d})`); g.append("g").call( d3 .axisLeft() .scale(yDisplay) .tickFormat((d) => `${d} ° ${unit}`) .tickSize(-w) ); const defs = svg.append("defs"); defs.append("style").text(` .big-chart text { font-family: 'Varela', sans-serif; font-size:${ width > 500 ? 1 : 0.5 }em;} .big-chart #labels text { font-weight: bold; } .big-chart text#title { font-weight: bold; fill: black; } .big-chart .tick line { stroke-width: 0.2; } .big-chart path.domain { display: none; } .big-chart circle.highlight {fill: #E8336D; r: 4;} .big-chart .annotation-note-bg { fill-opacity: 1; } .big-chart .annotation-note-content text { fill: #E8336D; } `); defs .append("marker") .attr("id", "arrow") .attr("viewBox", "-10 -10 20 20") .attr("markerWidth", 17) .attr("markerHeight", 17) .attr("orient", "auto") .append("path") .attr("d", "M4,0 L0,-2 L 0,2Z") .attr("fill", "#E8336D"); svg.call(hover, dotdata); return svg.node(); }34:T611,Plot.plot({ marks: [ Plot.dot(data1, { x: "year", y: "temp", stroke: "steelblue", r: 1.8, fill: "steelblue" }), Plot.ruleX(data1l, { x: "year", strokeOpacity: 0.5, y1: data1l.map((d) => d.temp), y2: data1h.map((d) => d.temp), stroke: "steelblue" }), Plot.dot(data1_sort, { x: "year", y: "temp", stroke: "orange", r: 1.8, fill: "orange" }), Plot.line( data1, Plot.regression({ x: "year", y: "temp", //strokeDasharray: [1.5, 4], strokeWidth: 1.5, type, bandwidth: param, //ci: 0.95, order: param }) ), Plot.text(data1h, { text: (_) => "Max", x: "year", y: "temp", fontSize: width / 180 }), Plot.text(data1l, { text: (_) => "Min", x: "year", y: "temp", fontSize: width / 180 }), Plott.tooltip(data1, { x: "year", y: "temp", content: (d) => `${selectedLocation.Name} - Summer, ${ d.year }\nAvg. Temp: ${d.temp.toFixed(1)}°C`, stroke: "#ccc", direction: "up" }) ], width: width, height: 500, color: { scheme: "BuRd" }, y: { line: true, grid: true, nice: true, label: "↑ Temperature (°C)" //transform: d => d * 9 / 5 + 32 // Celsius to Fahrenheit }, x: { tickFormat: (t) => t.toString(), line: true, nice: true //ticks: 3 }, marginLeft: 40, marginRight: 20 })35:Tb75,function chart(monthnum, width = 220) { const margin = { top: 10, left: 30, bottom: 10, right: 20 }, height = width * 0.6, w = width - margin.left - margin.right, h = height - margin.top - margin.bottom; console.log(w); const xmonth = d3 .scaleBand() .domain([monthnum]) .range([0, w]) .padding(0.3), xyear = d3 .scaleLinear() .domain(d3.extent(permonth.get(monthnum), d => d.date.getFullYear())) .range([0, xmonth.bandwidth()]), x = date => xmonth(date.getMonth()) + xyear(date.getFullYear()), e = d3.extent(permonth.get(monthnum), d => d.celsius), y = d3 .scaleLinear(e) .domain(e) .range([h, 0]), yDisplay = d3 .scaleLinear() .domain(e.map(degrees)) .range([h, 0]); const svg = d3.select(DOM.svg(width, height)); svg.style("width", "100%"); svg.attr("class", "small-chart"); const g = svg .append("g") .attr("id", "conventions") .attr("transform", `translate(${[margin.left, margin.top]})`); const line = d3 .line() .x(d => xyear(d[0])) .y(d => y(d[1])); const dotdata = permonth .get(monthnum) .filter(d => !isNaN(d.celsius)) .map(d => Object.assign([x(d.date), y(d.celsius)], { datum: d, year: +d.date.getFullYear() }) ); const dots = g .append("g") .attr("id", "dots") .selectAll("circle") .data(dotdata) .enter() .append("circle") .attr("r", 1) .attr("fill", "#777") .attr("transform", d => `translate(${d})`); g.append("g").call( d3 .axisLeft() .scale(yDisplay) .tickFormat(d => `${d} ° ${unit}`) .ticks(8) .tickSize(-w) ); g.append("g") .attr("id", "arrows") .selectAll("path") .data([monthnum]) .enter() .append("path") .attr("d", m => line(model.get(m))) .attr("transform", m => `translate(${xmonth(m)},0)`) .attr("stroke-width", "3") .attr("stroke", "#E8336D") .attr("fill", "none") .attr("marker-end", "url(#arrow)"); const defs = svg.append("defs"); defs.append("style").text(` .small-chart text { font-family: 'Varela', sans-serif; font-size:0.5rem; } .small-chart #labels text { font-weight: bold; } .small-chart .tick line { stroke-width: 0.1; } .small-chart path.domain { display: none; } .small-chart circle.highlight {fill: #E8336D; r: 3;} .small-chart .annotation text { font-size: 0.8rem;} .small-chart .annotation-note-bg { fill-opacity: 1;} .small-chart .annotation-note-content text { fill: #E8336D; } `); defs .append("marker") .attr("id", "arrow") .attr("viewBox", "-10 -10 20 20") .attr("markerWidth", 17) .attr("markerHeight", 17) .attr("orient", "auto") .append("path") .attr("d", "M4,0 L0,-2 L 0,2Z") .attr("fill", "#E8336D"); svg.call(hover, dotdata); return svg.node(); }36:T7ab,function hover(svg, dotdata) { // Using Delaunay to quickly find the data point closest to the mouse position const delaunay = d3.Delaunay.from(dotdata), g = svg.select("#conventions"), labels = g.select("#labels"), dots = g.select("#dots").selectAll("circle"), tipg = g.append("g").attr("class", "annotation-tip"), annotationtip = d => d3 .annotation() .type(d3.annotationCalloutCircle) .annotations( [d].map(d => { return { data: d, dx: d[0] > 450 ? -10 : 10, dy: d[1] > 240 ? -10 : 10, note: { title: d.datum.date.toLocaleString("en-US", { month: "long", year: "numeric" }), label: `${degrees(d.datum.celsius).toFixed(1)}° ${unit}`, padding: 2, bgPadding: 2 }, subject: { radius: 5, radiusPadding: 2 } }; }) ) .accessors({ x: d => d[0], y: d => d[1] })(tipg); svg .on("pointerout pointerleave", event => { // tipg.html(""); // labels.style("visibility", "visible"); // dots.classed("highlight", false); }) .on("pointermove click", event => { // find the closest point const m = d3.pointer(event, g.node()), i = delaunay.find(...m), d = dotdata[i]; // if it's closer than 15px, show the annotation if (Math.sqrt((d[0] - m[0]) ** 2 + (d[1] - m[1]) ** 2) < 10) { annotationtip(d); labels.style("visibility", "hidden"); dots.classed("highlight", e => e.year === d.year); } else { tipg.html(""); labels.style("visibility", "visible"); dots.classed("highlight", false); } }) .style("background", "white") // to capture mousemove .style("cursor", "pointer"); }37:T445,// data = d3.csv( // "https://gist.githubusercontent.com/Fil/15e57d2584b618521d173d4c0088d13b/raw/2f7f1a236c074635435cc7ebf9253c20a5681690/data.csv", // d => { // d = d3.autoType(d); // d3.autoType converts "2010-09" to a JavaScript Date object // d.celsius = f2c(d.temp); // I'll be doing all computations in Celsius // return d; // } // ) // data = FileAttachment("USW00093134.csv") // .csv() alldata = fetch( `https://media.githubusercontent.com/media/radames/dataset-historical-daily-temperature-210-US/main/${selectedLocation.ID}.csv` ) .then((d) => d.text()) .then((d) => d3.csvParse(d)) .then((d) => d.map((e) => ({ date: d3.utcParse("%Y-%m-%d")(e.Date), ym: d3.utcParse("%Y-%m")( d3.utcParse("%Y-%m-%d")(e.Date).getFullYear() + "-" + (d3.utcParse("%Y-%m-%d")(e.Date).getMonth() + 1) ), tmax: f2c(+e.tmax), tmin: f2c(+e.tmin), celsius: f2c((+e.tmax + +e.tmin) / 2) })) ) // .then(d => d.filter(e => e.date.getDate() <= 1)) // to many points, getting first day of the month since 187838:T5ba,function addRegression(Plot) { Plot.regression = function ({ x, y, type, bandwidth, order, ...options }) { type = String(type).toLowerCase(); const regressor = type === "quad" ? reg.regressionQuad() : type === "poly" ? reg.regressionPoly() : type === "pow" ? reg.regressionPow() : type === "exp" ? reg.regressionExp() : type === "log" ? reg.regressionLog() : type === "loess" ? reg.regressionLoess() : reg.regressionLinear(); if (bandwidth && regressor.bandwidth) regressor.bandwidth(bandwidth); if (order && regressor.order) regressor.order(order); const z = options.z || options.stroke; // maybeZ return Plot.transform(options, function (data, facets) { const X = Plot.valueof(data, x); const Y = Plot.valueof(data, y); const Z = Plot.valueof(data, z); regressor.x((i) => X[i]).y((i) => Y[i]); const regFacets = []; const points = []; for (const facet of facets) { const regFacet = []; for (const I of Z ? d3.group(facet, (i) => Z[i]).values() : [facet]) { const reg = regressor(I); for (const d of reg) { const j = points.push(d) - 1; if (z) d[z] = Z[I[0]]; regFacet.push(j); } } regFacets.push(regFacet); } return { data: points, facets: regFacets }; }); }; return Plot; }39:[{"id":"eb5e478ed2f8104fad90a5b730c368194aceb3b8c9b1ea4682ba9912a2c4d1d02715d79db2fff13cb6f1472878b1bb2bcb04e7d272bef64a700efbefca60f28f","href":"https://static.observableusercontent.com/files/eb5e478ed2f8104fad90a5b730c368194aceb3b8c9b1ea4682ba9912a2c4d1d02715d79db2fff13cb6f1472878b1bb2bcb04e7d272bef64a700efbefca60f28f","name":"city_info.csv","type":"text/csv","lastModified":1680207204921.726,"size":44306}] 2f:{"title":"Summer heat 🍦 🌞 - 210 US Cities","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"viewof unit = Select(\n new Map([\n [\"Celsius\", \"C\"],\n [\"Fahrenheit\", \"F\"]\n ]),\n {\n value: \"C\",\n label: \"Display temperatures in\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2035,"value":"viewof type = Inputs.select(\n [\"LOESS\", \"Linear\", \"Quad\", \"Poly\", \"Log\", \"Exp\", \"Pow\"],\n {\n label: \"Regression type:\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1519,"value":"original = md`\n## Temperatures of 210 US Cities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"viewof selectedLocation = Select(dataCities, {\n label: \"Location Data\",\n sort: true,\n unique: true,\n value: [...dataCities.values()].find((e) => e.ID === \"USW00093134\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"Summer_trend = md`\n### Summer Trend from ${yMin} to ${yMax}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2037,"value":"viewof param = type === \"LOESS\"\n ? Inputs.range([0, 1], { label: \"LOESS bandwidth:\", value: 0.5, step: 0.01 })\n : type === \"Poly\"\n ? Inputs.range([1, 10], { label: \"poly order\", value: 3, step: 1 })\n : Object.assign(html``, { value: null })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2160,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2113,"value":"Monthly_trends = md`\n### Monthly Trends from ${yMin} to ${yMax}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"viewof regression = Select(\n [\n { label: \"Linear\", value: \"regressionLinear\" },\n { label: \"Quadratic\", value: \"regressionQuad\" }\n ],\n {\n format: (x) => x.label,\n label: \"Regression type\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"Table(\n Array(12)\n .fill()\n .map((_, month) => ({\n Month: month,\n Trend: Object.assign(model.get(month).b, { data: month }),\n Average: means.get(month).mean,\n ['Avg. High']: means.get(month).high,\n ['Avg. Low']: means.get(month).low\n })),\n {\n rows: Infinity,\n align: {\n Month: \"center\",\n Trend: \"center\",\n Average: \"center\",\n ['Avg. Low']: \"center\",\n ['Avg. High']: \"center\"\n },\n layout: \"auto\",\n sort: \"Month\",\n format: {\n ['Avg. High']: x => formatTemp(x),\n ['Avg. Low']: x => formatTemp(x),\n Average: x => formatTemp(x),\n Month: x =>\n html` 500 ? 1.5 : 1}rem;\">${new Date(\n 1970,\n x\n ).toLocaleString(\"en-US\", {\n month: width > 500 ? 'long' : 'short'\n })}`,\n Trend: x => chart(x.data)\n },\n columns: [\n \"Month\",\n \"Average\",\n ...(width > 500 ? [\"Avg. High\", \"Avg. Low\"] : []),\n \"Trend\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"function formatTemp(x, fontSize) {\n return html`

500 ? 1.5 : 1\n }rem;\">${degrees(x).toFixed(1)}° ${unit}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"function bwcontrast(c) {\n // from https://observablehq.com/@joshdata/perceptually-valid-color-scales\n // Choose a light or dark grey for a foreground\n // text color that will be most contrast-y with\n // then given color.\n c = d3.hcl(c.rgb());\n if (c.l < 60) c.l = 93;\n // white-ish\n else c.l = 7; // black-ish\n c.c /= 5; // reduce chroma (saturation)\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"// data = d3.csv(\n// \"https://gist.githubusercontent.com/Fil/15e57d2584b618521d173d4c0088d13b/raw/2f7f1a236c074635435cc7ebf9253c20a5681690/data.csv\",\n// d => {\n// d = d3.autoType(d); // d3.autoType converts \"2010-09\" to a JavaScript Date object\n// d.celsius = f2c(d.temp); // I'll be doing all computations in Celsius\n// return d;\n// }\n// )\n// data = FileAttachment(\"USW00093134.csv\")\n// .csv()\n\ndata = fetch(\n `https://media.githubusercontent.com/media/radames/dataset-historical-daily-temperature-210-US/main/${selectedLocation.ID}.csv`\n)\n .then(d => d.text())\n .then(d => d3.csvParse(d))\n .then(d =>\n d.map(e => ({\n date: d3.utcParse(\"%Y-%m-%d\")(e.Date),\n tmax: f2c(+e.tmax),\n tmin: f2c(+e.tmin),\n celsius: f2c((+e.tmax + +e.tmin) / 2)\n }))\n )\n .then(d => d.filter(e => e.date.getDate() <= 1)) // to many points, getting first day of the month since 1878","pinned":false,"hidden":false,"mode":"ojs"},{"id":2127,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2191,"value":"summer_data = alldata\n .filter((d) => !isNaN(d.celsius))\n .filter((d) => d.ym.getMonth() === 6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2204,"value":"Plot.plot({\n y: {\n grid: true,\n inset: 6\n },\n marks: [Plot.boxY(summer_data, { x: \"ym\", y: \"celsius\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2137,"value":"quantileData = d37\n .flatRollup(\n alldata,\n (v) => ({\n min: d3.min(v.map((d) => d.celsius)),\n q02: d3.quantile(\n v.map((d) => d.celsius),\n 0.01\n ),\n q05: d3.quantile(\n v.map((d) => d.celsius),\n 0.025\n ),\n med: d3.quantile(\n v.map((d) => d.celsius),\n 0.5\n ),\n q95: d3.quantile(\n v.map((d) => d.celsius),\n 0.975\n ),\n q98: d3.quantile(\n v.map((d) => d.celsius),\n 0.99\n ),\n max: d3.max(v.map((d) => d.celsius)),\n mean: d3.mean(v.map((d) => d.celsius))\n }),\n (d) => d.ym\n )\n .map((d) => ({\n time: d[0],\n quantiles: d[1],\n whisker: [\n { time: d[0], value: d[1].min },\n { time: d[0], value: d[1].max }\n ]\n }))\n .filter((d) => !isNaN(d.quantiles.mean))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2144,"value":"summerquantile = d3\n .groups(quantileData, (d) => d.time.getMonth())\n .map((d) => ({ month: d[0], temp: d[1] }))\n .filter((d) => d.month >= 5 && d.month <= 7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2149,"value":"summerquantilet = summerquantile[0].temp\n .concat(summerquantile[1].temp)\n .concat(summerquantile[2].temp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2152,"value":"quantiledata1 = d37\n .flatRollup(\n summerquantilet,\n (v) => ({\n min: d3.mean(v, (d) => d.quantiles.min),\n q02: d3.mean(v, (d) => d.quantiles.q02),\n q05: d3.mean(v, (d) => d.quantiles.q05),\n med: d3.mean(v, (d) => d.quantiles.med),\n q95: d3.mean(v, (d) => d.quantiles.q95),\n q98: d3.mean(v, (d) => d.quantiles.q98),\n max: d3.mean(v, (d) => d.quantiles.max),\n mean: d3.mean(v, (d) => d.quantiles.mean)\n }),\n (d) => d.time.getFullYear()\n )\n .map((d) => ({\n year: d[0],\n temp: d[1],\n whisker: [\n { time: d[0], value: d[1].min },\n { time: d[0], value: d[1].max }\n ]\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2174,"value":"quantiledata2 = d37\n .flatRollup(\n summerquantilet,\n (v) => ({\n min: d3.mean(v, (d) => d.quantiles.min),\n q02: d3.mean(v, (d) => d.quantiles.q02),\n q05: d3.mean(v, (d) => d.quantiles.q05),\n med: d3.mean(v, (d) => d.quantiles.med),\n q95: d3.mean(v, (d) => d.quantiles.q95),\n q98: d3.mean(v, (d) => d.quantiles.q98),\n max: d3.mean(v, (d) => d.quantiles.max),\n mean: d3.mean(v, (d) => d.quantiles.mean)\n }),\n (d) => d.time.getFullYear()\n )\n .map((d) => ({\n time: d[0],\n quantiles: d[1],\n whisker: [\n { time: d[0], value: d[1].min },\n { time: d[0], value: d[1].max }\n ]\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2180,"value":"quantiledata1_sort = quantiledata1\n .sort((a, b) => d3.descending(a.temp.mean, b.temp.mean))\n .slice(0, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"color = d3\n .scaleSequential(t => d3.interpolateRdBu(0.8 - t))\n .domain([\n d3.min([...means.values()].map(e => e.low)),\n d3.max([...means.values()].map(e => e.high))\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"// convert °F to Celsius\nf2c = f => (f - 32) * (5 / 9)","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"// convert °C to Fahrenheit\nc2f = c => (9 / 5) * c + 32","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"// displayable degrees (from d.celsius)\ndegrees = unit === \"F\" ? c2f : c => c","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"permonth = d3.group(data, d => d.date.getMonth())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1860,"value":"summer = d3\n .groups(data, (d) => d.date.getMonth())\n .map((d) => ({ month: d[0], temp: d[1] }))\n .filter((d) => d.month >= 5 && d.month <= 7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"summert = summer[0].temp\n .concat(summer[1].temp)\n .concat(summer[2].temp)\n .filter((d) => !isNaN(d.celsius))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1871,"value":"data1 = d3\n .rollups(\n summert,\n (v) => d3.mean(v, (d) => d.celsius),\n (d) => d.date.getFullYear()\n )\n .map((d) => ({ year: d[0], temp: d[1] }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2079,"value":"data1_sort = data1.sort((a, b) => d3.descending(a.temp, b.temp)).slice(0, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1928,"value":"data1l = d3\n .rollups(\n summert,\n (v) => d3.mean(v, (d) => d.tmin),\n (d) => d.date.getFullYear()\n )\n .map((d) => ({ year: d[0], temp: d[1] }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1930,"value":"data1h = d3\n .rollups(\n summert,\n (v) => d3.mean(v, (d) => d.tmax),\n (d) => d.date.getFullYear()\n )\n .map((d) => ({ year: d[0], temp: d[1] }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"regressionNote = md`A regression for each month, with _x_ being the year, and _y_ the temperature.\n\nAn interesting feature is that the quadratic regression shows a dramatically concave shape for Octobers (even if the linear trend is clearly increasing)…\n\n~~The degree-3 polynomial regression is shown for fun — nobody in their right mind would use it on this dataset.~~ removed, it breaks my soring key 😜`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"model = new Map(\n [...permonth].map(p => [\n p[0],\n d3[regression.value]()\n .x(d => +d.date.getFullYear())\n .y(d => d.celsius)\n .domain([yMin + 0.1 * (yMax - yMin), yMax - 0.1 * (yMax - yMin)])(\n p[1].filter(d => !isNaN(d.celsius))\n )\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`~~Means & standard deviations (used to place the labels lower in months with wider fluctuations).~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"deviations = new Map(\n [...permonth].map(p => [p[0], d3.deviation(p[1], d => d.celsius)])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"means = new Map(\n [...permonth].map(p => [\n p[0],\n {\n mean: d3.mean(p[1], d => d.celsius),\n high: d3.mean(p[1], d => d.tmax),\n low: d3.mean(p[1], d => d.tmin)\n }\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"yMin = d3\n .min(\n data.filter((d) => !isNaN(d.celsius)),\n (d) => d.date\n )\n .getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"yMax = d3\n .max(\n data.filter((d) => !isNaN(d.celsius)),\n (d) => d.date\n )\n .getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"md`~~Thanks to [Alex Garcia](https://observablehq.com/@asg017) and [Ian Johnson](/@enjalot) for suggestions.~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"dataCities = new Map(\n (await FileAttachment(\"city_info.csv\").csv()).map(row => [\n `${row.Name} - ${row[\"Stn.Name\"]}`,\n row\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"randTemp = {\n const l = [-10, 11, 15, 30, 25, 40];\n while (true) {\n await Promises.delay(2000);\n yield l[(Math.random() * l.length) >> 0];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"sytle = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`---\n~~_boring zone_~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@6\", \"d3-regression@1\", \"d3-svg-annotation@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2139,"value":"d37 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"import {\n Input,\n Search,\n Table,\n Select,\n Text,\n html,\n bind\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2025,"value":"import { Plot as Plot_ } from \"@fil/plot-splom\" // for Plot.transform & Plot.channel","pinned":true,"hidden":false,"mode":"ojs"},{"id":2028,"value":"Plot = addRegression(await require(\"@observablehq/plot@0.6\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2030,"value":"reg = require(\"d3-regression@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2032,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2056,"value":"import {\n Plot as Plott,\n ownerFigure\n} from \"@awconway/experimental-plot-tooltip-native-title\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}