31:T802,{ const svg = d3.select(DOM.svg(width, 40)); yield svg.node(); // Rearrange legend produced by d3-svg-legend to align labels horizontally // next to swatches function rearrangeLegendCells(cells, horizontalGap=10, verticalGap=10, rightMargin=100) { let xPos = 0; let yPos = 0; let chartWidth = width - margin.left - margin.right - rightMargin; cells.forEach((el, i) => { if (i === 0) return; if (xPos < chartWidth) { const lastElWidth = cells[i-1].getBBox().width; xPos = xPos + lastElWidth + horizontalGap; } else { xPos = 0; const lastElHeight = cells[i-1].getBBox().height; yPos = lastElHeight + verticalGap; } el.setAttribute('transform', `translate(${xPos}, ${yPos})`); }); } // Create legend for the Line data const scaleLine = d3.scaleOrdinal() .domain(legendLabels .map(d => d.name) ) .range(legendLabels .map(d => d.color) ); const legendOrdinalLine = d3Legend.legendColor() .shapePadding(5) .labels(legendLabels.map(d => d.label)) .scale(scaleLine); const gLine = svg.append("g").call(legendOrdinalLine); const cellsLine = Array.from(gLine.node().querySelectorAll('.cell')); rearrangeLegendCells(cellsLine); // Create legend for the Area data const scaleArea = d3.scaleOrdinal() .domain(legendLabels .filter(d => d.name !== "livneh") .map(d => d.name) ) .range(legendLabels .filter(d => d.name !== "livneh") .map(d => fills[d.name].url()) ); const legendOrdinalArea = d3Legend.legendColor() .shapePadding(10) .labels(["Modeled Historical Range", "Medium Emissions Range", "High Emissions Range"]) .scale(scaleArea); svg.call(fills["rcp45"]); svg.call(fills["rcp85"]); svg.call(fills["historical"]); const gArea = svg.append("g").attr("transform", "translate(0, 25)").call(legendOrdinalArea); const cellsArea = Array.from(gArea.node().querySelectorAll('.cell')); rearrangeLegendCells(cellsArea); }32:T796,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); var filter = svg.append("defs") .append("filter") .attr("id", "constantOpacity"); var feComponentTransfer = filter.append('feComponentTransfer'); feComponentTransfer .append('feFuncA') .attr('type', 'table') .attr('tableValues', '0 .5 .25'); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const t = svg.transition() .duration(750); svg.call(fills["rcp45"]); svg.call(fills["rcp85"]); svg.call(fills["historical"]); const lines = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(line_data) .join( enter => enter.append('path') //.style("mix-blend-mode", "multiply") .attr("d", d => line(d)) .attr("stroke", d => colors(d[0].name)) .call(enter => enter.transition(t) .attr('opacity', 1)), update => update .attr("stroke", d => colors(d[0].name)) .call(update => update.transition(t)), exit => exit .attr("stroke", 'red') .call(exit => exit.transition(t) .attr("opacity", 0) .remove()) ) const areas = svg.append("g") .attr("filter", "url(#constantOpacity)") .selectAll("path") .data(envelope_data) .join("path") .attr("d", d => area(d)) .attr("fill-opacity", "25%") .attr("fill", d => fills[d[0].name].url()) //.attr("fill", c.rcp45.url()) const avg = svg.append('g') .attr("stroke", "black") .selectAll("path") //.data(envelope_data) .join("path") .attr("d", line([[1, 3], [2, 7], [3, 2], [5, 2]])); svg.call(hover, lines, areas); return svg.node(); }33:T78a,function hover(svg, lines, areas) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const verticalMarker = svg.append("g") .attr("display", "none"); verticalMarker.append("line") .attr('stroke', 'black') .attr('x1', 0) .attr('y1', height - margin.top) .attr('x2', 0) .attr('y2', margin.bottom); const tooltip = d3.select(view).select(".tooltip"); tooltip .style('background', 'black') .style('color', 'white') .style('padding', '10px') .style('opacity', '0.8'); function moved() { d3.event.preventDefault(); const xm = x.invert(d3.event.layerX); const bisectDate = d3.bisector(d => d.date).left; const i1 = bisectDate(data_by_date, xm, 1); if (i1 < 0) return; const i0 = i1 - 1; if (i0 < 0) return; const i = xm - data_by_date[i0].date > data_by_date[i1].date - xm ? i1 : i0; const value = data_by_date[i]; if (!value) return; const extent = d3.extent(d3.merge(value.series.map(d => [d.min, d.avg, d.max]))); verticalMarker.attr("transform", `translate(${x(value.date)},0)`); verticalMarker.select("line") .attr('y1', y(extent[1])) .attr('y2', y(extent[0])); const xLimit = d3.min(x(value.date), width-margin.right-margin.left); tooltip //.style("left", `${x(value.date) - 20}px`) .style("left", `${xLimit}px`) .style("top", `${y(extent[1]) - 50}px`) .html(getTooltip(value)); } function entered() { verticalMarker.attr("display", null); tooltip.style("visibility", "visible"); } function left() { verticalMarker.attr("display", "none"); tooltip.style("visibility", "hidden"); } }34:T526,thirty_yr_data = { const data = []; const timePeriod = [ {start:1961, end:1990, period:'baseline'}, {start:2035, end:2064, period:'mid-century'}, {start:2070, end:2099, period:'end-century'} ]; const line_data_thirty = timePeriod.map(({start, end, period}) => { const filtered_series = []; line_data.forEach(series => { const filtered = series.filter(d => d.date.getFullYear() >= start && d.date.getFullYear() <= end) .map(d => ({name:d.name, period, stat:'avg', date:d.date, value:d.value})) if (filtered.length > 0) { filtered_series.push(filtered); } }); return filtered_series; }); const envelope_data_thirty = timePeriod.map(({start, end, period}) => { const filtered_series = []; envelope_data.forEach(series => { const filtered = series.filter(d => d.date.getFullYear() >= start && d.date.getFullYear() <= end); if (filtered.length > 0) { const minSeries = filtered.map(d => ({name:d.name, period, stat:'min', date:d.date, value: d.min})); const maxSeries = filtered.map(d => ({name:d.name, period, stat:'max', date:d.date, value: d.max})); filtered_series.push(minSeries, maxSeries); } }); return filtered_series; }); return [...line_data_thirty, ...envelope_data_thirty]; }35:[] 2f:{"title":"Local Climate Snapshot","cells":[{"id":503,"value":"md`# Local Climate Snapshot\nData: Cal-Adapt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"viewof params = inputsGroup(\n \n[\n [ \n select({\n title: \"Climate Variable\",\n options: climvars,\n value: \"tasmax\"\n }),\n caMapCoordinates({\n title: \"Location\",\n description: \"Click within CA boundary\",\n width: 300,\n value: [-121.46, 38.58],\n }),\n ]\n],\n \n[\n ['climvar', 'g']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"viewof chart_type = select({\n title: \"Select Chart Type\",\n options: chartTypes,\n value: \"absolute\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"view = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"format = d3.format(\"0.1f\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1281,"value":"fills = ({\n rcp45: textures.circles()\n .size(5)\n .radius(2)\n .fill(colors(\"rcp45\")),\n rcp85: textures.circles()\n .size(5)\n .radius(2)\n .fill(colors(\"rcp85\")),\n historical: textures.circles()\n .size(5)\n .radius(2)\n .fill(colors(\"historical\"))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"legendLabels = [\n {\n name: \"livneh\",\n label: \"Observed Historical (1950-2005)\",\n color: \"#595959\",\n },\n {\n name: \"historical\",\n label: \"Modeled Historical (1950-2005)\",\n color: \"#a6a4a4\",\n },\n {\n name: \"rcp45\",\n label: \"RCP 4.5 (2006-2099)\",\n color: \"#3b99a7\",\n },\n {\n name: \"rcp85\",\n label: \"RCP 8.5 (2006-2099)\",\n color: \"#8357AA\",\n },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"tooltipLabels = ({\n livneh: \"Observed Historical Avg\",\n historical: \"Modeled Historical Avg\",\n rcp45: \"RCP 4.5 Avg\",\n rcp85: \"RCP 8.5 Avg\",\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"function getTooltip(d) {\n const date = d.date.getFullYear();\n const panels = d.series.map((row) => {\n return `${tooltipLabels[row.name]}: ${format(row.avg)}`;\n });\n return `\n ${date}\n ${panels.join(\" \")}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"xmin = d3.min(line_series, arr => d3.min(arr, d => d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"xmax = d3.max(line_series, arr => d3.max(arr, d => d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"xAxisTickFormat = d3.timeFormat('%Y');","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"x = d3.scaleTime()\n .domain([xmin, xmax])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"ymin = d3.min(area_data, arr => d3.min(arr, d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"ymax = d3.max(area_data, arr => d3.max(arr, d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"y = d3.scaleLinear()\n .domain([ymin, ymax]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", \"1rem\")\n .text(climvar_label))","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"colors = d3.scaleOrdinal()\n .domain(legendLabels.map(d => d.name))\n .range(legendLabels.map(d => d.color));","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"line = d3.line()\n //.defined(d => !isNaN(d))\n .x((d) => x(d.date))\n .y(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"area = d3.area()\n //.defined(d => !isNaN(d))\n .x((d) => x(d.date))\n .y0(d => y(d.min))\n .y1(d => y(d.max))","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"endpoint = 'https://api.cal-adapt.org/api';","pinned":false,"hidden":false,"mode":"ojs"},{"id":1423,"value":"md`### Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"climvar_label = {\n const value = climvars.find(d => d.value === params.climvar);\n return `${value.label} (${value.units})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"climvars = [\n { label: \"Maximum Temperature\", value: \"tasmax\", units: \"°F\" },\n { label: \"Minimum Temperature\", value: \"tasmin\", units: \"°F\" },\n { label: \"Precipitation\", value: \"pr\", units: \"inch\" },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"scenarios = ({\n historical: \"Historical\",\n rcp45: \"RCP 4.5\",\n rcp85: \"RCP 8.5\",\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"location = `POINT(${params.g[0]}+${params.g[1]})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1593,"value":"extent = `${params.g[1]-0.05},${params.g[0]-0.05},${params.g[1]+0.05},${params.g[0]+0.05}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1425,"value":"md`### List of Timeseries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"line_urls = [\n `${endpoint}/series/${params.climvar}_year_livneh/events/?g=${location}&imperial=true`,\n `${endpoint}/series/${params.climvar}_year_ens32avg_historical/events/?g=${location}&imperial=true`,\n `${endpoint}/series/${params.climvar}_year_ens32avg_rcp45/events/?g=${location}&imperial=true`,\n `${endpoint}/series/${params.climvar}_year_ens32avg_rcp85/events/?g=${location}&imperial=true`,\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"area_urls = [\n `${endpoint}/series/${params.climvar}_year_ens32max_historical/events/?g=${location}&imperial=true`,\n `${endpoint}/series/${params.climvar}_year_ens32min_historical/events/?g=${location}&imperial=true`,\n `${endpoint}/series/${params.climvar}_year_ens32max_rcp45/events/?g=${location}&imperial=true`,\n `${endpoint}/series/${params.climvar}_year_ens32min_rcp45/events/?g=${location}&imperial=true`,\n `${endpoint}/series/${params.climvar}_year_ens32max_rcp85/events/?g=${location}&imperial=true`,\n `${endpoint}/series/${params.climvar}_year_ens32min_rcp85/events/?g=${location}&imperial=true`,\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"noaa_stations_list = {\n const response = await fetch(`https://www.ncdc.noaa.gov/cdo-web/api/v2/stations/?extent=${extent}&datasetid=GSOY&datacategoryid=TEMP&startdate=2017-12-31&enddate=2019-12-31`, {\n headers: {\n token: \"gSGLnqitlqxOUGeuakGLaIabUlQRjCDw\"\n }\n })\n const data = response.json();\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1620,"value":"noaa_station = noaa_stations_list.results[2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"noaa_station_data = {\n const response = await fetch(`https://www.ncdc.noaa.gov/cdo-web/api/v2/data?datasetid=GSOY&startdate=2018-12-31&enddate=2019-12-31&units=standard&stationid=GHCND:USW00023271`, {\n headers: {\n token: \"gSGLnqitlqxOUGeuakGLaIabUlQRjCDw\"\n }\n })\n const data = response.json();\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1651,"value":"noaa_datasets = {\n const response = await fetch(`https://www.ncdc.noaa.gov/cdo-web/api/v2/datasets?datatypeid=TMAX`, {\n headers: {\n token: \"gSGLnqitlqxOUGeuakGLaIabUlQRjCDw\"\n }\n })\n const data = response.json();\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"getData = async function (url) {\n let values;\n let response = await d3.json(url);\n let { data, index, name } = response;\n name = name.split('_').pop();\n const parseDate = d3.utcParse('%Y-%m-%dT%H:%M:%SZ');\n \n values = index\n .map((d, i) => {\n const year = parseDate(d).getFullYear();\n let date;\n if (year === 2005) {\n date = new Date(+year, 11, 31)\n } else {\n date = new Date(+year, 0, 1);\n }\n return {\n name,\n date,\n value: +data[i]\n }\n });\n \n if (name === 'livneh') {\n values = values\n .filter(d => d.date.getFullYear() <= 2005)\n .map((d) => {\n //d.name = 'historical';\n return d;\n });\n }\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"makeEnvelope = function (data) {\n const [arr1, arr2] = data;\n const combinedArray = [];\n \n arr1.forEach((item1) => {\n arr2.forEach((item2) => {\n if (item1.date.getFullYear() === item2.date.getFullYear()) {\n let min;\n let max;\n if (item1.value <= item2.value) {\n min = item1.value;\n max = item2.value;\n } else {\n min = item2.value;\n max = item1.value;\n }\n combinedArray.push({\n name: item1.name,\n date: item1.date,\n min,\n max,\n });\n }\n });\n });\n \n return combinedArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"md`### Download data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"line_series = await Promise.all(line_urls.map(url => getData(url)));","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"area_series = await Promise.all(area_urls.map(url => getData(url)));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1440,"value":"md`### Process data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"line_data = line_series.map(series => series.map(d => {\n return {\n name: d.name,\n date: d.date,\n value: d.value - baseline_avg,\n }\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"area_data = area_series.map(series => series.map(d => {\n return {\n name: d.name,\n date: d.date,\n value: d.value - baseline_avg,\n }\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"envelope_data = {\n const historical = area_data.filter((arr) => arr[0].name === 'historical');\n const rcp45 = area_data.filter((arr) => arr[0].name === 'rcp45');\n const rcp85 = area_data.filter((arr) => arr[0].name === 'rcp85');\n return [makeEnvelope(historical), makeEnvelope(rcp45), makeEnvelope(rcp85)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"data_by_date = {\n const data = d3.merge([...envelope_data, ...line_data]);\n // Nest data by date\n const dataByDate = d3.nest()\n .key(d => d.date)\n .key(d => d.name)\n .entries(data)\n .map((row) => {\n const date = new Date(row.key);\n const series = row.values.map((series) => {\n const value = {};\n value.name = series.key;\n series.values.forEach((d) => {\n if (d.min) {\n value.min = d.min;\n value.max = d.max;\n } else {\n value.avg = d.value;\n }\n });\n return value;\n });\n return { date, series };\n });\n \n return dataByDate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"chartTypes = [\n { label: \"Absolute Values\", value: \"absolute\", avg: 0 },\n { label: \"Change from 1961-1990 Baseline (Modeled Historical)\", value: \"observed_historical_baseline\", avg: 72 },\n { label: \"Change from 1961-1990 Baseline (Observed Historical)\", value: \"modeled_historical_baseline\", avg: 73 },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"baseline_avg = chartTypes.find(d => d.value === chart_type).avg","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"modeled_historical_baseline = {\n const historical = line_series.find(arr => arr[0].name === 'historical')\n const baseline = historical.filter(d => d.date.getFullYear() >= 1961 && d.date.getFullYear() <= 1990); \n const avg = d3.mean(baseline, d => d.value);\n return avg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"observed_historical_baseline = {\n const historical = line_series.find(arr => arr[0].name === 'livneh')\n const baseline = historical.filter(d => d.date.getFullYear() >= 1961 && d.date.getFullYear() <= 1990); \n const avg = d3.mean(baseline, d => d.value);\n return avg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"md`### Exporting data for 30 yr time periods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"csv = {\n const merged = d3.merge(d3.merge(thirty_yr_data));\n return d3.csvFormat(merged);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"DOM.download(() => blob, \"thirty_year_data.csv\", \"Save as CSV\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"md`### Import libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"d3Annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"textures = require(\"https://cdn.rawgit.com/riccardoscalco/textures/master/dist/textures.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"import {text, select} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"import {caMapCoordinates} from \"@mukhtyar/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"d3Legend = require(\"d3-svg-legend\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"function inputsGroup(views,names){\n const form = html`

${\n views.map(row => html`

${\n row.map(input => html`

${input}

`)\n }

`;\n \n form.oninput = () => {\n form.value = views.map(row => row.map(input => input.value))\n if(names){\n names.forEach((row,i)=>row.forEach((c,j)=> form.value[i][j]!=null && (form.value[c]=form.value[i][j])))\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"html`\n\n`;","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}