31:T548,md`### Why Stochastic Analysis Traditional financial analyses rely on over-simplified assumptions, with perhaps a handful of sensitivities regarding utility rates, building demand, and weather -- but that’s not how the real world works. More robust analyses should account for a few key factors: * Utility rates swing dramatically. For instance, in SDG&E territory, Critical Peak Pricing (CPP) Days can occur 1-18 times annually (during these days, peak prices increase 10x). Traditional analyses would not capture this variability in CPP occurrences, leading to inaccurate analyses. * Weather naturally varies by day and season. A solar project’s economics might look great if an analysis assumes sunny weather, when solar generation can help avoid peak rates, but what happens when it’s cloudy? * Building demand frequently shifts. For instance, changes to a building’s occupancy patterns (9am-5pm vs. 9am-7pm) will impact its exposure to peak rates. To understand the full range of possible financial outcomes — specifically the probability of outcomes (from median cases to best- and worst-case scenarios) — Integral built a model that accounts for the possible variability of these key factors. Ultimately, this resulted in a stochastic analysis of 60,000 simulations. The results of this analysis are below.

`32:T5ba,md`### Solar vs. Solar + Storage | Best Rate Tariff This scatterplot shows the results of the stochastic model, where each point represents one simulation, in order to answer: 1. Does solar-only, or solar + storage, deliver greater financial benefit? 2. Which [SDG&E](https://www.sdge.com/sites/default/files/elec_elec-scheds_al-tou.pdf) utility rate tariff offers the most financial benefit? The Y-Axis represents the business-as-usual (BAU) base cost: this is the total utility cost (from SDG&E) that Horton would pay without solar / solar + storage. The X-axis represents costs with solar and/or storage: this is the total utility cost that Horton would pay, inclusive of payments to SDG&E and the PPA provider. Points that fall to the left side of the dotted line represent scenarios where solar / solar + storage saves money, while points to the right of the line represent increased costs relative to BAU. This analysis indicates that storage improves project economics (i.e. solar + storage proposals are generally to the left of solar-only proposals). The analysis also reveals that AL-TOU2-EECC-CPP is the optimal rate tariff (of the six available from SDG&E, each with unique seasonal demand charges and time of use charges) under almost all conditions. This insight is valuable, as it runs counter to conventional wisdom that the “distributed generation” tariffs (DG-R-EECC and DG-R-EECC-CPP) are best for solar and storage projects.

`33:T90e,scatterplot = { const container = d3.select(DOM.element('div')); container.style("position", "relative"); const canvas = container.append('canvas').node(); const context = canvas.getContext('2d'); const t = d => { return `Number of Simulations Shown: ${d3.format(",.0f")(d)}` } canvas.width = scatterplot_dimensions.width; canvas.height = scatterplot_dimensions.height; const svg = container.append('svg') .attr("width", canvas.width) .attr("height", canvas.height) .style("mix-blend-mode", "multiply") .style("position", "absolute") .style("top", '0px') .style("left", '0px'); svg.append("g").call(grid); svg.append("g").call(scatterplot_xAxis); svg.append("g").call(scatterplot_yAxis); svg.append("g").call(scatterplot_legend); svg.append("g").call(annotations); svg.selectAll("text").attr("font-size", 12).attr("font-family", "Open Sans"); let style = "font-family: Open Sans; color: #c1c1c1; font-size: 12px;" let num_simulations = svg.append("foreignObject") .attr("transform", `translate(${scatterplot_dimensions.width - 240},${scatterplot_margin.top - 40})`) .attr("width", 240) .attr("height", 100) .append("xhtml:div") .html(`

${t(0)}

`); for (const d of data) { context.globalAlpha = 0.3; context.fillStyle = "#e0e0e0"; context.beginPath(); context.arc(scatterplot_x(d.ppa_with_battery_cost), scatterplot_y(d.base_cost), 2, 0, 2*Math.PI); context.fill(); context.closePath(); context.beginPath(); context.arc(scatterplot_x(d.ppa_pv_only_cost), scatterplot_y(d.base_cost), 2, 0, 2*Math.PI); context.fill(); context.closePath(); } let l = display.length; let v = proposal === "ppa" ? "ppa_pv_only_cost" : "ppa_with_battery_cost" for (const [i,d] of d3.shuffle(display.slice()).entries()) { context.globalAlpha = 1; context.fillStyle = color(d.rate); context.beginPath(); context.arc(scatterplot_x(d[v]), scatterplot_y(d.base_cost), 2, 0, 2*Math.PI); context.fill(); context.closePath(); num_simulations.html(`

${t(i + 1)}

`); if (--l % 100 === 0) yield container.node(); } }34:Tf7d,box = { const svg = d3.create("svg") .attr("viewBox", [0, 0, box_dimensions.width, box_dimensions.height]); const tooltip = d3.select("body").append("div").call(createTooltip) const tipContent = d => { const html = ` Proposal: ${idlookup[d[0]].split("(")[0]}
Rate: ${rate_selection}
Median Cost: $${d3.format(".3s")(d[1].ppa[2])}
Interquartile Range: $${d3.format(".3s")(d[1].ppa[1])}-${d3.format(".3s")(d[1].ppa[3])}
Extremes: $${d3.format(".3s")(d[1].ppa[0])}-${d3.format(".3s")(d[1].ppa[4])} ` return html; } const g = svg.selectAll(".group") .data(grouped) .join("g") .attr("class", "group") .attr("transform", d => `translate(0,${box_y(d[0])})`); g.append("path") .attr("stroke", "#e0e0e0") .attr("opacity", 0.6) .attr("stroke-width", 2) .attr("d", d => ` M${box_x(d[1].ppa[0]) + 1},${box_y.bandwidth()* .5} H${box_x(d[1].ppa[4])} `); g.append("rect") .attr("fill", d => color(rate_selection)) .attr("stroke-width", 0) .attr("x", d => box_x(d[1].ppa[1]) ) .attr("y", d => box_y.bandwidth()* .25) .attr("height", box_y.bandwidth()*.5) .attr("width", d => box_x(d[1].ppa[3]) - box_x(d[1].ppa[1])); g.append("rect") .attr("fill", d => chroma(color(rate_selection)).darken(2)) // .attr("opacity", d => showtick(d)) .attr("x", d => box_x(d[1].ppa[2]) ) .attr("y", d => box_y.bandwidth()* .25) .attr("height", box_y.bandwidth()*.5) .attr("width", 5); g.append("circle") .attr("fill", d => color(rate_selection)) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("cx", d => box_x(d[1].ppa[0]) ) .attr("cy", d => box_y.bandwidth()* .5) .attr("r", 4); g.append("circle") .attr("fill", d => color(rate_selection)) // .attr("fill", d => ecm_highlight(d)) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("cx", d => box_x(d[1].ppa[4]) ) .attr("cy", d => box_y.bandwidth()* .5) .attr("r", 4); const target = g.append("rect") .attr("fill", "#fff") .attr("opacity", 0) .attr("stroke-width", 0) .attr("x", d => box_x(d[1].ppa[1]) ) .attr("y", d => box_y.bandwidth()* .25) .attr("height", box_y.bandwidth()*.5) .attr("width", d => box_x(d[1].ppa[4]) - box_x(d[1].ppa[0])); target.on("mouseover", function(event, d) { tooltip.style("display", null); // d3.select(this) // .attr("fill", "#333333"); tooltip.html(tipContent(d)) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mousemove", function(event, d) { tooltip .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function(d) { // d3.select(this) // .attr("fill", "#69b3a2"); tooltip.style("display", "none"); }); const xa = svg.append("g") .call(box_xAxis); const ya = svg.append("g") .call(box_yAxis); // const leg = svg.append("g") // .call(legend_box); svg.selectAll("text").attr("font-size", 12).attr("font-family", "Open Sans"); // return svg.node(); return Object.assign(svg.node(), { update(order) { box_y.domain(grouped.sort(order).map(d => d[0])); const t = svg.transition() .duration(750); g.data(grouped, d => d[0]) .order() .transition(t) .delay((d, i) => i * 20) .attr("transform", d => `translate(0,${box_y(d[0])})`); ya.transition(t) .call(box_yAxis) .selectAll(".tick") .delay((d, i) => i * 20); } }); }35:T4e8,distribution = { const svg = d3.create("svg") .attr("viewBox", [0, 0, distribution_dimensions.width, distribution_dimensions.height]) .style("overflow", "visible"); const marker = d3.line() .x(d => distribution_x(d[0])) .y(d => distribution_y(d[1])); svg.append("path") .datum([[0, 0], [0, 1]]) .attr("fill", "none") .attr("stroke", "#c1c1c1") .attr("stroke-width", 1.5) .attr("stroke-dasharray", "5,5") .attr("d", marker); svg.append("g") .call(distribution_grid); svg.append("g") .call(distribution_xAxis); svg.append("g") .call(distribution_yAxis); svg.append("g") .call(distribution_legend); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(distribution_data.series) .join("path") .attr("stroke", d => d.name.includes("PV Only")? "#c6c6c6" : color(rate_selection)) .style("mix-blend-mode", "multiply") .attr("d", d => line(d.values)); svg.selectAll("text").attr("font-size", 12).attr("font-family", "Open Sans"); svg.call(hover, path); return svg.node(); }36:Tb85,function hover(svg, path) { // const linecolor = d => d.name.includes("PV Only") ? "#fcd404": color(rate_selection); const createTooltip = el => { el .attr("class", "tooltip-distributions") .style("border-radius", "3px") .style("pointer-events", "none") .style("display", "none") .style("position", "absolute") .style("z-index", "1000") .style("padding", "12px") .style("font-weight", "regular") .style("font-family", "Open Sans") .style("font-size", "12px") .style("background", "white") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("color", "#333333") .style("line-height", "1.6") .style("pointer-events", "none"); } d3.select("body").selectAll(".tooltip-distributions").remove(); const tooltip = d3.select("body").append("div").call(createTooltip); const tipContent = (name, probability, limit) => { const html = ` System: ${name}
Rate: ${rate_selection}
There is a ${d3.format(".0%")(probability)} chance that the savings
will be greater than $${d3.format(".3s")(limit)} ` return html; } 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 dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); // dot.append("text") // .attr("font-family", "sans-serif") // .attr("font-size", 10) // .attr("text-anchor", "middle") // .attr("y", -8); function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = distribution_x.invert(pointer[0]); const ym = distribution_y.invert(pointer[1]); const i = d3.bisectCenter(distribution_data.costs, xm); const s = d3.least(distribution_data.series, d => Math.abs(d.values[i] - ym)); // path.attr("stroke", d => d === s ? linecolor(d) : "#ddd").filter(d => d === s).raise(); path.filter(d => d === s).raise(); dot.attr("transform", `translate(${distribution_x(distribution_data.costs[i])},${distribution_y(s.values[i])})`); // dot.select("text").text(`${s.name}, ${i}`); tooltip.style("display", null); tooltip.html(tipContent(s.name, s.values[i], distribution_data.costs[i])) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY + 10) + "px"); } // d => color(d.name.split("_")[1]) function entered() { // path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function left() { // path.style("mix-blend-mode", "multiply").attr("stroke", d => linecolor(d)); dot.attr("display", "none"); tooltip.style("display", "none"); } }37:T9ad,annotations = g => { const svg = g // .attr("transform", `translate(${margin.left},${margin.top})`) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "start"); const line = d3.line() .x(d => scatterplot_x(d[0])) .y(d => scatterplot_y(d[1])); const data = d3.zip(scatterplot_x.domain(), scatterplot_y.domain()); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#c1c1c1") .attr("stroke-width", 1.5) .attr("stroke-dasharray", "5,5") .attr("d", line); const arrowId = DOM.uid("arrow"); svg.append("defs") .append("marker") .attr("id", arrowId.id) .attr("markerHeight", 10) .attr("markerWidth", 10) .attr("refX", 5) .attr("refY", 2.5) .attr("orient", "auto") .append("path") .attr("fill", "#c1c1c1") .attr("d", "M0,0v5l7,-2.5Z"); let ratio = Math.abs((scatterplot_y.range()[1] - scatterplot_y.range()[0]) / (scatterplot_x.range()[1] - scatterplot_x.range()[0])); let scale = 360000; const mid = _.sum(scatterplot_x.domain())/2; const xa1 = mid - ratio * scale; const xa2 = mid - ratio * (scale - 50000); const ya1 = mid + 1/ratio * scale; const ya2 = mid + 1/ratio * (scale - 50000); const xb1 = mid + ratio * scale; const xb2 = mid + ratio * (scale - 50000); const yb1 = mid - 1/ratio * scale; const yb2 = mid - 1/ratio * (scale - 50000); const l = [[[xa2, ya2], [xa1, ya1]], [[xb2, yb2], [xb1, yb1]]]; svg.selectAll(".anno-lines") .data(l) .join("path") .attr("fill", "none") .attr("stroke", "#c1c1c1") .attr("opacity", 0.75) .attr("mix-blend-mode", "multiply") .attr("stroke-width", 1.5) .attr("marker-end", arrowId) .attr("d", line); let style = "font-family: Open Sans; color: #c1c1c1; font-size: 12px;" svg.append("foreignObject") .attr("transform", `translate(${scatterplot_x(l[1][1][0]) + 15}, ${scatterplot_y(l[1][1][1]) - 10})`) .attr("width", 100) .attr("height", 200) .append("xhtml:div") .html(`

Cost is greater than baseline

`); svg.append("foreignObject") .attr("transform", `translate(${scatterplot_x(l[0][1][0]) - 55}, ${scatterplot_y(l[0][1][1]) - 55})`) .attr("width", 80) .attr("height", 200) .append("xhtml:div") .html(`

Cost is less than baseline

`); }38:[] 2f:{"title":"Horton Solar + Storage","cells":[{"id":0,"value":"md`# Horton Solar + Storage\nThis microsite answers three core questions about Stockdale Capital’s Horton Plaza project:\n\n* Does a solar-only, or a solar + storage solution, deliver more financial benefit?\n\n* Which SDG&E utility rate tariff offers the most financial benefit?\n\n* Which vendor proposal delivers the most financial benefit? \n\nOur analysis reveals that a solar and storage solution, specifically Nexamp’s solar + ~1MW, 4-hour battery proposal, combined with the AL-TOU2-EECC-CPP rate tariff is the most cost-optimal PPA option for Horton Plaza.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof bid = Select(Object.entries(bids).map(d => d[0]), {format: d => bids[d].name, label: \"Vendor\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof proposal = Radio(new Map([[\"PPA - PV Only\", \"ppa\"], [\"PV and Battery\", \"battery\"]]), {value: \"battery\", label: \"Proposal\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof battery = Select(options, {format: d => idlookup[d], label: \"Battery\", disabled: proposal === \"battery\" ? false: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`
\n### PPA Proposal Comparisons\nThe chart below provides the range of possible financial outcomes associated with each proposal under the optimal AL-TOU2-EECC-CPP rate structure. Clearly, Nexamp’s solar and ~1 MW, 4-hour battery proposal is the superior option. Note that we are assuming the battery can be optimally operated for rate arbitrage, taking advantage of the demand savings to reduce peak demand charges throughout the year, particularly on CPP event days; this does not reserve capacity for backup power.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"box_dimensions = ({width: 960, height: 750})","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"update = box.update(order)","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`
\n### Cost Savings Probability\nThe graph below shows the cumulative probability distribution of cost savings for each proposal using the AL-TOU2-EECC-CPP rate tariff. The X-axis indicates the level of cost savings, and the Y-axis indicates the probability that the project will achieve that level of savings or more. There are two curves for each proposal: one curve shows the savings associated with the solar-only proposal, and the other shows the savings associated with the combined solar + storage proposal. The particular shape of the distribution of savings is the result of hourly variations in the load profile and solar output throughout the year.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"viewof proposal_selection = Select(new Map(selection_options), {label: \"Proposal\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"// md`

\n// ### Recommendations and Next Steps\n// Coming soon!

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"line = d3.line()\n // .defined(d => !isNaN(d))\n .curve(d3.curveBundle.beta(1))\n .x((d, i) => distribution_x(distribution_data.costs[i]))\n .y(d => distribution_y(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"distribution_x = d3.scaleLinear()\n .domain(d3.extent(distribution_range))\n .range([distribution_margin.left, distribution_dimensions.width - distribution_margin.right]).nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"distribution_margin = ({top: 70, right: 20, bottom: 60, left: 30})","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"distribution_dimensions = ({width: 960, height: 550})","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"distribution_xAxis = g => g\n .attr(\"transform\", `translate(0,${distribution_dimensions.height - distribution_margin.bottom})`)\n .call(d3.axisBottom(distribution_x).tickPadding(6).ticks(20, \".1s\"))\n .call(g => g.append(\"text\")\n .attr(\"x\", distribution_dimensions.width - 10)\n .attr(\"y\", 45)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Minimum Cost Savings ($)\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"distribution_y = d3.scaleLinear()\n .domain([0, 1])\n .range([distribution_dimensions.height - distribution_margin.bottom, distribution_margin.top]).nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"color(rate_selection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"distribution_yAxis = g => g\n .attr(\"transform\", `translate(${distribution_margin.left},0)`)\n .call(d3.axisLeft(distribution_y).tickPadding(6).ticks(10, \"%\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -distribution_margin.left - 10)\n .attr(\"y\", distribution_margin.top - 25)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(distribution_data.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"distribution_grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(distribution_y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + distribution_y(d))\n .attr(\"y2\", d => 0.5 + distribution_y(d))\n .attr(\"x1\", distribution_margin.left)\n .attr(\"x2\", distribution_dimensions.width - distribution_margin.right));","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"order = {\n\n// if (selector === \"risk\") {\n// return (a, b) => b[1].ppa[4] - a[1].ppa[4];\n// }\n// else {\n// return (a, b) => b[1].ppa[2] - a[1].ppa[2];\n// }\n \n return (a, b) => b[1].ppa[2] - a[1].ppa[2];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"options = bids[bid].options.length > 1? bids[bid].options.concat([\"ALL\"]): bids[bid].options","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"display = {\n if (proposal === \"ppa\") {\n return data.filter(d => d.id.substr(0, 2) === bid);\n }\n else {\n if (battery === \"ALL\") {\n return data.filter(d => d.id.substr(0, 2) === bid);\n }\n else {\n return data.filter(d => d.id === battery);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {Select, Radio} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"bids = ({\n C2: {name: \"C2\", options: [\"C2S2\", \"C2S4\", \"C2L2\", \"C2L4\"]},\n NE: {name: \"NextEra\", options: [\"NE1\", \"NE2\", \"NE4\"]},\n NA: {name: \"Nexamp\", options: [\"NA4\", \"NA2\"]},\n SP: {name: \"Sunpower\", options: [\"SP4\"]} \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"idlookup = ({\n C2S2: 'C2 Small (125-250)',\n C2S4: 'C2 Small (125-500)',\n C2L2: 'C2 Large (250-500)',\n C2L4: 'C2 Large (250-1000)',\n NE1: 'NextEra 1-hr (1470-1470)',\n NE2: 'NextEra 2-hr (735-1470)',\n NE4: 'NextEra 4-hr (368-1470)',\n NA4: 'Nexamp 4-hr (1131-4629)',\n NA2: 'Nexamp 2-hr (1131-2262)',\n SP4: 'Sunpower 4-hr (770-3080)',\n C2PPA: 'C2 PV-Only PPA',\n NEPPA: 'NextEra PV-Only PPA',\n NAPPA: 'Nexamp PV-Only PPA',\n SPPPA: 'Sunpower PV-Only PPA',\n ALL: 'Show All Options'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"data = Object.assign(await d3.csv(\"https://www.integraladvancedenergy.com/projects/horton/data/cost_output_21_02_24.csv\", d3.autoType), {x: \"Total Utility Cost $ →\", y: \"↑ Business as Usual $\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"color = d => d3.scaleOrdinal(rates, [\"#be4579\", \"#89cda8\", \"#fcd404\", \"#3b99a7\", \"#e26e42\", \"#c59fca\"])(d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"rates = {\n let set = new Set();\n data.map(d => set.add(d.rate))\n return Array.from(set);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"rate_selection = \"AL-TOU2-EECC-CPP\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(scatterplot_x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + scatterplot_x(d))\n .attr(\"x2\", d => 0.5 + scatterplot_x(d))\n .attr(\"y1\", scatterplot_margin.top)\n .attr(\"y2\", scatterplot_dimensions.height - scatterplot_margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(scatterplot_y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + scatterplot_y(d))\n .attr(\"y2\", d => 0.5 + scatterplot_y(d))\n .attr(\"x1\", scatterplot_margin.left)\n .attr(\"x2\", scatterplot_dimensions.width - scatterplot_margin.right));","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"scatterplot_margin = ({top: 65, right: 20, bottom: 50, left: 45})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"scatterplot_x = d3.scaleLinear()\n .domain([d3.min(data, d => Math.min(d.ppa_with_battery_cost, d.base_cost, d.ppa_pv_only_cost)), d3.max(data, d => Math.max(d.ppa_with_battery_cost, d.base_cost, d.ppa_pv_only_cost))+100000])\n // .domain(d3.extent(data, d => d.ppa_battery_total_cost).map((d, i) => i === 0 ? d - 50000 : d + 50000))\n .rangeRound([scatterplot_margin.left, scatterplot_dimensions.width - scatterplot_margin.right]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"scatterplot_y = d3.scaleLinear()\n // .domain(d3.extent(data, d => d.base_cost).map((d, i) => i === 0 ? d - 50000 : d + 50000))\n .domain([d3.min(data, d => Math.min(d.ppa_with_battery_cost, d.base_cost, d.ppa_pv_only_cost)), d3.max(data, d => Math.max(d.ppa_with_battery_cost, d.base_cost, d.ppa_pv_only_cost)) + 100000])\n .rangeRound([scatterplot_dimensions.height - scatterplot_margin.bottom, scatterplot_margin.top]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"scatterplot_dimensions = ({width: 960, height: 750})","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"scatterplot_xAxis = g => g\n .attr(\"transform\", `translate(0,${scatterplot_dimensions.height - scatterplot_margin.bottom})`)\n .call(d3.axisBottom(scatterplot_x).tickPadding(6).ticks(20, \".1s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", scatterplot_dimensions.width - 20)\n .attr(\"y\", 45)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"scatterplot_yAxis = g => g\n .attr(\"transform\", `translate(${scatterplot_margin.left},0)`)\n .call(d3.axisLeft(scatterplot_y).tickPadding(6).ticks(20, \".1s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -scatterplot_margin.left)\n .attr(\"y\", scatterplot_margin.top - 25)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"scatterplot_legend = g => {\n const svg = g\n .attr(\"transform\", `translate(${scatterplot_margin.left + 50},${scatterplot_margin.top + 30})`)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"start\");\n \n const rate = svg\n .selectAll(\"g\")\n .data(rates)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 25})`);\n \n rate.each(function(d, i) {\n \n d3.select(this).append(\"text\")\n .attr(\"fill\", \"#c1c1c1\")\n .attr(\"x\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(String);\n \n d3.select(this).append(\"circle\")\n .attr(\"fill\", color(d))\n .attr(\"stroke-width\", 0)\n .attr(\"r\", 4)\n .attr(\"cx\", -15)\n .attr(\"cy\", 0);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"distribution_legend = g => {\n const svg = g\n .attr(\"transform\", `translate(${distribution_dimensions.width - distribution_margin.right},10)`)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"start\");\n \n const item = svg\n .selectAll(\"g\")\n .data([\"BATTERY + PV\", \"PV ONLY\"])\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 25})`);\n \n item.each(function(d, i) {\n \n d3.select(this).append(\"text\")\n .attr(\"fill\", \"#c1c1c1\")\n .attr(\"x\", -110)\n .attr(\"dy\", \"0.35em\")\n .text(String);\n \n d3.select(this).append(\"circle\")\n .attr(\"fill\", i === 0 ? color(rate_selection): \"#c6c6c6\")\n .attr(\"stroke-width\", 0)\n .attr(\"r\", 4)\n .attr(\"cx\", -125)\n .attr(\"cy\", 0);\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"grouped = {\n let dat = data.filter(d => d.rate === rate_selection);\n let grouped = _.groupBy(dat, d => d.id);\n for (const group in grouped) {\n grouped[group] = {\n base: quartiles(grouped[group], \"base_cost\"),\n ppa: quartiles(grouped[group], \"ppa_with_battery_cost\")\n }\n }\n for (const bid in bids) {\n let k = `${bid}PPA`\n let d = dat.filter(d => d.id.substr(0, 2) === bid);\n grouped[k] = {\n base: quartiles(d, \"base_cost\"),\n ppa: quartiles(d, \"ppa_pv_only_cost\")\n }\n }\n return Object.entries(grouped).sort((a, b) => b[1].ppa[2] - a[1].ppa[2]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"quartiles = (data, key) => {\n const vals = data.map(d => d[key]);\n const values = vals.sort((a, b) => a - b);\n const min = values[0];\n const max = values[values.length - 1];\n const q1 = d3.quantile(values, 0.25);\n const q2 = d3.quantile(values, 0.50);\n const q3 = d3.quantile(values, 0.75);\n const iqr = q3 - q1; // interquartile range\n // const r0 = Math.max(min, q1 - iqr * 1.5);\n // const r1 = Math.min(max, q3 + iqr * 1.5);\n // data.quartiles = [q1, q2, q3];\n // data.range = [r0, r1];\n // data.outliers = values.filter(v => v < r0 || v > r1); // TODO\n return [min, q1, q2, q3, max];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"createTooltip = el => {\n el\n .attr(\"class\", \"tooltip\")\n .style(\"border-radius\", \"3px\")\n .style(\"pointer-events\", \"none\")\n .style(\"display\", \"none\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", \"1000\")\n .style(\"padding\", \"12px\")\n .style(\"font-weight\", \"regular\")\n .style(\"font-family\", \"Open Sans\")\n .style(\"font-size\", \"12px\")\n .style(\"background\", \"white\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"color\", \"#333333\")\n .style(\"line-height\", \"1.6\")\n .style(\"pointer-events\", \"none\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"box_y = d3.scaleBand()\n .domain(grouped.map(d => d[0]))\n .range([box_dimensions.height - box_margin.bottom, box_margin.top])\n .padding(.1)\n .paddingOuter(.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"box_margin = ({top: 100, right: 20, bottom: 50, left: 200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"box_x = d3.scaleLinear()\n .domain([d3.min(grouped, d => Math.min(d[1].base[0], d[1].ppa[0])), d3.max(grouped, d => Math.max(d[1].base[4], d[1].ppa[4]))]).nice()\n .range([box_margin.left, box_dimensions.width - box_margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"box_xAxis = g => g\n .attr(\"transform\", `translate(0,${box_margin.top})`)\n .call(d3.axisTop(box_x).tickPadding(10).tickFormat(d3.format(\"~s\")))\n .call(g => g.select(\".tick:first-of-type text\").clone()\n .attr(\"y\", -50)\n .attr(\"x\", -3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .html(\"Total Utility Costs ($)\"))\n .call(g => g.selectAll(\".tick line\").clone()\n .attr(\"stroke-opacity\", 0.1)\n .attr(\"y2\", box_dimensions.height - box_margin.bottom - 80))","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"box_yAxis = g => g\n .attr(\"transform\", `translate(${-10},0)`)\n .call(d3.axisRight(box_y)\n .tickFormat(d => `${idlookup[d.split(\"_\")[0]]}`))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"bin = (data, acc) => {\n if (!acc) {\n acc = d => d;\n }\n const p = data.map(acc);\n return distribution_range.map(limit => p.filter(item => item >= limit).length / p.length);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"distribution_range = {\n const dat = data.filter(d => d.rate === rate_selection);\n const min = Math.floor(d3.min(dat, d => Math.min(d.ppa_pv_only_savings, d.ppa_with_battery_savings))/5000) * 5000;\n const max = Math.ceil(d3.max(dat, d => Math.max(d.ppa_pv_only_savings, d.ppa_with_battery_savings))/5000) * 5000;\n \n return d3.range(min, max, 5000); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"distribution_data = {\n let dat = data.filter(d => d.rate === rate_selection && d.id === proposal_selection);\n const battery_name = idlookup[proposal_selection].split(\"(\")[0];\n const ppa_name = `${bids[proposal_selection.substr(0, 2)].name} PV Only`;\n const pv = bin(dat, d => d[\"ppa_pv_only_savings\"]);\n const battery = bin(dat, d => d[\"ppa_with_battery_savings\"]);\n const series = [{name: ppa_name, values: pv}, {name: battery_name, values: battery}]; \n return {y: \"% Probability\", series: series, costs: distribution_range}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"selection_options = Object.entries(idlookup).filter(d => d[0] != \"ALL\" && !d[0].includes(\"PPA\")).map(d => d.reverse())","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}