30:T125f,characterization = { const config = { height: 520, width: 970, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const graph = sankey(sankey_data); const nodeWidth = graph.nodes[0].x1 - graph.nodes[0].x0; const node = svg.selectAll("g") .data(graph.nodes) .enter().append("g") .attr('transform', d => `translate(${d.x0}, ${d.y0})`); node.append("rect") .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) .attr("display", d => d.name === "Nothing" ? "none" : null) .attr("stroke", "#000") .append("title") .html(d => `${d.name}\n${si_to(d.value)} ${config.label}`); node.append("text") .style("font", "10px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .attr('font-size', 10) .html(d => d.name); node.append("text") .style("font", "12px sans-serif") .attr("x", d => d.x0 < config.width / 2 ? 6 + (d.x1 - d.x0) : - 6) .attr("y", d => (d.y1 - d.y0) / 2) .attr("dy", d => { // switch(d.name) { // case "Heating Load": // return "-1.25em"; // default: // return "1.85em"; // } return "1.8em"; }) .attr("text-anchor", d => d.x0 < config.width / 2 ? "start" : "end") .style("font-weight", "bold") .html(d => { switch(d.name) { case "Natural Gas": return `EUI: ${_.round(si_to(d.value), 0)} ${config.label}`; case "Electricity": return `EUI: ${_.round(si_to(d.value), 0)} ${config.label}`; case "Heat Pump Energy": return `EUI: ${_.round(si_to(d.value), 0)} ${config.label}`; case "Chiller Energy": return `EUI: ${_.round(si_to(d.value), 0)} ${config.label}`; default: return ""; } }); node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply") .attr("id", d => d.source.name.replace(" ", "_") + "_" + d.target.name.replace(" ", "_")); //apply gradients based on input and output const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("class", "link") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("display", d=> d.target.name === "Nothing" ? "none": null) .attr("opacity", d => d.value < 0.02 ? 0 : 1) .attr("stroke-width", d => Math.max(1, d.width)); //link.append("title") //.html(d => `${d.source.name} → ${d.target.name}\n${si_to(d.value)} ${config.label}`); function dragStart (d) { if (!d.__x) d.__x = d3.event.x; if (!d.__y) d.__y = d3.event.y; if (!d.__x0) d.__x0 = d.x0; if (!d.__y0) d.__y0 = d.y0; if (!d.__x1) d.__x1 = d.x1; if (!d.__y1) d.__y1 = d.y1; } function dragMove(d) { d3.select(this) .attr('transform', function (d) { const dx = d3.event.x - d.__x; const dy = d3.event.y - d.__y; d.x0 = d.__x0 + dx; d.x1 = d.__x1 + dx; d.y0 = d.__y0 + dy; d.y1 = d.__y1 + dy; if (d.x0 < 0) { d.x0 = 0; d.x1 = nodeWidth; } if (d.x1 > config.width) { d.x0 = config.width - nodeWidth; d.x1 = config.width; } if (d.y0 < 0) { d.y0 = 0; d.y1 = d.__y1 - d.__y0; } if (d.y1 > config.height) { d.y0 = config.height - (d.__y1 - d.__y0); d.y1 = config.height; } return `translate(${d.x0}, ${d.y0})`; }); sankey.update(graph); link.selectAll(".link").attr('d', d3.sankeyLinkHorizontal()); } function dragEnd(d) { delete d.__x; delete d.__y; delete d.__x0; delete d.__x1; delete d.__y0; delete d.__y1; } return svg.node(); }31:T2afa,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", }, "WINSHGC": { newName: "SHGC" }, "ROOFR": { newName: "Roof R", }, "WALLR": { newName: "Wall R", }, "THERMALMASS": { newName: "Thermal Mass", }, "NATVENT_ACH": { newName: "NatVent_ACH", }, "WWR": { newName: "WWR (All Orientation)", ticks: d3.format(",.0%"), }, "WWRN": { newName: "WWR North", ticks: d3.format(",.0%"), }, "WWRE": { newName: "WWR East", ticks: d3.format(",.0%"), }, "WWRS": { newName: "WWR South", ticks: d3.format(",.0%"), }, "WWRW": { newName: "WWR West", ticks: d3.format(",.0%"), } }, 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, 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 => ip_to(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()); } } // const yAxis = g => { // if (i % config.cols === 0) { // g.call(d3.axisLeft(y) // .ticks(6) // .tickFormat(d3.format(".3f"))) // .call(g => g.select(".domain").remove()); // } // } let y_label; if (config.units === "IP") { y_label = `${config.y} kBTU/ft²/yr`; } else { y_label = `${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 => 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); 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(ip_to(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(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", "#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(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, 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(); }32:T275c,parcoords = { const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "WALLR": { newName: "Wall R", ticks: d3.format(".0f"), numTicks: 6, // selection: [180, 250] }, "ROOFR": { newName: "Roof R", ticks: d3.format(".0f"), numTicks: 6, // selection: [350, 450] }, "WWR": { newName: "WWR", numTicks: 4, reverse: true, // selection: [400, 450] }, "WINU": { newName: "Window U", ticks: d3.format(".2f"), numTicks: 5, reverse: true, anchor: "middle" }, "THERMALMASS": { newName: "Thermal Mass", numTicks: 5, anchor: "middle" }, "WINSHGC": { newName: "Window SHGC", ticks: d3.format(".2f"), numTicks: 6, reverse: true, // selection: [50, 150] }, "TEDI": { // newName: `${unitSelection.unit === "IP" ? "TEDI kBTU/ft²/yr": "TEDI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [340, 360]}, "EUI": { // newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "EDI": { // newName: `${unitSelection.unit === "IP" ? "EDI kBTU/ft²/yr": "EDI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "CEDI": { // newName: `${unitSelection.unit === "IP" ? "CEDI kBTU/ft²/yr": "CEDI kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "peak_cooling": { newName : "Pk.Cool", anchor: "end", ticks: d3.format(".2f"), numTicks: 10, // selection: [0, 435] }, "peak_heating": { newName : "Pk.Heat", anchor: "end", ticks: d3.format(".2f"), numTicks: 10, // 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"); 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); } // 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 = "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(100); 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:Ta3d,color = { const lookup = { "Heat Pump Energy": "#d52928", "Chiller Energy": "#1dbfcf", "Domestic Hot Water":"#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 + Pumps":"#bfbfbf", "Equipment":"#6aadd6", "Ambulance Charging":"#dddddd", "Pumps":"#dddddd", "Fans":"#dddddd", "Water Systems":"#dddddd", "Other Gains":"#a17eb9", "Equipment Gain":"#a17eb9", "Thermal Mass":"#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":"#6aadd6", "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", "Solar Gain":"#6aadd6", "electric_equip":"#6aadd6", "Solar":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", }; return name => lookup[name]; }34: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; }35: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; }36:T40b,html``37:[{"id":"a67b4cc390aa78749b0791db468c832ad5d3d4a504dc13ed5d42dfc17442c991c8065ccfc78eeaa6bcbcfe101d270c5c72e6c3a6621e8c1de08eda5078557c4f","href":"https://static.observableusercontent.com/files/a67b4cc390aa78749b0791db468c832ad5d3d4a504dc13ed5d42dfc17442c991c8065ccfc78eeaa6bcbcfe101d270c5c72e6c3a6621e8c1de08eda5078557c4f","name":"analysis_RangeBarn_3_Sankey.csv","type":"text/csv","lastModified":1684862462034.427,"size":2037},{"id":"6988625176a065b472f790555c671fb1faa1b1fef544978d7f6950662ea689c96141d600a53616b0c517a2812af858b7f2b4bf2f60c0cf543ef7cda3cd092317","href":"https://static.observableusercontent.com/files/6988625176a065b472f790555c671fb1faa1b1fef544978d7f6950662ea689c96141d600a53616b0c517a2812af858b7f2b4bf2f60c0cf543ef7cda3cd092317","name":"analysis_analysis_1_Sensitivity_USE@3.csv","type":"text/csv","lastModified":1684947133205.855,"size":3539},{"id":"dc2a702550ecd486a50a50763225f0e21d3cd1b9a7e561e25141f5dd2a80f2502b5a2215f4f8c70f31ebcba85ace05d2e75772717c4a528398bccc01c5ae1cbd","href":"https://static.observableusercontent.com/files/dc2a702550ecd486a50a50763225f0e21d3cd1b9a7e561e25141f5dd2a80f2502b5a2215f4f8c70f31ebcba85ace05d2e75772717c4a528398bccc01c5ae1cbd","name":"Capture@1.PNG","type":"image/png","lastModified":1684337172998.697,"size":770280},{"id":"2ac1cb6a1267c659f50fcdd2bb2a959895783aa67c93ddb59379af0edbf591e7f4a0303af301beb00cfd8936ef27762ba3aa358c2b45f9a3d393f313169c53f1","href":"https://static.observableusercontent.com/files/2ac1cb6a1267c659f50fcdd2bb2a959895783aa67c93ddb59379af0edbf591e7f4a0303af301beb00cfd8936ef27762ba3aa358c2b45f9a3d393f313169c53f1","name":"analysis_analysis_1_Parametric_USE2.csv","type":"text/csv","lastModified":1684986892113.643,"size":654068}] 2e:{"title":"The Fall Line - Range Barn","cells":[{"id":0,"value":"md`# The Fall Line - Range Barn`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"md`\n
\n### Introduction\n\nIntroba developed a whole building energy model for the Fall Line. This study is designed to help characterize the proposed design energy use and to study the sensitivity of different envelope component characteristics on building energy use. The primary purpose of this analysis is to benchmark the project against a code-compliant evelope and to explore other measures to reach a Passive House standard.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3195,"value":"FileAttachment(\"Capture@1.PNG\").image({ width:960 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"viewof figure1 = html`Figure 1: Architectural Model.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`\n

\n### Energy Use Characterization\n\nFigure 2 below shows the breakdown in energy by end use for the baseline design. Energy sources are aligned on the left side of the graphic, while energy sinks (conduction losses, equipment gains, etc.) are aligned on the right side. The total energy use intensity (EUI) of the design is approximately 30 Btu/ft²/yr (assuming COP of 5 in heating, COP of 6 in cooling, and COP of 5 in Domestic Hot Water). The load components on the right show the key drivers of proposed design energy use.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"viewof figure2 = html`Figure 2: Building energy use characterization showing load components and energy end-uses for the design.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`\n

\n### Envelope Sensitivity\nIn addition to overall energy use modeling, sensitivity analysis was conducted to understand the sensitivity of various envelope characteristics on building energy use. Figure 3 presents these results with the horizontal axes showing incremental changes in the studied parameter, and the vertical axes showing the impact of these changes on building EUI, TEDI, CEDI or peak loads. The line represents the overall trend for each parameter, the baseline values (code-prescriptive envelope parameters) are marked by dark blue dots. In accordance with the energy use characterization discussed above, the EDI can most benefit from further improvements to window U values, followed by reduced window areas and improvements to wall and roof insulation.\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":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"sensLegend = {\n \n const svg = d3.select(DOM.svg(960, 50))\n .style(\"font\", \"11px sans-serif\")\n .style(\"margin-bottom\", \"15px\");\n\n const g = svg.append(\"g\")\n .selectAll(\"g\")\n .data([\"Assumed Typical Building Baseline Parameters\", \"Potential Changes in Building Parameters\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", d => d === \"Assumed Typical Building Baseline Parameters\" ? 3: 4)\n .attr(\"stroke\", d => d === \"Assumed Typical Building Baseline Parameters\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Assumed Typical Building Baseline Parameters\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Assumed Typical Building Baseline Parameters\" ? 1: .8 );;\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}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof figure3 = html`Figure 3: Sensitivity of individual building performance parameters on building EUI.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`\n
\n### Parametric Analysis\nTo better understand the effect of different performance characteristics on building TEDI, Figure 4 presents a parallel coordinates plot where each of the first seven vertical axes represents a performance parameter and its evaluated properties, and the last axis show the EUI, TEDI, CEDI, and EDI resulting from the selected combinations. \n\nPutting constraints on one of more attributes, for instance, allows for the exploration of how changing the remaining attributes affects the TEDI. 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.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":154,"value":"viewof figure4 = html`Figure 4: Effect of different combinations of parameter properties on building energy use intensity. Move or expand the selection box for each attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2695,"value":"stacked_data = (await d3.csv(`https://da.introba.com/projects/tor-ems/data/stacked_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"pvColor = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\", \"#d7ddda\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"pvColorUpdate = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\"])\n .domain(projectKeysUpdate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"projectKeys = [\"gridToProject\", \"renewableToProject\", \"batteryToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"projectKeysUpdate = [\"gridToProject\", \"renewableToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"pvDataUpdate = {\n let data = await d3.csv(`https://da.introba.com/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"},{"id":1694,"value":"renewables_data_update = {\n let renewables = (await d3.csv(`https://da.introba.com/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"},{"id":39,"value":"$33","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":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"},{"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(\"analysis_RangeBarn_3_Sankey.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":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":66,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await FileAttachment(\"analysis_analysis_1_Sensitivity_USE@3.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":89,"value":"parametric_data = {\n let parametrics = (await FileAttachment(\"analysis_analysis_1_Parametric_USE2.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), CEDI: ip_to(d.CEDI), EUI: ip_to(d.EUI)}));\n data.columns = columns;\n \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":86,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"$35","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\") ? d / 3.412 / 0.092903 : d;","pinned":true,"hidden":false,"mode":"ojs"},{"id":3583,"value":"si_to = d => (unitSelection.unit === \"IP\") ? d * 3.412 * 0.092903 : d;","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}