31:T532,chart = { const container = d3.select(DOM.element('div')); container.style("position", "relative"); const canvas = container.append('canvas').node(); const context = canvas.getContext('2d'); canvas.width = width; canvas.height = 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(xAxis); svg.append("g").call(yAxis); svg.append("g").call(legend); svg.selectAll("text").attr("font-size", 12).attr("font-family", "Open Sans"); for (const d of data) { context.globalAlpha = 0.3; context.fillStyle = "#e0e0e0"; context.beginPath(); context.arc(x(d.ppa_battery_total_cost), y(d.cost_savings), 2, 0, 2*Math.PI); context.fill(); context.closePath(); } let l = display.length; for (const d of d3.shuffle(display.slice())) { context.globalAlpha = 1; context.fillStyle = color(d.rate); context.beginPath(); context.arc(x(d.ppa_battery_total_cost), y(d.cost_savings), 2, 0, 2*Math.PI); context.fill(); context.closePath(); if (--l % 100 === 0) yield container.node(); } } 32:Tfc3,chart_box = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height_box]); const tooltip = d3.select("body").append("div").call(createTooltip) const tipContent = d => { const html = ` System: ${idlookup[d[0].split("_")[0]].split("(")[0]}
Rate: ${d[0].split("_")[1]}
Median Cost: $${d3.format(".3s")(d[1].quartiles[1])}
Interquartile Range: $${d3.format(".3s")(d[1].quartiles[0])}-${d3.format(".3s")(d[1].quartiles[2])}
Extremes: $${d3.format(".3s")(d[1].range[0])}-${d3.format(".3s")(d[1].range[1])} ` return html; } const g = svg.selectAll(".group") .data(grouped) .join("g") .attr("class", "group") .attr("transform", d => `translate(0,${y_box(d[0])})`); g.append("path") .attr("stroke", "#e0e0e0") .attr("opacity", 0.6) .attr("stroke-width", 2) .attr("d", d => ` M${x_box(d[1].range[0]) + 1},${y_box.bandwidth()* .5} H${x_box(d[1].range[1])} `); g.append("rect") .attr("fill", d => color(d[0].split("_")[1])) .attr("stroke-width", 0) .attr("x", d => x_box(d[1].quartiles[0]) ) .attr("y", d => y_box.bandwidth()* .25) .attr("height", y_box.bandwidth()*.5) .attr("width", d => x_box(d[1].quartiles[2]) - x_box(d[1].quartiles[0])); g.append("rect") .attr("fill", d => chroma(color(d[0].split("_")[1])).darken(2)) // .attr("opacity", d => showtick(d)) .attr("x", d => x_box(d[1].quartiles[1]) ) .attr("y", d => y_box.bandwidth()* .25) .attr("height", y_box.bandwidth()*.5) .attr("width", 5); g.append("circle") .attr("fill", d => color(d[0].split("_")[1])) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("cx", d => x_box(d[1].range[0]) ) .attr("cy", d => y_box.bandwidth()* .5) .attr("r", 4); g.append("circle") .attr("fill", d => color(d[0].split("_")[1])) // .attr("fill", d => ecm_highlight(d)) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("cx", d => x_box(d[1].range[1]) ) .attr("cy", d => y_box.bandwidth()* .5) .attr("r", 4); const target = g.append("rect") .attr("fill", "#fff") .attr("opacity", 0) .attr("stroke-width", 0) .attr("x", d => x_box(d[1].range[0]) ) .attr("y", d => y_box.bandwidth()* .25) .attr("height", y_box.bandwidth()*.5) .attr("width", d => x_box(d[1].range[1]) - x_box(d[1].range[0])); target.on("mouseover", function(d) { tooltip.style("display", null); // d3.select(this) // .attr("fill", "#333333"); tooltip.html(tipContent(d)) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mousemove", function(d) { tooltip .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { // d3.select(this) // .attr("fill", "#69b3a2"); tooltip.style("display", "none"); }); const xa = svg.append("g") .call(xAxis_box); const ya = svg.append("g") .call(yAxis_box); 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) { y_box.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,${y_box(d[0])})`); ya.transition(t) .call(yAxis_box) .selectAll(".tick") .delay((d, i) => i * 20); } }); }33:[{"id":"792d0c49fb7d449a2017883c7e256a36d2194a022e7717811f47fcd7c86cdeb0fb6449c493c19f77f2546e947f42f5eba3d6b7dfd927b5d4f5022e5d8ab06d77","href":"https://static.observableusercontent.com/files/792d0c49fb7d449a2017883c7e256a36d2194a022e7717811f47fcd7c86cdeb0fb6449c493c19f77f2546e947f42f5eba3d6b7dfd927b5d4f5022e5d8ab06d77","name":"cost_output_21_02_05.csv","type":"text/csv","lastModified":1612650031421.817,"size":6176261}] 2f:{"title":"Horton Analysis Results","cells":[{"id":0,"value":"md`# Horton Analysis Results\nThis is an overview of the stochastic modeling results for the Horton development in San Diego. The purpose of this analysis is to provide an overview of the financial risk associated with different PPA bids, which include ~2.2MW of solar PV and different battery configurations. The total utility costs - and cost savings - of the PPA, will vary depending on the rate structure, building load profile, and solar availability throughout the year. To capture this variability, the model uses 1,000 unique simulations for each battery configuration and rate structure (${d3.format(\",\")(data.length)} simulations in total), which capture probabilistic variations in building load and solar availability. The results of this model are shown below.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`### Battery Configurations\nAll results shown for each battery configuration.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof battery = Select(ids, {value: \"C2S2\", label: \"Battery\", format: d => idlookup[d]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`

