31:[] 2f:{"title":"Comparing distributions","cells":[{"id":0,"value":"md`# Comparing distributions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2772,"value":"md `Comparing shift in distribution of observed values of Maximum and Minimim Temperature with future projections at 38 stations across California, each with an observation period of greater than 30 years (1973 to present) from the HadISD global record`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3211,"value":"md`\n#### Data Sources from Cal-Adapt:\n- [LOCA Downscaled Climate Projections for RCP 4.5 scenario.](http://loca.ucsd.edu/) Scripps Institution of Oceanography\n- [Hourly Observed Historical Data](http://albers.cnr.berkeley.edu/data/hadisd/) HadISD\n\n#### References:\n- [Climate, drought, and sea level rise scenarios for California's fourth climate change assessment.](https://www.energy.ca.gov/sites/default/files/2019-07/Projections_CCCA4-CEC-2018-006.pdf) California Energy Commission.\n- [Cal-Adapt](https://cal-dapt.org)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"viewof station = Inputs.select(stations.features, {label: \"Station\", format: x => x.properties.name})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"viewof climvar = Inputs.select([{label:\"Maximum Temperature\", id:\"tasmax\"}, {label:\"Minimum Temperature\", id:\"tasmin\"}], {label: \"Climate Variable\", format: x => x.label})","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"viewof season = Inputs.select([{label:\"Jun-Jul-Aug\", months:[5,6,7]}, {label:\"Sep-Oct-Nov\", months:[8,9,10]}, {label:\"Dec-Jan-Feb\", months:[11,0,1]}, {label:\"Mar-Apr-May\", months:[2,3,4]}, {label:\"Entire Year\", months:d3.range(0, 12)}], {label: \"Season\", format: x => x.label})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"md `****************************`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1884,"value":"md `## Daily ${climvar.label} data at ${station.properties.name} weather station for ${season.label}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3087,"value":"small_multiples = {\n const div = d3.create(\"div\").style(\"display\", \"block\");\n const charts = div\n .selectAll(\"div\")\n .data(chartData)\n .join(\"div\")\n .style(\"height\", `${height}px`)\n .style(\"width\", `${width}px`)\n .attr(\"class\", \"chart-container\")\n .call(drawChart);\n \n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3198,"value":"md `\n

\n \n 1991-2020 Baseline from Observed (HadISD)\n

\n ${labels.map(d => {\n return `\n

\n \n ${d.label}\n

`\n })}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1942,"value":"md `****************************`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2758,"value":"viewof bin_width = Inputs.range([0.5, 5], {value: 2.5, step: 0.1, label: \"Bin Width\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3127,"value":"drawChart = ele => {\n const svg = ele\n .append(\"svg\")\n .style(\"height\", `${height}px`)\n .style(\"width\", `${width}px`);\n \n svg.append(\"g\")\n .call(xAxis)\n .call(g => g.selectAll(\".tick line\")\n .clone()\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"y1\", -height + margin.top + margin.bottom));\n \n svg.append(\"g\")\n .call(yAxis)\n .call(g => g.selectAll(\".tick line\")\n .clone()\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"x1\", width - margin.left - margin.right));\n \n svg.append(\"g\")\n .attr(\"class\", \"normals\")\n .selectAll(\"path\")\n .data(d => d.data)\n .join(\"path\")\n .attr(\"class\", d => d.key)\n .attr(\"stroke\", d => d.color)\n .attr(\"fill\", \"none\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"d\", d => line(d.normal_curve));\n \n // Add title\n svg.append('text').call(chartTitle);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"md `#### Calculate normal curves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3169,"value":"chartData = [\n {\n timestep: 'Mid-Century (2035-2064)',\n data: data.filter(series => !series.timestep.includes(\"End-Century\"))\n },\n {\n timestep: 'End-Century (2070-2099)',\n data: data.filter(series => !series.timestep.includes(\"Mid-Century\"))\n },\n ];","pinned":false,"hidden":false,"mode":"ojs"},{"id":2838,"value":"data = {\n const arr = [];\n arr.push({\n key: 'Observed',\n color: 'rgba(110, 110, 110, 1)',\n note: 'HadISD',\n values: baseline,\n timestep: 'Baseline (1991-2020)',\n normal_curve: get_normal_curve(baseline)\n })\n projections.forEach(series => {\n const midcentury = series.values.filter(d => d.date.getFullYear() >= 2035 && d.date.getFullYear() <= 2064);\n const endcentury = series.values.filter(d => d.date.getFullYear() >= 2070 && d.date.getFullYear() <= 2099);\n arr.push({\n ...series,\n timestep:'Mid-Century (2035-2064)',\n values: midcentury,\n normal_curve: get_normal_curve(midcentury),\n })\n arr.push({\n ...series,\n timestep:'End-Century (2070-2099)',\n values: endcentury,\n normal_curve: get_normal_curve(endcentury),\n })\n })\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2361,"value":"md `#### Get Observed Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"baseline = {\n const response = await d3.json(`https://api.cal-adapt.org/api/series/${climvar.id}_day_hadisd/events/?g=${JSON.stringify(station.geometry)}&imperial=true`);\n const data = transformResponse(response);\n // Filter for season\n const filteredBySeason = data.filter(d => {\n if (season.months.includes(d.date.getMonth())) {\n return true\n }\n return false\n })\n return filteredBySeason.filter(d => d.date.getFullYear() >= 1991 && d.date.getFullYear() <= 2020)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2810,"value":"md `#### Get Projected Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2819,"value":"projections = await Promise.all(models.map(model => getProjections(model)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2817,"value":"models = [\n { key:'HadGEM2-ES', color:'rgba(214, 39, 40, 1)', note: 'warm/dry'}, { key:'MIROC5', color:'rgba(148, 103, 189, 1)', note: 'complement'}, {key: 'CanESM2', color:'rgba(188, 189, 34, 1)', note: 'cooler/wetter'}, {key: 'CNRM-CM5', color:'rgba(23, 190, 207, 1)', note: 'average'}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2813,"value":"getProjections = async function (model) {\n let url = `https://api.cal-adapt.org/api/series/${climvar.id}_day_${model.key}_rcp45/events/?g=${JSON.stringify(station.geometry)}&imperial=true`\n let response = await d3.json(url);\n const values = transformResponse(response);\n // Filter for season\n const filteredBySeason = values.filter(d => {\n if (season.months.includes(d.date.getMonth())) {\n return true\n }\n return false\n })\n return { ...model, values: filteredBySeason }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"md `#### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2456,"value":"function dnorm_standard(x) {\n return 1 / Math.sqrt(2 * Math.PI) * Math.exp(-0.5 * Math.pow(x, 2));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2454,"value":"function dnorm(x, mean = 0, sd = 1) {\n return 1 / sd * dnorm_standard((x - mean) / sd)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2878,"value":"get_normal_curve = (data) => {\n const values = data.map(d => d.value);\n const mean = d3.mean(values)\n const stdev = d3.deviation(values)\n const extent = d3.extent(values)\n const points = [];\n for (let value of d3.range(...extent, bin_width / 10)) {\n points.push([value, dnorm(value, mean, stdev)])\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3001,"value":"labels = {\n const arr = models.map(d => ({ label: `${d.key} (${d.note})`, color: d.color }))\n return arr\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3028,"value":"x_extent = d3.extent(d3.merge(data.map(d => d.values)).map(c => c.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2665,"value":"y_max = {\n const normals = data.map(d => d.normal_curve)\n const maxes = normals.map(normal => d3.max(normal, d => d[1]))\n return d3.max(maxes)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2430,"value":"line = d3.line()\n .curve(d3.curveMonotoneX)\n .x(d => x(d[0]))\n .y(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2408,"value":"x = d3.scaleLinear()\n .domain(x_extent).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2410,"value":"y = {\n return d3.scaleLinear()\n .domain([0, y_max]).nice()\n .range([height - margin.bottom, margin.top])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2412,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Temperature\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2414,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Frequency of Occurrence \"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3144,"value":"chartTitle = ele =>\n ele\n .text(d => d.timestep)\n .attr(\"transform\", `translate(${width / 2}, ${20})`)\n .style(\"text-anchor\", \"middle\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"transformResponse = function(response) {\n const parseDate = d3.utcParse('%Y-%m-%dT%H:%M:%S%Z');\n const { name, index, data } = response;\n const values = data.map((d, i) => {\n return { date: parseDate(index[i]), value: d };\n });\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"userDateParse = d3.timeParse('%Y-%m-%d');","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"stations = d3.json('https://api.cal-adapt.org/api/hadisdstations/?pagesize=38')","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"userDateFormat = d3.timeFormat('%B %e');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"dateParse = d3.timeParse('%Y-%m-%d');","pinned":false,"hidden":false,"mode":"ojs"},{"id":2420,"value":"color = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3120,"value":"width = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":2418,"value":"height = 375","pinned":false,"hidden":false,"mode":"ojs"},{"id":2416,"value":"margin = ({top: 50, right: 20, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1977,"value":"md `#### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}