2d:null 2e:["$","title",null,{"children":"Day 26: Uncertainties - Interactive | Shruti Mukhtyar | Observable"}] 33:T53b,### Process I used the Linear Regression implementation in [Linear regression with confidence bands](https://observablehq.com/@toja/linear-regression-with-confidence-bands) created by [@toja](https://observablehq.com/@toja). Some other options for doing Linear Regression are [simple-statistics](https://simplestatistics.org/docs/), [jStat](http://jstat.github.io/), [d3-regression](https://observablehq.com/collection/@harrystevens/d3-regression). Another great resource is [@fils](https://observablehq.com/@fil) [plugin](https://observablehq.com/@fil/plot-regression) that wraps d3-regression with the Plot library. The [NOAA Climate At A Glance](https://www.ncdc.noaa.gov/cag/) dashboard uses FIPS codes for states and counties, but does not seem to have a url to access these easily. But thanks to [@enjalot](https://observablehq.com/@enjalot) collection of [U.S. Geographic Data](https://observablehq.com/@observablehq/us-geographic-data), there's an easier solution! Reference: - [U.S. Geographic Data](https://observablehq.com/@observablehq/us-geographic-data) - [Linear regression with confidence bands](https://observablehq.com/@toja/linear-regression-with-confidence-bands) - [U.S. Geographic Data](https://observablehq.com/@observablehq/us-geographic-data) - [Fetch Progress](https://observablehq.com/@mbostock/fetch-progress)34:[] 31:{"id":"cbb1bb01469d2230","slug":"day-26-uncertainties-interactive","title":"Day 26: Uncertainties - Interactive","thumbnail":"678621ad85038a3a92749b0b68eac08d87e24d95387fbe7dae278862d05481fa","access_level":"public","create_time":"$D2022-04-26T15:57:32.972Z","update_time":"$D2022-04-27T05:04:55.603Z","view_time":null,"first_public_time":"$D2022-04-26T17:41:29.247Z","fork":{"id":"0f5044acc6be7e7f","slug":"day-25-uncertainties-trend","title":"Day 25: Uncertainties - Trend","owner":{"id":"6636080f8b9f94b8","login":"mukhtyar","name":"Shruti Mukhtyar"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6636080f8b9f94b8","login":"mukhtyar","name":"Shruti Mukhtyar","avatar_url":"https://avatars-next.observableusercontent.com/08866aede922340418a14d406e76cdc15a8cfdb7a4263c0b867f4849e201d799","tier":"starter_2024"},"version":2004,"publish_version":2004,"role":null,"authored":false,"authors":[{"type":"individual","id":"128dbd1b0f303cd6","login":"mukhtyar","name":"Shruti Mukhtyar","avatar_url":"https://avatars-next.observableusercontent.com/08866aede922340418a14d406e76cdc15a8cfdb7a4263c0b867f4849e201d799","tier":null}],"members":[{"type":"individual","id":"128dbd1b0f303cd6","login":"mukhtyar","name":"Shruti Mukhtyar","avatar_url":"https://avatars-next.observableusercontent.com/08866aede922340418a14d406e76cdc15a8cfdb7a4263c0b867f4849e201d799","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"85ccb5f354c32101","slug":"30-day-chart-challenge-2022","title":"30 Day Chart Challenge 2022","owner":{"id":"6636080f8b9f94b8","login":"mukhtyar","name":"Shruti Mukhtyar"}},"type":"notebook","body":{"title":"Day 26: Uncertainties - Interactive","cells":[{"id":4,"value":"# Day 26: Uncertainties - Interactive\n## Created for #30DayChartChallenge April 2022.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1469,"value":"

Trends in Maximum and Minimum Temperatures for California counties

Historical data (1895-2021) shows an increase of ${trendPerDecade} in ${ts.title} for ${county.name}.