\n### Density Plots\nThe scatterplot below shows the distribution of results, as contours, for a single combination of battery and rate structure. The total set of results are displayed in the background (in grey) for additional context. The distribution is primarily affected by the underlying load profile, with secondary variation attributable to solar availability throughout the year. Note the location of the NextAmp batteries in the upper left-hand quadrant of the chart. The PPA price for the NextAmp system is well below that of the other battery combinations, which results in signicant cost savings and very low overall utility costs throughout the year. Based on this analysis, it also seems that the AL-TOU2-EECC-CPP rate structure, combined with the battery and solar PPA, is the most beneficial for the Horton development. Note that there are some outcomes in our analysis that results in negative cost savings.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"viewof battery2 = Select(ids, {value: \"C2S2\", label: \"Battery\", format: d => idlookup[d]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"viewof rate2 = Select(rates, {value: rates[0], label: \"Rate\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof bandwidth = Range([10, 30], {label: \"Bandwidth\", step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"chart2 = {\n const container = d3.select(DOM.element('div'));\n container.style(\"position\", \"relative\");\n \n const canvas = container.append('canvas').node();\n const context = canvas.getContext('2d');\n \n canvas.width = width;\n canvas.height = height;\n \n const svg = container.append('svg')\n .attr(\"width\", canvas.width)\n .attr(\"height\", canvas.height)\n .style(\"mix-blend-mode\", \"multiply\")\n .style(\"position\", \"absolute\")\n .style(\"top\", '0px')\n .style(\"left\", '0px');\n \n svg.append(\"g\").call(grid);\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(contour);\n \n\n for (const d of data) {\n context.globalAlpha = 0.3;\n context.fillStyle = \"#e0e0e0\";\n context.beginPath();\n context.arc(x(d.ppa_battery_total_cost), y(d.cost_savings), 2, 0, 2*Math.PI);\n context.fill();\n context.closePath();\n }\n \n svg.selectAll(\"text\").attr(\"font-size\", 12).attr(\"font-family\", \"Open Sans\");\n \n \n return container.node()\n\n} \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`

