31:T546,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); 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()) ) svg.call(hover, lines); return svg.node(); }32:T7c7,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]))); let yMin, yMax; if (extent[1] === extent[0]) { yMin = extent[0] - 0.25; yMax = extent[1] + 0.25; } else { yMin = extent[0]; yMax = extent[1]; } verticalMarker.attr("transform", `translate(${x(value.date)},0)`); verticalMarker.select("line") .attr('y1', y(yMax)) .attr('y2', y(yMin)); tooltip .style("left", `${x(value.date) - 20}px`) .style("top", `${y(extent[1]) - 50}px`) .html(getLabel(value)); } function entered() { verticalMarker.attr("display", null); tooltip.style("visibility", "visible"); } function left() { verticalMarker.attr("display", "none"); tooltip.style("visibility", "hidden"); } }33:T412,html` `;34:[] 2f:{"title":"Local Climate Snapshot - Extreme Heat & Warm Nights","cells":[{"id":503,"value":"md`# Local Climate Snapshot - Extreme Heat & Warm Nights\nData: Cal-Adapt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"viewof params = inputsGroup(\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":1059,"value":"view = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"html`\n

\n \n Modeled Historical (1950-2005)\n

\n\n

\n \n RCP 4.5 (2006-2099)\n

\n\n

\n \n RCP 8.5 (2006-2099)\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"format = d3.format(\"0.1f\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"seriesLabels = ({\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 getLabel(d) {\n const date = d.date.getFullYear();\n const panels = d.series.map((row) => {\n return `${seriesLabels[row.name]}: ${format(row.avg)}`;\n });\n return `\n ${date}\n ${panels.join(\" \")}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"$32","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_data, arr => d3.min(arr, d => d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"xmax = d3.max(line_data, 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(line_data, arr => d3.min(arr, d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"ymax = d3.max(line_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([\"historical\", \"rcp45\", \"rcp85\"])\n .range([\"#999999\", \"#3b99a7\", \"#8357AA\"]);","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":515,"value":"endpoint = 'https://api.cal-adapt.org/api';","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}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"climvars = [\n { label: \"Number of Extreme Heat Days in a Year\", value: \"exheat\", units: \" \" },\n { label: \"Number of Warm Nights in a Year\", value: \"exheatn\", units: \" \" }\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":511,"value":"line_urls = [\n `${endpoint}/series/${params.climvar}_year_ens32avg_historical/events/?g=${location}`,\n `${endpoint}/series/${params.climvar}_year_ens32avg_rcp45/events/?g=${location}`,\n `${endpoint}/series/${params.climvar}_year_ens32avg_rcp85/events/?g=${location}`,\n];","pinned":false,"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":556,"value":"line_data = await Promise.all(line_urls.map(url => getData(url)));","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"data_by_date = {\n const data = d3.merge([...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":6,"value":"d3 = require(\"d3@5\")","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":1160,"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":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}