2e:null 2f:["$","title",null,{"children":"Comparing distributions | Shruti Mukhtyar | Observable"}] 34:[] 32:{"id":"1044d3e0b9b8988d","slug":"comparing-distributions","title":"Comparing distributions","thumbnail":"2a3a79302c4b2d38e9903599e48e56fd1befcf2acb8fb1a67f338134a4db26ee","access_level":"public","create_time":"$D2021-06-28T20:34:00.450Z","update_time":"$D2021-06-30T18:16:15.933Z","view_time":null,"first_public_time":"$D2021-06-30T17:50:39.532Z","has_unpublished_edits":null,"fork":{"id":"e6f98b69028f028b","slug":"observed-data-hadisd","title":"Observed Historical Data - HadISD","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":3223,"publish_version":3223,"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":1,"collection":{"id":"738615d0ffc41626","slug":"cal-adapt","title":"Cal-Adapt","owner":{"id":"6636080f8b9f94b8","login":"mukhtyar","name":"Shruti Mukhtyar"}},"type":"notebook","body":{"title":"Comparing distributions","cells":[{"id":0,"value":"md`# Comparing distributions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"viewof station = Inputs.select(stations.features, {label: \"Station\", format: x => x.properties.name})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1945,"value":"md `****************************`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1884,"value":"md `## Daily ${climvar.label} data at ${station.properties.name} weather station for ${season.label}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1942,"value":"md `****************************`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"md `#### Calculate normal curves`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2361,"value":"md `#### Get Observed Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2810,"value":"md `#### Get Projected Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2819,"value":"projections = await Promise.all(models.map(model => getProjections(model)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"md `#### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3028,"value":"x_extent = d3.extent(d3.merge(data.map(d => d.values)).map(c => c.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2408,"value":"x = d3.scaleLinear()\n .domain(x_extent).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"userDateParse = d3.timeParse('%Y-%m-%d');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"stations = d3.json('https://api.cal-adapt.org/api/hadisdstations/?pagesize=38')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"userDateFormat = d3.timeFormat('%B %e');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"dateParse = d3.timeParse('%Y-%m-%d');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2420,"value":"color = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3120,"value":"width = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2418,"value":"height = 375","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2416,"value":"margin = ({top: 50, right: 20, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1977,"value":"md `#### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"