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:T2e76, sensitivies = { //general setup const lookup = { FRIT: { "0": "No Frit", "1": "North", "2": "East", "3": "South", "4": "West", "5": "All Frit" } } 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", // ticks: d3.scaleLinear() // .domain([0, 1]) // Set the domain of your x-axis // .range([0, 1, 2]), // Define the specific values you want to display // tickFormat: d3.format(".1f") // Define the format of your ticks "ROOFR": { newName: "Roof R", }, "WALLR": { newName: "Wall R", }, "FRIT": { newName: "Frit on Window", ticks: d => lookup["FRIT"]["".concat(d)], }, "NATVENT_ACH": { newName: "NatVent_ACH", }, "WWR": { newName: "WWR (All Orientation)", ticks: d3.format(",.0%"), }, "SHADING_OVERHANG_PROJECTION": { newName: "Shading Projection", 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"); // Adjust the unit for Peak Cooling Load Intensity const tipContent = (variable, p_value, EUI) => { let val = unitSelection.unit === "IP" ? _.round(EUI, 1): _.round(EUI / 3.412 / 0.092903, 1);; let label = config.y; let units = unitSelection.unit === "IP"? "kBtu/ft²/yr": "kWh/m²/yr"; if (config.y === "Peak Heating Load Intensity" || config.y === "Peak Cooling Load Intensity") { label = config.y === "Peak Heating Load Intensity" ? "Peak Heating" : "Peak Cooling"; if (unitSelection.unit === "SI") { val = `${_.round(EUI * 10.76, 1)}`; units = "W/m²"; } else { val = `${_.round(EUI, 1)}`; units = "W/ft²"; } } return `${variable}: ${p_value}
${label}: ${val} ${units}`; }; //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()); } } let y_label; if (config.units === "IP") { y_label = `${config.y} kBTU/ft²/yr`; } else { y_label = `${config.y} kWh/m²/yr`; } if (config.y === "Peak Cooling Load Intensity") { y_label = unitSelection.unit === "SI"? "Peak Cooling W/m²" : "Peak Cooling W/ft²"; } if (config.y === "Peak Heating Load Intensity") { y_label = unitSelection.unit === "SI"? "Peak Heating W/m²" : "Peak Cooling W/ft²"; } //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:T31af,parcoords = { const config = { height: 500, width: 1170, margin: { top: 60, right: 10, bottom: 10, left: 50 }, format: { "WALLR": { newName: "Wall R", ticks: d3.format(".1f"), numTicks: [16.7, 20, 25], // selection: [180, 250] }, "ROOFR": { newName: "Roof R", ticks: d3.format(".0f"), numTicks: 2, anchor: "middle" // selection: [350, 450] }, // "WWR": { // newName: "WWR", // // selection: [400, 450] // }, // "WWRN": { // newName: "WWRN", // // selection: [250, 350] // }, // "WWRE": { // newName: "WWRE", // // selection: [250, 350] // }, // "WWRS": { // newName: "WWRS", // // selection: [250, 350] // }, // "WWRW": { // newName: "WWRW", // // selection: [250, 350] // }, "WINU": { newName: "Window U", ticks: d3.format(".2f"), numTicks: 6, reverse: true, // selection: [0, 100] }, "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: "middle", // ticks: d3.format(".1f"), // numTicks: 10}, // // selection: [340, 360]}, "EUI": { newName: `${unitSelection.unit === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"}`, anchor: "middle", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GASCOST": { newName: "Cost $/yr (Gas)", anchor: "middle", ticks: d3.format(","), numTicks: 10}, // selection: [0, 435]}, "ELECTRICITYCOST": { newName: "Cost $/yr (Elec.)", anchor: "middle", ticks: d3.format(","), numTicks: 10}, // selection: [0, 435]}, "TOTALCOST": { newName: "Cost $/yr (Total)", anchor: "middle", ticks: d3.format(","), numTicks: 10}, // selection: [0, 435]}, // "CEDI": { // newName: `${unitSelection.unit === "IP" ? "CEDI kBTU/ft²/yr": "CEDI kWh/m²/yr"}`, // anchor: "middle", // ticks: d3.format(".1f"), // numTicks: 10}, // selection: [0, 435]}, // "peak_cooling": { // newName : `Pk.Cool ${unitSelection.unit === "IP" ? "W/ft²": "W/m²"}`, // anchor: "middle", // ticks: d3.format(".2f"), // numTicks: 10, // // selection: [0, 435] // }, // "peak_heating": { // newName : `Pk.Heat ${unitSelection.unit === "IP" ? "W/ft²": "W/m²"}`, // anchor: "end", // ticks: d3.format(".2f"), // numTicks: 10, // selection: [0, 435] // "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") // }, // "EDI": { // newName: `${unitSelection.unit === "IP" ? "EDI kBTU/ft²/yr": "EDI kWh/m²/yr"}`, // anchor: "middle", // numTicks: 6, // ticks: d3.format(".1f"), // selection: [350, 450] // }, // "peak_cooling_W_per_sqft": { // newName: `${unitSelection.unit === "IP" ? "Peak Cooling W/ft²": "Peak Cooling W/m²"}`, // }, // "peak_heating_W_per_sqft": { // newName: `${unitSelection.unit === "IP" ? "Peak Heating W/ft²": "Peak Heating W/m²"}`, // } }, 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]; let y_extent = d3.extent(data, d => d[key]); // console.log(y_extent) if (y_extent[0] === 16.7 ) { y_extent = [16.6, y_extent[1]]; } return [key, d3.scaleLinear(y_extent, 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:Ta68,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", "Water Systems":"#dddddd", "Fans":"#dddddd", "Heat Rejection":"#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":"#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", "Heating 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]; }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":"767146fe55a909904c280a3f98850ade458406285ba0145cc8693250506db816b1b0227460b329ca20368a9d05e15f4459f261ae97dfbdb4cce9e2241d2916d6","href":"https://static.observableusercontent.com/files/767146fe55a909904c280a3f98850ade458406285ba0145cc8693250506db816b1b0227460b329ca20368a9d05e15f4459f261ae97dfbdb4cce9e2241d2916d6","name":"Capture@1.PNG","type":"image/png","lastModified":1706237073661.134,"size":2079798},{"id":"d46d1321dede689b0d8a7c08e506963ca3f2697bbe952c985263c87b88143a0aea457f8f2cd53bdc7a906f430ee4fbd2fc544f93e9c6fea39d22a5001d806a9e","href":"https://static.observableusercontent.com/files/d46d1321dede689b0d8a7c08e506963ca3f2697bbe952c985263c87b88143a0aea457f8f2cd53bdc7a906f430ee4fbd2fc544f93e9c6fea39d22a5001d806a9e","name":"Sankey_ACH_new@2.csv","type":"text/csv","lastModified":1706237199460.989,"size":2473},{"id":"2d69e68d0947c1b311577ab4aead23d48daf25d6d81ef03486bd4c13e85886a30e91abb5c199f2154be33012c1028fa0c3ca89fd15b5ed0d6b744271849a587b","href":"https://static.observableusercontent.com/files/2d69e68d0947c1b311577ab4aead23d48daf25d6d81ef03486bd4c13e85886a30e91abb5c199f2154be33012c1028fa0c3ca89fd15b5ed0d6b744271849a587b","name":"sensitivity_Plot_Modi2.csv","type":"text/csv","lastModified":1706284013771.851,"size":2302}] 2e:{"title":"Universicy of Missouri, CESEP","cells":[{"id":0,"value":"md`# Universicy of Missouri, CESEP`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"md`\n
\n### Introduction\n\nIntroba developed a preliminary whole building energy model for the Center for Energy Science, Engineering and Policy at University of Missouri. This study is designed to help characterize the baseline design energy use and to study the sensitivity of different envelope component characteristics on building energy use.`","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: Rendering Images.

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

\n### Energy Use Characterization\n\nFigure 2 below illustrates the energy breakdown by end use for the LEED Base design. Energy sources are depicted on the left side of the graphic, while energy sinks (conduction losses, equipment gains, etc.) are displayed on the right side. The total energy use intensity (EUI) of the design is approximately 123 kBtu/ft²/yr (with a lab exhaust rate of ACH 6 for occupied and ACH 3 for unoccupied scenarios applied). The load components on the right highlight the key drivers of the proposed design's energy consumption.\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 baseline 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. In this study, lab exhaust rates have intentionally not been applied extensively. This decision is deliberate, aiming to place heightened emphasis on envelope variables and their consequential impact on building performance, particularly in relation to passive design considerations. The line represents the overall trend for each parameter, the baseline values (code-prescriptive envelope parameters) are marked by dark blue dots.\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":3879,"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([\"Code-prescriptive Design\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", d => d === \"Code-prescriptive Design\" ? 3: 10)\n .attr(\"stroke\", d => d === \"Code-prescriptive Design\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Code-prescriptive Design\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Code-prescriptive Design\" ? 1: .6 );;\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":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\n// To better understand the effect of different performance characteristics on a building, Figure 4 presents a parallel coordinates plot where each of the first four vertical axes represents a performance parameter and its evaluated properties, and the last four axes show the Energy Use Intensity (EUI) and Annual Energy Costs in dollars per year for both gas and electricity, as well as the total resulting from the selected combinations. \n\n// 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.\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, 2)} 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":4254,"value":"peak_unit_switch = d => {\n if (unitSelection.unit === \"IP\") {\n return d;\n }\n else {\n return (d * 10.764);\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(\"Sankey_ACH_new@2.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(\"sensitivity_Plot_Modi2.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(\"parametric_USE8.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 => {\n let val = d\n if (euiSwitch.y === \"Peak Cooling Load Intensity\" || euiSwitch.y === \"Peak Heating Load Intensity\") {\n if (unitSelection.unit === \"SI\") {\n val = _.round(val * 10.76, 2);\n }\n else {\n val = _.round(val, 2);\n }\n }\n else {\n if (unitSelection.unit === \"SI\") {\n val = _.round(val / 3.412 / 0.092903, 2);\n }\n else {\n val = _.round(val, 2);\n }\n }\n return val;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3583,"value":"si_to = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3825,"value":"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}