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)* ---

~~_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:Tcec,chartOriginal = { const margin = { top: 0, left: 40, bottom: 0, right: 20 }, height = width * 0.4, w = width - 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(); }33: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(); }34: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"); }35:[{"id":"eb5e478ed2f8104fad90a5b730c368194aceb3b8c9b1ea4682ba9912a2c4d1d02715d79db2fff13cb6f1472878b1bb2bcb04e7d272bef64a700efbefca60f28f","href":"https://static.observableusercontent.com/files/eb5e478ed2f8104fad90a5b730c368194aceb3b8c9b1ea4682ba9912a2c4d1d02715d79db2fff13cb6f1472878b1bb2bcb04e7d272bef64a700efbefca60f28f","name":"city_info.csv","type":"text/csv","lastModified":1613438152327.207,"size":44306}] 2f:{"title":"Summer heat 🍦 🌞 - 210 US Cities","cells":[{"id":0,"value":"$31","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: html`Regression type (see note)`\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"viewof unit = Select(new Map([[\"Celsius\", \"C\"], [\"Fahrenheit\", \"F\"]]), {\n value: \"F\",\n label: \"Display temperatures in\"\n})","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":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":1519,"value":"original = md`### Original Chart from [@Fil](https://observablehq.com/@fil/summer-heat)\n\n## Temperatures in ${selectedLocation.Name} - ${selectedLocation['Stn.Name']}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"$32","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":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"$34","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":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":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.min(data, d => d.date).getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"yMax = d3.max(data, d => d.date).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":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"}],"files":"$W35","stdlib":"1","titling":"auto"}