2c:null 2d:["$","title",null,{"children":"Boulder - Spruce St | Samuel Letellier-Duchesne | Observable"}] 32:T24c9,parcoords = { const config = { height: 500, width: 960, margin: { top: 60, right: 40, bottom: 10, left: 60 }, format: { "WALLR": { new_name: "Wall R", ticks: d3.format(".0f"), numTicks: 4, // selection: [350, 450] }, "Roof R": { newName: "Roof R", ticks: d3.format(".0f"), numTicks: 4, // selection: [350, 450] }, "WWR - Academic": { newName: "Academic WWR", // selection: [250,350] }, "WWR- D2 HUB+Fitness": { newName: "HUB Fitness WWR", // selection: [100,200] }, "Window U": { newName: "Window U", ticks: d3.format(".2f"), numTicks: 4, // selection: [0, 100] }, "SHGC": { ticks: d3.format(".1f"), numTicks: 4, // selection: [100,200] }, "Shade": { ticks: d3.format(".0f"), numTicks: 4, // selection: [250,350] }, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "middle", numTicks: 6, ticks: d3.format(".1f") }, "TEDI": { newName: `${unitSelection.unit === "IP" ? "TEDI kBTU/ft²/yr": "TEDI kWh/m²/yr"}`, anchor: "middle", numTicks: 6, ticks: d3.format(".1f") }, "CEDI": { newName: `${unitSelection.unit === "IP" ? "CEDI kBTU/ft²/yr": "CEDI kWh/m²/yr"}`, anchor: "middle", numTicks: 6, ticks: d3.format(".1f") }, "ROTATE": { newName: "Orientation", numTicks: [0, -90], // ticks: ["South", "West"] }, "SOLARCONTROL": { newName: "Exterior blinds", numTicks: [0, 1], // ticks: ["Yes", "No"] }, }, units: unitSelection.unit }; const container = document.createElement("div"); container.setAttribute("class", "parcoords"); container.setAttribute("style", `width: ${config.width}px; height: ${config.height}px;`); const ctx = DOM.context2d(config.width, config.height); //ctx.transform(1, 0, 0, 1, config.margin.left, config.margin.top); const svg = d3.select(DOM.svg(config.width, config.height)); config.chartHeight = config.height - config.margin.top - config.margin.bottom; config.chartWidth = config.width - config.margin.right - config.margin.left; const dimensions = parametric_data.columns.filter(d => d != "dataset"); const data = parametric_data.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key]) }; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range).nice()] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); ctx.globalCompositeOperation = 'darken'; const g = c.selectAll(".dimension") .data(dimensions) .enter().append("g") .attr("class", "dimension") .classed("nonactive", false) .attr("transform", d => `translate(${x(d)})`); g.append("g") .attr("class", "paraxis") .each(function(d) { const axis = d3.axisLeft(); let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { ya.tickValues(config.format[d].numTicks) } else { ya.ticks(config.format[d].numTicks); } } else { ya.ticks(5); } if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya.tickFormat(config.format[d].ticks); } d3.select(this).call(ya); }) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("stroke", "white")) .call(g => g.selectAll("text") .attr("x", -12)); g.append("text") .attr("class", "label") .style("text-anchor", d => { let anchor = "middle"; if (Object.keys(config.format).filter(d => "anchor" in config.format[d]).indexOf(d) >= 0) { anchor = config.format[d].anchor; } return anchor }) .attr("y", -25) .attr("font-size", 12) .style("font-family", "Open Sans") .html(d => { let name = d; if (Object.keys(config.format).filter(d => "newName" in config.format[d]).indexOf(d) >= 0) { name = config.format[d].newName; } return name; }); const render = renderQueue(draw).rate(50); ctx.clearRect(0, 0, config.width, config.height); render(data); g.append("g") .attr("class", "parbrush") .each(function(d) { y.get(d).brush = d3.brushY().extent([ [-10, -1], [10, config.chartHeight + 1] ]) .on("brush", brush) .on("end", brush); d3.select(this) .call(y.get(d).brush); if (Object.keys(config.format).filter(d => "selection" in config.format[d]).indexOf(d) >= 0) { d3.select(this).call(y.get(d).brush.move, config.format[d].selection); } }) .selectAll("rect") .attr("x", -10) .attr("width", 20); function brush() { render.invalidate(); const actives = []; svg.selectAll(".parbrush") .filter(function(d) { y.get(d).brushSelectionValue = d3.brushSelection(this); return d3.brushSelection(this); }) .each(function(d) { actives.push({ dimension: d, extent: d3.brushSelection(this).map(y.get(d).invert) }); }); const selected = data.filter(function(d) { return actives.every(function(active) { let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0]; const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); if (reverse.indexOf(active.dimension) >= 0) { result = active.extent[1] >= d[active.dimension] && d[active.dimension] >= active.extent[0]; } return result; console.log(result) }); }); ctx.clearRect(0, 0, config.width, config.height); render(selected); } function draw(d) { if (d.dataset === "interpolated") { //context.globalAlpha = .1; ctx.strokeStyle = "#ddeaf2"; ctx.lineWidth = 1; } else { //context.globalAlpha = 1; ctx.strokeStyle = "#1f77b4"; ctx.lineWidth = 1.5; } ctx.beginPath(); var coords = dimensions.map(p => [x(p) + config.margin.left, y.get(p)(d[p]) + config.margin.top]); coords.forEach(function(p, i) { // this tricky bit avoids rendering null values as 0 if (p === null) { // this bit renders horizontal lines on the previous/next // dimensions, so that sandwiched null values are visible if (i > 0) { var prev = coords[i - 1]; if (prev !== null) { ctx.moveTo(prev[0], prev[1]); ctx.lineTo(prev[0] + 6, prev[1]); } } if (i < coords.length - 1) { var next = coords[i + 1]; if (next !== null) { ctx.moveTo(next[0] - 6, next[1]); } } return; } if (i == 0) { ctx.moveTo(p[0], p[1]); return; } ctx.lineTo(p[0], p[1]); }); ctx.stroke(); } container.appendChild(ctx.canvas); container.appendChild(svg.node()); return container; }33:T232c,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:10, bottom: 30, left: 35}, cols: 3, format: { "Window U": { newName: "Window U", convert: d => 1/d, ticks: d => d3.format(".2f")(1/d)}, "SHGC S": { newName: "SHGC"}, "SOLARCONTROL": { newName: "Exterior blinds" }, "ROTATE": { newName: "Orientation", numTicks: 1, }, "WWR": { newName: "WWR (South)", ticks: d3.format(",.0%"), }, }, units: unitSelection.unit, y: euiSwitch.y } let eui_convert; eui_convert = d => d; const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .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"); const tipContent = (variable, p_value, EUI) => { let val = formatEUI_SI_IP(EUI); if (config.y === "PeakCooling"){ val = `${_.round(EUI, 1)} Tons`; } return `${variable}: ${p_value}
${config.y === "PeakCooling" ? "Tons": config.y}: ${val}`; } //initiate the dictionary of scales for the cross hairs const markers = {}; //handles conversion for each variable in config.format const data = sensitivity_data.map(d => { let dd = d.data; for (const key in config.format) { if ("convert" in config.format[key]) { dd = dd.map(p => ({...p, [key]: config.format[key].convert(p[key])})); } } return {variable: d.variable, data: dd}; }); //find the width of cells by dividing the total width by the number of cols config.cell.width = _.round( (config.width - config.margin.left - config.margin.right - config.cell.padding * (config.cols-1)) / config.cols ); //csize the svg based on the number of rows const svg = d3.select(DOM.svg(config.width, (config.cell.height + config.margin.bottom + config.cell.padding) * _.ceil(data.length / config.cols) + config.margin.top - config.margin.bottom )); //all the y values are the same - could use a map here to get different scales for each small multiple const y = d3.scaleLinear() .domain(d3.extent(data.map(d => d.data.map(p => eui_convert(p[config.y]))).flat())) .range([config.cell.height, 0]).nice(); //create a map for all the x scales const x = new Map( Array.from( data.map(d => d.variable), key => [ key, d3.scaleLinear(d3.extent(data.filter(d => d.variable === key)[0].data.map(d => d[key])), [0, config.cell.width]) ] ) ); //create a group for each chart const chart = svg.selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => { //position the group in its appropriate row and col const h = (i % config.cols) * (config.cell.width + config.cell.padding) + config.margin.left; const v = _.floor(i / config.cols) * (config.cell.height + config.margin.bottom + config.cell.padding) + config.margin.top; return `translate(${h},${v})` }); //run through each group chart.each(function(d, i) { //rename the variable if needed let name = d.variable; if (name in config.format) { if ("newName" in config.format[name]){ name = config.format[name].newName; } } //if there are format specifiers, use them, otherwise just use the default let xa = d3.axisBottom(x.get(d.variable)).ticks(6); if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ xa.tickFormat(config.format[d.variable].ticks); } } const xAxis = g => g .attr("transform", `translate(0,${config.cell.height})`) .call(xa) .call(g => g.select(".domain").remove()); const yAxis = g => { if (i % config.cols === 0) { g.call(d3.axisLeft(y).ticks(6)) .call(g => g.select(".domain").remove()); } } let y_label; if (config.units === "IP") { y_label = `${config.y} Hrs`; } else { y_label = `${config.y} Hrs`; } //put the y axis label in the top left corner of the first row/col. if (i%3 === 0) { d3.select(this).append("g") .attr("transform", "translate(15, 20)") .append("text") .attr("font-size", 10) .attr("text-anchor", "start") .attr("opacity",1) .html(y_label); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui_convert(dd[config.y]))) .curve(d3.curveCardinal.tension(0)); //horizontal grid lines d3.select(this).selectAll(".grid .horizontal") .data(_.range(8).slice(1).map(d => d * config.cell.height / 8)) .join("line") .attr("class", "grid") .attr("x1", (i % config.cols != 0) ? -config.cell.padding : 0) .attr("y1", d => d) .attr("x2", config.cell.width) .attr("y2", d => d); //vertical grid lines d3.select(this).selectAll(".grid .vertical") .data(_.range(8).slice(1).map(d => d * config.cell.width / 8)) .join("line") .attr("class", "grid") .attr("x1", d => d) .attr("y1", 0) .attr("x2", d => d) .attr("y2", config.cell.height); d3.select(this).append("g").call(xAxis); d3.select(this).append("g").call(yAxis); d3.select(this).append("rect") .attr("class", "frame") .attr("x", 0) .attr("y", 0) .attr("width", config.cell.width) .attr("height", config.cell.height); //add the variable labels d3.select(this).append("text") .attr("x", 0) .attr("y", -15) .attr("text-anchor", "start") .attr("font-size", 12) .style("font-family", "Open Sans") .html(name); d3.select(this).selectAll(".recommended") .data(d.data.filter(dd => dd.Recommended === "yes")) .join("circle") .attr("class", "recommended") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui_convert(dd[config.y])); }) .attr("r",10) .attr("fill", "#b4d6e8") .attr("opacity", 0.8); d3.select(this).append("path") .datum(d.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", "#1f77b4") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(this).selectAll("points") .data(d.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui_convert(dd[config.y])); }) .attr("r",3) .attr("display", dd => { if ((d.variable === "EPD" || d.variable === "LPD") && dd[d.variable] === 0.5) { return "none"; } else if (d.variable === "Glass SHGC" && dd[d.variable] === 0.3) { return "none"; } else { return null; } }) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ); d3.select(this).selectAll("overlay") .data(d.data) .join("circle") .attr("class", "overlay") .attr("r",18) .attr("stroke", "none") .style("fill", "#fff") .style("opacity", 0) .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(eui_convert(dd[config.y])); }) .on("mouseover", dd => { tooltip.style("display", null); let data = dd[d.variable]; if (d.variable in config.format) { if ("ticks" in config.format[d.variable]){ data = config.format[d.variable].ticks(data); } } tooltip.html(tipContent(d.variable, data ,dd[config.y])) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", d => { tooltip.style("display", "none"); }); }); return svg.node(); }34:T936,color = { const lookup = { "District Heating": "#d52928", "District Cooling": "#1dbfcf", "Water Systems":"#d52928", "Electricity [GJ]":"#d6d231", "Electricity [kWh]":"#d6d231", "Heating": "#d52928", "heating": "#d52928", "Cooling": "#1dbfcf", "Interior Equipment":"#dddddd", "Interior Lighting": "#d6d231", "Exterior Lighting": "#d6d231", "Electricity":"#d6d231", "Natural Gas": "#e55725", "Natural Gas [kWh]": "#e55725", "DHW":"#d52928", "Exterior Lights": "#808080", "Humidification": "#808080", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "Ambulance Charging":"#dddddd", "Pumps":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Passive Solar Gain":"#a17eb9", "Lights Gains":"#a17eb9", "Lighting Gain":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "electric_equip Gain":"#a17eb9", "Occupant Gains":"#a17eb9", "Occupants Gain":"#a17eb9", "Roof Gain":"#a17eb9", "Walls Gain":"#a17eb9", "Floor Gain":"#a17eb9", "Windows Gain":"#a17eb9", "Infiltration Gain":"#a17eb9", "Infiltration Losses":"#a17eb9", "Infiltration Loss":"#a17eb9", "Roof Losses":"#a17eb9", "Windows Losses":"#a17eb9", "Walls Losses":"#a17eb9", "Window Losses":"#a17eb9", "Floor Losses": "#a17eb9", "Internal Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roofs":"#f7aa6e", "Floor on Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Windows":"#f7aa6e", "OA Heating":"#f7aa6e", "Ceiling Heat Losses":"#f7aa6e", "Floor Heat Losses":"#f7aa6e", "Infiltration Heat Losses":"#f7aa6e", "Roof Heat Losses":"#f7aa6e", "Walls Heat Losses":"#f7aa6e", "Windows Heat Losses":"#f7aa6e", "Reheat":"#f7aa6e", "Equipment Gains":"#6aadd6", "OA Cooling":"#6aadd6", "Dehumidification":"#6aadd6", "Conduction":"#6aadd6", "Lighting":"#6aadd6", "Solar":"#6aadd6", "Passive Solar":"#6aadd6", "electric_equip":"#6aadd6", "Solar":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", }; return name => lookup[name]; }35:T5ff,renderQueue = function(func) { var _queue = [], // data to be rendered _rate = 1000, // number of calls per frame _invalidate = function() {}, // invalidate last render queue _clear = function() {}; // clearing function var rq = function(data) { if (data) rq.data(data); _invalidate(); _clear(); rq.render(); }; rq.render = function() { var valid = true; _invalidate = rq.invalidate = function() { valid = false; }; function doFrame() { if (!valid) return true; var chunk = _queue.splice(0,_rate); chunk.map(func); timer_frame(doFrame); } doFrame(); }; rq.data = function(data) { _invalidate(); _queue = data.slice(0); // creates a copy of the data return rq; }; rq.add = function(data) { _queue = _queue.concat(data); }; rq.rate = function(value) { if (!arguments.length) return _rate; _rate = value; return rq; }; rq.remaining = function() { return _queue.length; }; // clear the canvas rq.clear = function(func) { if (!arguments.length) { _clear(); return rq; } _clear = func; return rq; }; rq.invalidate = _invalidate; var timer_frame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 17); }; return rq; }36:T8cf,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }37:T40b,html``38:[{"id":"c19807eaf3b7ee815437ed9e425fda55b1004f8a3ac6949af7ab90c2d56c78949f977dd553acf79a73bc8348de15810454c59d8fd04ecf537bb13be452d04a08","href":"https://static.observableusercontent.com/files/c19807eaf3b7ee815437ed9e425fda55b1004f8a3ac6949af7ab90c2d56c78949f977dd553acf79a73bc8348de15810454c59d8fd04ecf537bb13be452d04a08","name":"AdultEducationCenter@7.csv","type":"text/csv","lastModified":1653837812363,"size":2184},{"id":"611684114bcc66819dcd802e591ec57be303c46947f6e85864079ae0e9527d4e2a280d8584abf1466d11deff89a515251fe7225e2253489f34aed643fd202a2b","href":"https://static.observableusercontent.com/files/611684114bcc66819dcd802e591ec57be303c46947f6e85864079ae0e9527d4e2a280d8584abf1466d11deff89a515251fe7225e2253489f34aed643fd202a2b","name":"parametric@2.csv","type":"text/csv","lastModified":1653837812363,"size":37969},{"id":"affae6f9cd1ceaa7e5de2720afa0ef5207159988c52769a517de59508bd04466d3701b3af01d5a891f70b859880e696930dc059205b50383119e21a4f3086fe9","href":"https://static.observableusercontent.com/files/affae6f9cd1ceaa7e5de2720afa0ef5207159988c52769a517de59508bd04466d3701b3af01d5a891f70b859880e696930dc059205b50383119e21a4f3086fe9","name":"sensitivity_analysis@4.csv","type":"text/csv","lastModified":1653837812363,"size":1831},{"id":"ad71dfc544da4f92e9664ec4df5533e6ef4f5eb686bb0134bfcbe0329ab512bba401a49a3e61425830215e8d6aee298bece842617ab916ded566f5731b0556b6","href":"https://static.observableusercontent.com/files/ad71dfc544da4f92e9664ec4df5533e6ef4f5eb686bb0134bfcbe0329ab512bba401a49a3e61425830215e8d6aee298bece842617ab916ded566f5731b0556b6","name":"sensitivity_data@4.csv","type":"text/csv","lastModified":1654203326029.327,"size":1025}] 30:{"id":"87349f41ff2edb1d","slug":"boulder-spruce-st","title":"Boulder - Spruce St","thumbnail":"5f84d9ef5a9140f3ce70abb18fc75090a1cbae1922242fefc675af41a0dcc30f","access_level":"public","create_time":"$D2022-05-29T15:23:32.363Z","update_time":"$D2022-06-02T21:40:07.788Z","view_time":null,"first_public_time":"$D2023-05-03T19:13:34.529Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4acb0e22e0267db9","login":"samuelduchesne","name":"Samuel Letellier-Duchesne","avatar_url":"https://avatars-next.observableusercontent.com/d0af13a1725a63787ebcd71671173850f94a51e751f162788830781c72b0be9a","tier":"starter_2024","bio":"Building Performance Analyst at Elementa Engineering in New York City"},"version":3761,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"084b4d1bf3eab9dd","login":"samuelduchesne","name":"Samuel Letellier-Duchesne","avatar_url":"https://avatars-next.observableusercontent.com/d0af13a1725a63787ebcd71671173850f94a51e751f162788830781c72b0be9a","tier":null,"bio":"Building Performance Analyst at Elementa Engineering in New York City"},{"type":"individual","id":"f725482116d7891b","login":"elementa","name":"Elementa Engineering","avatar_url":"https://avatars-next.observableusercontent.com/392be552c44531b13196ece3fde1f8781cde3f3738248df478971dc7871a7a1f","tier":null,"bio":""}],"members":[{"type":"individual","id":"084b4d1bf3eab9dd","login":"samuelduchesne","name":"Samuel Letellier-Duchesne","avatar_url":"https://avatars-next.observableusercontent.com/d0af13a1725a63787ebcd71671173850f94a51e751f162788830781c72b0be9a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Boulder - Spruce St","cells":[{"id":0,"value":"md`# Boulder - Spruce St`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`\n
\n### Parametric Analysis\nTo better understand the effect of different performance characteristics on building EUI, the figure below presents a parallel coordinates plot where each of the first six vertical axes represents a performance parameter and its evaluated properties, and the last axis shows the number of hours where the operative temperature is above 78 degF resulting from the selected combinations. Putting constraints on one of more attributes, for instance, allows for the exploration of how changing the remaining attributes affects the EUI. The dark lines in the chart are results for combinations simulated using the whole building energy model. The lighter lines represent results from all other combinations that are generated using statistical surrogate models that utilize data-driven approximation techniques.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"parLegend = {\n \n const svg = d3.select(DOM.svg(960, 60))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Interpolated Data\", \"Modeled Data\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 30})`);\n\n g.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 20)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", d => d === \"Interpolated Data\" ? \"#ddeaf2\": \"#1f77b4\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"stroke-width\", 2)\n\n g.append(\"text\")\n .attr(\"x\", 30)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3741,"value":"## Sensitivity Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3714,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3712,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2689,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2695,"value":"stacked_data = (await d3.csv(`https://www.elementa.nyc/projects/tor-ems/data/stacked_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"pvColor = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\", \"#d7ddda\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1910,"value":"pvColorUpdate = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\"])\n .domain(projectKeysUpdate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"projectKeys = [\"gridToProject\", \"renewableToProject\", \"batteryToProject\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1817,"value":"projectKeysUpdate = [\"gridToProject\", \"renewableToProject\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"pvDataUpdate = {\n let data = await d3.csv(`https://www.elementa.nyc/projects/tor-ems/data/renewables_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType);\n\n const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]\n const times = [];\n \n const timeParse = (m, d, h) => {\n return d3.timeParse(\"%m %d %H\")(`${m.toString().padStart(2, \"0\")} ${d.toString().padStart(2, \"0\")} ${h.toString().padStart(2, \"0\")}`)\n }\n \n for (const m in _.range(12)) {\n for (const d in _.range(months[m])) {\n for (const h in _.range(24)) {\n times.push({month: +m + 1, day: +d + 1, hour: +h, date: timeParse(+m + 1, +d + 1, +h)});\n }\n }\n }\n \n return data.map((d, i, arr) => ({...d, ...times[i]}));\n\n } ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"renewables_data_update = {\n let renewables = (await d3.csv(`https://www.elementa.nyc/projects/tor-ems/data/renewables_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType)); \n \n // const columns = renewables.columns;\n // const data = renewables;\n // data.columns = columns;\n\n return renewables;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 1)} Hrs`;\n }\n else if (unitSelection.unit === \"GJ\"){\n return `${_.round(d * 0.0036, 1)} Hrs`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 1)} Hrs`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"formatAREA_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${_.round(d, 0)} m²`;\n }\n else {\n return `${_.round(d * 10.76, 0)} ft²`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"sankey_0 = {\n // if using file selection on page \n //let sankey_data = d3.csvParse(await Files.text(sankey_file)).map(({source, target, value}) => ({source: source, target: target, value: +value}));\n\n // if using file attachment\n let sankey_data = (await FileAttachment(\"AdultEducationCenter@7.csv\").csv()).map(({source, target, value}) => ({source: source, target: target, value: +value}));\n \n //create a list of nodes and links\n const nodes = Array.from(new Set(sankey_data.map(d => [d.source, d.target]).flat()));\n const links = sankey_data.map(({source, target, value}) => ({\n source: nodes.indexOf(source),\n target: nodes.indexOf(target),\n value: value\n }));\n\n sankey_data = {nodes: nodes.map(d => ({name: d})), links: links};\n return sankey_data;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"stackedColor = {\n const lookup = {\n \"PV Budget\":\"#708238\",\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Proposed System\":\"#EEEEEE\",\n \"Ambulance Charging\": \"#808080\",\n \"TEDI\":\"#d52928\",\n \"GHGI\":\"#9CBD53\",\n \"PV Offset\":\"#9CBD53\",\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"sankey = {\n const config = {\n height: 500,\n width: 960,\n margin: {bottom: 10}\n }\n const sankey = d3.sankey()\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [config.width, config.height - config.margin.bottom]])\n .nodeAlign(d3.sankeyLeft);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d / 3.412 / 0.092903, 2) : (unitSelection.unit === \"GJ\") ? _.round(d * 0.0036, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"sensitivity_data@4.csv\").csv({typed:true})); \n //group the data by independent variable\n const grouped = group(data, d => d.Variable);\n data = Array.from(grouped, d => ({variable: d[0], data: d[1].sort((a, b) => a[d[0]] - b[d[0]])}));\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3480,"value":"FileAttachment(\"sensitivity_data@4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"parametric_data = {\n let parametrics = (await FileAttachment(\"parametric@2.csv\").csv({typed:true})); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: eui(d.TEDI), CEDI: eui(d.CEDI), EUI: eui(d.EUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3457,"value":"FileAttachment(\"parametric@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2086,"value":"d3format = d3.format","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"