31:T7c7,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis) .call(g => g.selectAll(".tick line") .clone() .attr("stroke-opacity", 0.1) .attr("y1", -height + margin.top + margin.bottom)); svg.append("g") .call(yAxis) .call(g => g.selectAll(".tick line") .clone() .attr("stroke-opacity", 0.1) .attr("x1", width - margin.left - margin.right)); svg.append("g") .attr("fill", "#a0b0c0") .selectAll("rect") .data(bins) .join("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); const annotation = svg .append("g") .attr("class", "annotation") annotation.selectAll("line") .data(annotations) .join("line") .attr("stroke-dasharray", ("3,3")) .attr("stroke", "black") .attr('stroke-width','3px') .attr("x1", d => x(d.value)) .attr("x2", d => x(d.value)) .attr("y1", y(0)) .attr("y2", margin.top + 5); const textEls = annotation.selectAll("text") .data(annotations) .join("text") .attr("x", d => x(d.value)) .attr("y", margin.top) .attr("text-anchor", "middle") .style("font-size", "13px") textEls.append("tspan") .text(d => d.label.split(' ')[0]) .attr("x", d => x(d.value)) .attr("y", margin.top - 30) textEls.append("tspan") .text(d => d.label.split(' ')[1]) .attr("x", d => x(d.value)) .attr("y", margin.top - 15) textEls.append("tspan") .text(d => `${parseFloat(d.value).toFixed(1)}°F`) .attr("x", d => x(d.value)) .attr("y", margin.top); svg.append("path") .datum(normal_curve) .attr("stroke", "#c4238f") .attr("stroke-width", 2) .attr("d", line) .attr("fill", "none"); return svg.node(); }32:[] 2f:{"title":"Observed Historical Daily Data - GridMET","cells":[{"id":0,"value":"md`# Observed Historical Daily Data - GridMET`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2772,"value":" md `The **gridMET Observed Meteorological Data** product on **Cal-Adapt** is a modified version (temporally capped at 2020, and spatially clipped to Cal-Adapt area) of gridMET. [gridMET](http://www.climatologylab.org/gridmet.html) is a dataset of daily high-spatial resolution (~4-km, 1/24th degree) surface meteorological data covering the contiguous US from 1979-yesterday. gridMET is produced by the Climatology Lab at U. C. Merced.\n- [Download NetCDF files from Cal-Adapt Data Server](http://albers.cnr.berkeley.edu/data/gridmet/)\n- [Access daily & annual data from Cal-Adapt API](https://api.cal-adapt.org/api/datasets/8edad3fa-427c-4fac-b7be-5af81d6b944f/)\n- [Explore annual data in a Observable Notebook](https://observablehq.com/@mukhtyar/observed-historical-annual-averages-gridmet)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2879,"value":"viewof lon = Inputs.text({label: \"Longitude\", placeholder: \"-121.46\", value: \"-121.46\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2884,"value":"viewof lat = Inputs.text({label: \"Latitude\", placeholder: \"38.58\", value: \"38.58\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"viewof climvar = Inputs.select([{label:\"Maximum Temperature\", id:\"tmmx\"}, {label:\"Minimum Temperature\", id:\"tmmn\"}], {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":2785,"value":"viewof period = Inputs.radio(new Map([[\"Complete Record\", \"all\"], [\"Baseline (1991-2020)\", \"baseline\"]]), {value: \"all\", label: \"Time Period\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"md `****************************`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1884,"value":"md `## Observed daily ${climvar.label} from ${start}–${end} data at ${lon}, ${lat} for ${season.label}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2928,"value":"DOM.download(serialize(data), \"daily_data.csv\", \"Download CSV\")","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":2467,"value":"bins = d3.histogram()\n .domain(x.domain())\n .thresholds(d3.range(...x.domain(), bin_width))(data.map(d=> d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1942,"value":"md `****************************`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"md `#### Calculate stats for Observed`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2687,"value":"mean = d3.mean(values)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2690,"value":"stdev = d3.deviation(values)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2692,"value":"min = d3.min(values)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2695,"value":"max = d3.max(values)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2813,"value":"annotations = [\n {\n label: `${season.label} Mean`,\n value: d3.mean(values),\n },\n { \n label: '90th Percentile',\n value: d3.quantile(values, 0.90)\n },\n { \n label: '99th Percentile',\n value: d3.quantile(values, 0.99)\n },\n]","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":2656,"value":"normal_curve = {\n const points = [];\n for (let value of d3.range(...x.domain(), bin_width / 10)) {\n points.push([value, dnorm(value, mean, stdev) * bin_width * data.length])\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2298,"value":"end = +d3.timeFormat('%Y')(dateRange[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2291,"value":"start = +d3.timeFormat('%Y')(dateRange[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2283,"value":"dateRange = d3.extent(dates)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2867,"value":"location = `POINT(${lon}+${lat})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2361,"value":"md `#### Get Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2284,"value":"dates = data.map(d => d.date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2814,"value":"values = data.map(d => d.value).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1868,"value":"data = {\n if (period === \"baseline\") {\n return timeseries.filter(d => d.date.getFullYear() >= 1991 && d.date.getFullYear() <= 2020)\n }\n return timeseries\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"timeseries = {\n const response = await d3.json(`https://api.cal-adapt.org/api/series/${climvar.id}_day_gridmet/events/?g=${location}&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;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"md `#### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2611,"value":"curve_max = dnorm(mean, mean, stdev) * bin_width * data.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":2665,"value":"bin_max = d3.max(bins, d => d.length)","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(d3.extent(data, d=> d.value)).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, d3.max([curve_max, bin_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\"))","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":2418,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":2416,"value":"margin = ({top: 40, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1977,"value":"md `#### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2930,"value":"import {serialize} from \"@palewire/saving-csv\"","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":"$W32","stdlib":"1","titling":"auto"}