2f:T2df2,sensitivies = { //general setup const config = { width: 960, cell: { height: 250, padding: 40 }, margin: { top: 60, right: 10, bottom: 30, left: 35 }, cols: 3, format: { "WINU": { newName: "Window U", convert: d => 1 / d, ticks: d => d3.format(".2f")(1 / d) }, "WINSHGC": { newName: "SHGC" }, "WWR": { newName: "WWR (all orientation)", ticks: d3.format(",.0%"), }, "THERMALMASS": { newName: "Thermal Mass", }, "SHADING_OVERHANG_PROJECTION": { newName: "Shading Projection", }, "WALLR": { newName: "Wall R", }, "ROOFR": { newName: "Roof R", }, "SCALE_X": { newName: "Aspect Ratio", }, "ROTATE": { newName: "Rotation", } }, units: unitSelection.unit, y: euiSwitch.y } 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, year, p_value, EUI) => { let val = formatEUI_SI_IP(EUI); console.log(config.y); if (config.y === "peak_space_cooling_sqft_per_ton") { val = `${_.round(EUI, 1)} ft²/Tons`; } return `Year: ${year}
${variable}: ${p_value}
${config.y === "peak_space_cooling_sqft_per_ton" ? "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 )); console.log(data); //all the y values are the same - could use a map here to get different scales for each small multiple const y_extent = d3.extent(data.map(d => d.data.map(p => { if (config.y === "peak_space_cooling_sqft_per_ton") { return peak_unit_switch(p[config.y]); } else { return ip_to(p[config.y]); } })).flat()); y_extent[1] *= 1.05; const y = d3.scaleLinear() .domain(y_extent) .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 === "peak_space_cooling_sqft_per_ton" ? `ft²/ton` : `${config.y} kBTU/ft²/yr`; } else { y_label = config.y === "peak_space_cooling_sqft_per_ton" ? `m²/ton` : `${config.y} kWh/m²/yr`; } //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 => { if (config.y === "peak_space_cooling_sqft_per_ton") { return y(peak_unit_switch(dd[config.y])); } else { return y(ip_to(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); let grouped_by_year = group(d.data, dd => dd.year); grouped_by_year = Array.from(grouped_by_year, dd => ({year: dd[0], data: dd[1]})); let chart_group = this; // for (let idx = 0; idx < grouped_by_year.length; idx++) { for (const year of grouped_by_year) { // const year = grouped_by_year[idx]; // const dark = sensitivity_colors[idx].dark; // const light = sensitivity_colors[idx].light; console.log(year) const dark = sensitivity_colors[year.year].dark; const light = sensitivity_colors[year.year].light; d3.select(chart_group).selectAll(".recommended") .data(year.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(ip_to(dd[config.y])); }) .attr("r", 10) .attr("fill", light) .attr("opacity", 0.8); d3.select(chart_group).append("path") .datum(year.data) .attr("class", "interpolation") .attr("fill", "none") .attr("stroke", dark) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); d3.select(chart_group).selectAll("points") .data(year.data) .join("circle") .attr("class", "points") .attr("cx", function(dd) { return x.get(d.variable)(dd[d.variable]); }) .attr("cy", function(dd) { return y(ip_to(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", dark) // .style("fill", dd => dd.Baseline === "yes" ? dark : light); .style("fill", light); d3.select(chart_group).selectAll("overlay") .data(year.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(ip_to(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, year.year, 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(); }30: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; }31:Ta21,color = { const lookup = { "District Heating": "#d52928", "District Cooling": "#1dbfcf", "Domestic Hot Water":"#d52928", "Electricity [GJ]":"#d6d231", "Electricity [kWh]":"#d6d231", "Heating": "#d52928", "heating": "#d52928", "Cooling": "#1dbfcf", "Interior Equipment":"#dddddd", "Fans":"#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 + Pumps":"#bfbfbf", "Equipment":"#6aadd6", "Ambulance Charging":"#dddddd", "Pumps":"#dddddd", "Other Gains":"#a17eb9", "Equipment Gain":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Solar Heat Gains":"#6aadd6", "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":"#6aadd6", "Roofs":"#6aadd6", "Floor on Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Windows":"#6aadd6", "OA Heating":"#f7aa6e", "mech_vent Heat Losses":"#f7aa6e", "mech_vent Losses":"#a17eb9", "nat_vent Losses":"#a17eb9", "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", "Economizer":"#a17eb9", "Heating Load":"#e55725", "Heating System":"#e55725", }; return name => lookup[name]; }32:T27a8,parcoords1 = { const lookup = { HR: { "0": "No", "1": "Yes" } } const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 50}, format: { "WALLR": { newName: "Wall R", ticks: d3.format(".0f"), numTicks: 6, anchor: "middle", // selection: [0, 435] }, "ROOFR": { newName: "Roof R", ticks: d3.format(".0f"), numTicks: 3, anchor: "middle" // selection: [0, 435] }, "WINU": { newName: "Window U", ticks: d3.format(".2f"), numTicks: 5, reverse: true, anchor: "middle" // selection: [0, 435] }, "WINSHGC": { newName: "SHGC", ticks: d3.format(".2f"), numTicks: 5, reverse: true, anchor: "middle" // selection: [0, 435] }, "WWR": { newName: "WWR", ticks: d3.format(".2f"), numTicks: 4, reverse: true, anchor: "middle" // selection: [0, 435] }, "THERMALMASS": { newName: "Thermal Mass", ticks: d3.format(".2f"), numTicks: 4, anchor: "middle" // selection: [0, 435] }, "ROTATE": { newName: "Rotation", ticks: d3.format(".2f"), numTicks: 6, anchor: "middle" // selection: [0, 435] }, "SCALE_X": { newName: "Aspect Ratio", ticks: d3.format(".2f"), numTicks: 7, anchor: "middle" // selection: [0, 435] }, "SHADING_OVERHANG_PROJECTION": { newName: "Shading Projection", ticks: d3.format(".2f"), numTicks: 6, anchor: "middle" // selection: [0, 435] }, "EDI": { newName: `${unitSelection.unit === "IP" ? "EDI kBTU/ft²/yr": "EDI kWh/m²/yr"}`, // newName: "TEDI", anchor: "middle", ticks: d3.format(".1f")}, // numTicks: 10, // selection: [340, 360]}, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, //newName: "EUI", anchor: "middle", ticks: d3.format(".1f"), numTicks: 6}, // selection: [0, 435]}, "Savings vs NECB2017 [%]": { newName: "NECB'17 Svgs", anchor: "middle", ticks: d3.format(".0%")}, //selection: [0, 435]}, "CaGBC ZCB GHG Emissions [tCO2eq/y]": { newName: "CaGBC ZCB GHGI", anchor: "middle", ticks: d3.format(",")}, //selection: [0, 435]}, "OBC GHG Emissions [tCO2eq/y]": { newName: "OBC GHGI", anchor: "middle", ticks: d3.format(",")}, //selection: [0, 435]}, "Operating Cost [$/yr]": { newName: "Cost $/yr", //anchor: "middle", ticks: d3.format(",")}, //selection: [0, 435]}, "peak_space_cooling_sqft_per_ton": { newName: `${unitSelection.unit === "IP" ? "Peak Cooling ft²/ton": "Peak Cooling m²/ton"}`, anchor: "middle", ticks: d3.format(",")} //selection: [0, 435]}, }, 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") && (d != "WEATHER")); 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})`); const axis = d3.axisLeft().ticks(5); // ctx.globalCompositeOperation = 'darken'; ctx.globalAlpha = 0.5; 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) { if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { axis.ticks(config.format[d].numTicks); } else { axis.ticks(5); } let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya = axis.scale(y.get(d)).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 = "end"; 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", 9) .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; }); }); ctx.clearRect(0,0,config.width,config.height); render(selected); } function draw(d) { let line_color = sensitivity_colors["default"]; switch(d.WEATHER) { case "TMY": line_color = sensitivity_colors["TMY"]; ctx.strokeStyle = d.dataset === "interpolated" ? line_color.light: line_color.dark; break; case 2050: line_color = sensitivity_colors["2050"]; ctx.strokeStyle = d.dataset === "interpolated" ? line_color.light: line_color.dark; break; case 2090: line_color = sensitivity_colors["2090"]; ctx.strokeStyle = d.dataset === "interpolated" ? line_color.light: line_color.dark; break; default: ctx.strokeStyle = "#000000"; } ctx.lineWidth = d.dataset === "interpolated" ? 1: 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: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; }34:T40b,html``35:[{"id":"5d99eaf800796f2a1bc63ef3b95abe41d496a61c883a0c7781bec30f76cae0495bf06485b2a8dd48a1fb9d0f947d0fc165261577d0dc44db75a205c1419250df","href":"https://static.observableusercontent.com/files/5d99eaf800796f2a1bc63ef3b95abe41d496a61c883a0c7781bec30f76cae0495bf06485b2a8dd48a1fb9d0f947d0fc165261577d0dc44db75a205c1419250df","name":"Studied Parameter Range.PNG","type":"image/png","lastModified":1693411581525.699,"size":92017},{"id":"603183a6113c0bc18a88f3007f48cae197030978268ca9987e5206627ce30ce8e69b1eca34df631dcb4e51f9a7202eb7da2259066b6d4f8e0530aa334bae6614","href":"https://static.observableusercontent.com/files/603183a6113c0bc18a88f3007f48cae197030978268ca9987e5206627ce30ce8e69b1eca34df631dcb4e51f9a7202eb7da2259066b6d4f8e0530aa334bae6614","name":"parametric_all3.csv","type":"text/csv","lastModified":1693411581525.699,"size":10393854},{"id":"4cf90123ad1a6bd96a97d97b6cc5c14d34b6190c5f1989cae2762a6b2bea7975efd98f359cea94c143a9171e7ee00f6251599b7ef575b138db0e1e5feb3aad59","href":"https://static.observableusercontent.com/files/4cf90123ad1a6bd96a97d97b6cc5c14d34b6190c5f1989cae2762a6b2bea7975efd98f359cea94c143a9171e7ee00f6251599b7ef575b138db0e1e5feb3aad59","name":"sankey_data@8.csv","type":"text/csv","lastModified":1693411581525.699,"size":2128},{"id":"d640d247617d04e0d0fe9bc0cdea9035817c3741d8afae4866bc6b3f685fcb82629257140a6830ec69b854bf79745516bfa37617e67ec973b5b8262063f54cf5","href":"https://static.observableusercontent.com/files/d640d247617d04e0d0fe9bc0cdea9035817c3741d8afae4866bc6b3f685fcb82629257140a6830ec69b854bf79745516bfa37617e67ec973b5b8262063f54cf5","name":"parametric_data-6@2.csv","type":"text/csv","lastModified":1693411581525.699,"size":14056},{"id":"e2802425933bb7d85c6a96bae00ea71d2f55344f9c6c3382aa9c4062abb50ea3f217b07bdf3caa704e7440ac75073ad89e737c8e2ded422b45c087b555f4b01b","href":"https://static.observableusercontent.com/files/e2802425933bb7d85c6a96bae00ea71d2f55344f9c6c3382aa9c4062abb50ea3f217b07bdf3caa704e7440ac75073ad89e737c8e2ded422b45c087b555f4b01b","name":"parametric_data-6-2.csv","type":"text/csv","lastModified":1693411713004.659,"size":9501},{"id":"a4b27ceded2e10ce8c658ce02b231215592f0f90002be62daec2f2aa2c943d72a95a3e3d5a9223f4d76d821d3a28a18a4c2d0a94ff0c973c6cba94cd3345398c","href":"https://static.observableusercontent.com/files/a4b27ceded2e10ce8c658ce02b231215592f0f90002be62daec2f2aa2c943d72a95a3e3d5a9223f4d76d821d3a28a18a4c2d0a94ff0c973c6cba94cd3345398c","name":"parametric_data-6-2@1.csv","type":"text/csv","lastModified":1693411793087.639,"size":6500}] 2d:{"title":"Dynamic - Update","cells":[{"id":0,"value":"md`# Dynamic - Update`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4127,"value":"md`\n

\n### Studied Parameter Ranges\n\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4126,"value":"studiedParameterRange = FileAttachment(\"Studied Parameter Range.PNG\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`\n

\n### Envelope Sensitivity\n\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2103,"value":"viewof euiSwitch = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3795,"value":"sensitivity_colors = ({\n \"TMY\": {\"dark\": \"#1f77b4\",\"light\": \"#B4D6E8\"}, \n \"2050\": {\"dark\": \"#ff7f0e\",\"light\": \"#FCD1AB\"}, \n \"2090\": {\"dark\": \"#2ca02c\",\"light\": \"#B3E5B3\"},\n \"default\": {\"dark\": \"#000000\",\"light\": \"#000000\"}\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"sensLegend = {\n \n const svg = d3.select(DOM.svg(960, 70))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\n {year: \"TMY\", label: \"TODAY - TMY3\"}, \n {year: \"2050\", label: \"MID CENTURY - RCP 8.5_2041-2060_50%\"},\n {year: \"2090\", label: \"END OF CENTURY - RCP 8.5_2081-2099_50%\"}\n ])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"stroke\", d => sensitivity_colors[d.year].dark)\n .style(\"fill\", d => sensitivity_colors[d.year].light)\n\n g.append(\"text\")\n .attr(\"x\", 20)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d.label);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3956,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3987,"value":"parametric_data = {\n let parametrics = (await FileAttachment(\"parametric_all3.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n let data = parametrics.map(d => ({...d, EUI: eui(d.EUI),EDI: eui(d.EDI), peak_space_cooling_sqft_per_ton: peak_unit_switch(d.peak_space_cooling_sqft_per_ton)}));\n data.columns = columns;\n \n data = data.sort((a, b) => d3.ascending(a.dataset, b.dataset))\n\n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"IP\") {\n return `${_.round(d, 1)} kBtu/ft²/yr`;\n }\n else if (unitSelection.unit === \"GJ\"){\n return `${_.round(d * 0.001055, 1)} GJ/m²/yr`;\n }\n else {\n return `${_.round(d / 3.412 / 0.092903, 1)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"sankey_data = {\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(\"sankey_data@8.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"},{"id":3722,"value":"sumeui = d => sankey_data.nodes.filter(x=> [\"District Cooling\", \"Electricity\", \"District Heating\"].includes(x.name)).reduce((n, {value}) => n + value, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":36,"value":"eui = d => (unitSelection.unit === \"SI\") ? _.round(d * 3.412 * 0.092903, 2) : (unitSelection.unit === \"GJ\") ? _.round(d * 0.0036, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":4035,"value":"md`\n
\n### Parametric Analysis\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4065,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4342,"value":"sensLegend1 = {\n \n const svg = d3.select(DOM.svg(960, 70))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\n {year: \"TMY\", label: \"TODAY - TMY3\"}, \n {year: \"2050\", label: \"MID CENTURY - RCP 8.5_2041-2060_50%\"},\n {year: \"2090\", label: \"END OF CENTURY - RCP 8.5_2081-2099_50%\"}\n ])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", 3)\n .attr(\"stroke\", d => sensitivity_colors[d.year].dark)\n .style(\"fill\", d => sensitivity_colors[d.year].light)\n\n g.append(\"text\")\n .attr(\"x\", 20)\n .attr(\"y\", 0)\n .attr(\"dy\", \"0.35em\")\n .text(d => d.label);\n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4068,"value":"// md`\n//
\n// MID CENTURY - RCP 8.5_2041-2060_50%\n//

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4073,"value":"// md`\n//
\n// END OF CENTURY - RCP 8.5_2081-2099_50%\n//

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3996,"value":"peak_unit_switch = d => {\n if (unitSelection.unit === \"IP\") {\n return d;\n }\n else {\n return (d / 10.76);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"parametric_data-6-2@1.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"},{"id":545,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":2086,"value":"d3format = d3.format","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3581,"value":"ip_to = d => (unitSelection.unit === \"SI\") ? _.round(d / 3.412 / 0.092903, 2) : _.round(d, 2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":3583,"value":"si_to = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}