\n \nSource: NOAA National Centers for Environmental information","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1929,"value":"viewof county = Inputs.select(caCounties, {label: \"Select county\", format: d => d.name})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"viewof ts = Inputs.select(timeseriesList, {label: \"Select Indicator\", format: d => d.title})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1975,"value":"viewof buffer = fetchProgress(url, {mode: \"cors\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"Plot.plot({\n x: {\n label: \"\",\n },\n y: {\n label: `${ts.title} (${ts.units})`,\n },\n marks: [\n Plot.frame(),\n // all years\n Plot.line(data, {\n x: \"date\",\n y: \"value\",\n stroke: \"#aaa\"\n }),\n // base period\n Plot.ruleY([basePeriodMean], {\n stroke: \"#377eb8\",\n strokeDasharray: 4,\n }),\n Plot.text([`${basePeriod[0]}-${basePeriod[1]} Average\\n${d3.format(\"0.1f\")(basePeriodMean)} ${ts.units}`], {\n x: data[0].date,\n y: basePeriodMean,\n dx: 5,\n dy: -15,\n textAnchor: \"start\",\n }),\n // 95% Confidence Interval\n Plot.areaY(intervalData, {\n x: d => timeScale.invert(d.x),\n y1: \"left\",\n y2: \"right\",\n fill: \"#a65628\",\n fillOpacity: 0.3,\n }),\n // Trend line\n Plot.line(intervalData, {\n x: d => timeScale.invert(d.x),\n y: d => predict(d.x),\n stroke: \"#a65628\",\n strokeWidth: 2,\n }),\n ]\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"timeseriesList = [\n {\n id: \"tmax\",\n title: \"Maximum Temperature\",\n units: \"°F\",\n },\n {\n id: \"tmin\",\n title: \"Minimum Temperature\",\n units: \"°F\",\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"### Statistical Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1513,"value":"import { inverseT, normdev } from \"@toja/linear-regression-with-confidence-bands\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1664,"value":"Modifying `confidenceInterval` and `linearRegression` functions instead of importing from [Linear regression with confidence bands](https://observablehq.com/@toja/linear-regression-with-confidence-bands) to specify a 95% confidence level & get slope and intercept values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1553,"value":"// https://stats.stackexchange.com/questions/101318/understanding-shape-and-calculation-of-confidence-bands-in-linear-regression\nfunction confidenceInterval(data, predict, confidenceLevel = 0.05) {\n const mean = d3.sum(data, d => d.x) / data.length;\n let a = 0, b = 0;\n for (let i = 0; i < data.length; ++i) {\n a += Math.pow(data[i].x - mean, 2);\n b += Math.pow(data[i].y - predict(data[i].x), 2);\n }\n const sy = Math.sqrt(b / (data.length - 2));\n const t = inverseT(+confidenceLevel, data.length - 2) \n return function(x) {\n const Y = predict(x);\n const se = sy * Math.sqrt(1 / data.length + Math.pow(x - mean, 2) / a);\n return { x, left: Y - t * se, right: Y + t * se };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"function linearRegression(data) {\n let n = data.length, sumX = 0, sumY = 0, sumXY = 0, sumX2 = 0;\n for (let i = 0; i < data.length; ++i) {\n const xi = data[i].x;\n const yi = data[i].y;\n if (!Number.isFinite(xi) || !Number.isFinite(yi)) { --n; continue; }\n sumX += xi;\n sumY += yi;\n sumXY += xi * yi;\n sumX2 += xi * xi;\n }\n const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);\n const intercept = (sumY - slope * sumX) / n;\n console.log('slope', slope, 'intercept', intercept);\n return {\n predict: x => slope * x + intercept,\n slope,\n intercept,\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"Converting the date to a float for the linear regression analysis using `d3.scaleTime`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1739,"value":"xyData = data.map(({ date, value }) => ({ x: timeScale(date), y: value }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"timeScale = d3.scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([1, data.length])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1801,"value":"Calculate trend and 95% confidence intervals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1532,"value":"interval = confidenceInterval(xyData, predict)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1786,"value":"slope = result.slope","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1960,"value":"trendPerDecade = {\n if (slope > 0) {\n return `an increase of ${d3.format(\"+0.1f\")(slope*10)} ${ts.units} per decade`\n } else if (slope < 0) {\n return `an decrease of ${d3.format(\"+0.1f\")(slope*10)} ${ts.units} per decade`\n } else {\n return `no trend`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1784,"value":"predict = result.predict","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"result = linearRegression(xyData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"intervalData = {\n const domain = d3.extent(xyData, d => d.x)\n const step = (domain[1] - domain[0]) / 100;\n return d3.range(domain[0], domain[1] + step, step).map(d => interval(d));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1522,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1719,"value":"basePeriod = [1981, 2010]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"basePeriodMean = d3.mean(data.filter(({ date }) => date.getUTCFullYear() >= basePeriod[0] && date.getUTCFullYear() <= basePeriod[1]), d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"dateFormat = d3.timeFormat(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"dateParse = d3.timeParse(\"%Y%m\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1941,"value":"Get NOAA data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1874,"value":"url = `https://www.ncdc.noaa.gov/cag/county/time-series/CA-${county.fips}-${ts.id}-12-12-1895-2022.json?base_prd=true&begbaseyear=${basePeriod[0]}&endbaseyear=${basePeriod[1]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"data = { \n const json = await d3.json(url);\n const dates = Object.keys(json.data);\n return dates.map((date) => {\n const { value, anomaly } = json.data[date];\n return { \n date: dateParse(date),\n value: +value,\n anomaly: +anomaly,\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1938,"value":"Get a list of FIPS codes for California counties","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1905,"value":"caCounties = countyStates.filter(d => d.stateCode === \"CA\").map(d => ({ ...d, fips: d.fips.slice(2)}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1903,"value":"import {countyStates} from \"@enjalot/us-county-datasets\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1995,"value":"Fetching data from NOAA can take a few seconds.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1972,"value":"import {fetchProgress} from \"@mbostock/fetch-progress\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"