Public
Edited
Mar 3
// md`
// </br>
// ### Parametric Analysis
// 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.
// 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.
// </br></br>`
// parLegend = {
// const svg = d3.select(DOM.svg(960, 60))
// .style("font", "11px sans-serif")
// .style("margin-bottom", "15px");
// const g = svg.append("g")
// .selectAll("g")
// .data(["Interpolated Data", "Modeled Data"])
// .enter().append("g")
// .attr("transform", (d, i) => `translate(${40}, ${i*24 + 30})`);
// g.append("line")
// .attr("x1", 0)
// .attr("x2", 20)
// .attr("y1", 0)
// .attr("y2", 0)
// .attr("stroke", d => d === "Interpolated Data" ? "#ddeaf2": "#1f77b4")
// .attr("stroke-linejoin", "round")
// .attr("stroke-linecap", "round")
// .attr("stroke-width", 2)
// g.append("text")
// .attr("x", 30)
// .attr("y", 0)
// .attr("dy", "0.35em")
// .text(d => d);
// return svg.node();
// }
// viewof figure4 = html`<span class="labels"><strong>Figure 4</strong>: Effect of different combinations of parameter properties on building energy use intensity. Move or expand the selection box for each attribute.</span>`
// parametric_data = {
// let parametrics = (await FileAttachment("parametric_USE8.csv").csv({typed:true}));
// const columns = parametrics.columns;
// const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), CEDI: ip_to(d.CEDI), EUI: ip_to(d.EUI)}));
// data.columns = columns;
// return data;
// }
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