\n### Comparitive Results\nThe following set of results show each battery configuration and rate structure combination, sorted initially by overall utility costs. This chart also allows for sorting based on cost savings, though total utility costs will likely drive decision-making in this context. Based on these results, the optimal combination of battery and rate structure is the NextAmp 4-hr battery combined with the AL-TOU2-EECC-CPP rate structure, while the worst combination of battery and rate structure is the Next-Era 4-hr battery combined with the AL-TOU-EECC rate structure. Note that this is a preliminary set of results based on final PPA pricing.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"viewof selector = Radio(new Map([[\"Median Utility Costs\", \"median\"],[\"Lowest Cost Outcome\",'low'],[\"Highest Cost Outcome\",'high']\n]), {value: 'median', label: \"Order By\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"order = {\n // if (selector === \"cost_savings\") {\n // return (a, b) => d3.median(a[1], d => d[selector]) - d3.median(b[1], d => d[selector]);\n // }\n if (selector === \"low\") {\n return (a, b) => b[1].range[0] - a[1].range[0];\n }\n else if (selector === \"high\") {\n return (a, b) => b[1].range[1] - a[1].range[1];\n }\n else {\n return (a, b) => b[1].quartiles[1] - a[1].quartiles[1];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"contour = g => g\n .attr(\"fill\", \"none\")\n .attr(\"stroke-linejoin\", \"round\")\n .call(g => g.append(\"g\")\n .selectAll(\"path\")\n .data(contours)\n .join(\"path\")\n .attr(\"fill\", d => color2(d.value))\n .attr(\"stroke\", d => d3.lab(color2(d.value)).darker(1))\n .attr(\"d\", d3.geoPath()));","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"contours = d3.contourDensity()\n .x(d => x(d.ppa_battery_total_cost))\n .y(d => y(d.cost_savings))\n .size([width, height])\n .bandwidth(bandwidth)\n (display2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"// color2 = d3.scaleSequential(d3.extent(contours, d => d.value), d3.interpolateYlGnBu)\n\ncolor2 = d3.scaleLinear()\n .domain([d3.min(contours, d => d.value), d3.mean(contours, d => d.value), d3.max(contours, d => d.value)])\n .range(['#e2f2eb', '#66c2a5', '#00594e'])\n .interpolate(d3.interpolateHcl) //interpolateHsl interpolateHcl interpolateRgb","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"// data = Object.assign(await FileAttachment(\"cost_output_21_02_05.csv\").csv({typed: true}), {\n// x: \"Cost $ →\",\n// y: \"↑ Savings $\"\n// })\n\ndata = Object.assign(await d3.csv(\"https://www.elementa.nyc/projects/horton/data/cost_output_21_02_05.csv\", d3.autoType), {x: \"Cost $ →\", y: \"↑ Savings $\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"margin = ({top: 70, right: 20, bottom: 50, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.ppa_battery_total_cost).map((d, i) => i === 0 ? d - 50000 : d + 50000))\n .rangeRound([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.cost_savings).map((d, i) => i === 0 ? d - 50000 : d + 50000))\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"legend = g => {\n const svg = g\n .attr(\"transform\", `translate(${width - margin.right},${margin.top + 20})`)\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\", -120)\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\", -135)\n .attr(\"cy\", 0);\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"ids = {\n let set = new Set();\n data.map(d => set.add(d.id))\n return Array.from(set);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"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: 'NextAmp 4-hr (1131-4629)',\n NA2: 'NextAmp 2-hr (1131-2262)'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"import {Select, Range, Radio} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"// viewof rate = Select(rates.concat([\"All Rates\"]), {value: rates[0], label: \"Rate\"})\nrate = \"All Rates\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"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":159,"value":"display = {\n let dat = data.filter(d => d.id === battery);\n if (rate === \"All Rates\") {\n return dat;\n }\n else {\n return dat.filter(d => d.rate === rate);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"display2 = data.filter(d => d.id === battery2).filter(d => d.rate === rate2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"// color = () => \"rgba(60,180,240,0.6)\"\n\n// color = d3.scaleSequential(d3.interpolateBuPu)\n// .domain([0, d3.max(data, d => d.cost_savings)])\n\n// color = d => d3.scaleOrdinal(rates, d3.schemeSet2)(d)\ncolor = d => d3.scaleOrdinal(rates, [\"#be4579\", \"#3b99a7\", \"#89cda8\", \"#fcd404\", \"#e26e42\", \"#c59fca\"])(d)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"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(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(20, \".1s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", 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":46,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(20, \".1s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", margin.top - 28)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"margin_box = ({top: 100, right: 20, bottom: 50, left: 200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"height_box = 2250","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"legend_box = g => {\n const svg = g\n .attr(\"transform\", `translate(${width - margin_box.right},${margin_box.top + 35})`)\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\", -120)\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\", -135)\n .attr(\"cy\", 0);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"update = chart_box.update(order)","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"grouped = {\n let dat = data.map(d => ({...d, group: `${d.id}_${d.rate}`}));\n dat = Object.entries(_.groupBy(dat, d => d.group));\n dat = dat.map(d => [d[0], quartiles(d[1])]);\n // return dat.sort((a, b) => b[1].quartiles[1] - a[1].quartiles[1]);\n return dat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"quartiles = (data) => {\n const vals = data.map(d => d.ppa_battery_total_cost);\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 data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"x_box = d3.scaleLinear()\n .domain([d3.min(grouped, d => d3.min(d[1], dd => dd.ppa_battery_total_cost)), d3.max(grouped, d => d3.max(d[1], dd => dd.ppa_battery_total_cost))]).nice()\n .range([margin_box.left, width - margin_box.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"y_box = d3.scaleBand()\n .domain(grouped.map(d => d[0]))\n .range([height_box - margin_box.bottom, margin_box.top])\n .padding(.1)\n .paddingOuter(.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"xAxis_box = g => g\n .attr(\"transform\", `translate(0,${margin_box.top})`)\n .call(d3.axisTop(x_box).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\", height_box - margin_box.bottom - 80))","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"yAxis_box = g => g\n .attr(\"transform\", `translate(${-10},0)`)\n .call(d3.axisRight(y_box)\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":425,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"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":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}