30:T793,md`# PMX Natural Ventilation Analysis
### Overview Integral’s preliminary climate analysis showed that natural ventilation is a viable space conditioning strategy for the PMX office spaces, particularly during the shoulder seasons and summer months when the outside air temperature is at or slightly below the inside conditioning setpoint. Building on this analysis, Integral developed an airflow model to ensure that natural ventilation could provide adequate cooling to offset internal and external heat gains – particularly in the summer months. The chart below shows the number of potential discomfort hours (hours when the operative space temperature is above a comfortable level) throughout the year for each natural ventilation strategy. The diagrams represent three unique natural ventilation strategies: **Strategy 1:** Single-sided natural ventilation. The general rule of thumb for single-sided natural ventilation is that the ventilated zone extends 2.5x the window head height from the façade. For example, if the window head height is 9 ft., the ventilated zone would extend 22.5 ft. from the façade. In this scenario, the core would be mechanically ventilated and conditioned, limiting the potential for energy savings. **Strategy 2:** Operable windows plus solar chimney. The solar chimney provides increased air movement in the space and makes it possible to utilize natural ventilation for the entire floor plate. **Strategy 3:** Operable windows plus solar chimney plus fans. This strategy has all of the benefits of strategy 2, but the fans provide additional air movement, which in turn provides a slightly greater cooling effect. With this strategy, the office space would only be uncomfortable (requiring supplemental cooling) for less than 1% of working hours throughout the year. It’s important to note that this number represents the temperature in the hottest zone (south core).
`31:Tb1a,viewof zone = { let parent = document.createElement("div"); parent.value = "opt_1"; let svg = d3.select(DOM.svg(960, 280)); let cover = (await d3.xml(`https://www.elementa.nyc/projects/pmx/data/nat_vent_zones_purple.svg?version=${Math.floor(Math.random() * 1000)}`).then(data => { svg.node().appendChild(data.documentElement.getElementById("root")); let style = document.createElement("style"); style.innerHTML = data.getElementsByTagName("style")[0].innerHTML; svg.attr("viewBox", data.getElementsByTagName("svg")[0].getAttribute("viewBox")); document.head.appendChild(style); svg.selectAll("#opt_x5F_1, #opt_x5F_2, #opt_x5F_3") .classed("hidden", true) .classed("clicked", false) .on("mouseover", function(d) { d3.select(this) .style("cursor", "pointer") .classed("hidden", false); }).on("mouseout", function(d) { if (!(d3.select(this).classed("clicked"))) d3.select(this).classed("hidden", true); }).on("click", function(d) { d3.selectAll("#opt_x5F_1, #opt_x5F_2, #opt_x5F_3").classed("clicked", false).classed("hidden", true); d3.select(this).classed("hidden", false).classed("clicked", true); parent.value = d3.select(this).attr("id").replace("_x5F", ""); parent.dispatchEvent(new CustomEvent("input")); }); svg.selectAll("#opt_x5F_1").classed("hidden", false).classed("clicked", true); // svg.select("#bldga_x5F_hover_1_").on("mouseover", function(d) { // svg.selectAll("#bldga, #bldga_x5F_label").classed("hidden", false); // d3.select(this).style("cursor", "pointer"); // }).on("mouseout", d => { // svg.selectAll("#bldga, #bldga_x5F_label").classed("hidden", true); // }).on("click", function() { window.location.href = "https://www.elementa.nyc/projects/reston-promenade/building-a"; }); // svg.select("#bldgb_x5F_hover").on("mouseover", function(d) { // svg.selectAll("#bldgb, #bldgb_x5F_label").classed("hidden", false); // d3.select(this).style("cursor", "pointer"); // }).on("mouseout", d => { // svg.selectAll("#bldgb, #bldgb_x5F_label").classed("hidden", true); // }).on("click", function() { window.location.href = "https://www.elementa.nyc/projects/reston-promenade/building-b"; }); // svg.select("#bldgd_x5F_hover").on("mouseover", function(d) { // svg.selectAll("#bldgd, #bldgd_x5F_label").classed("hidden", false); // d3.select(this).style("cursor", "pointer"); // }).on("mouseout", d => { // svg.selectAll("#bldgd, #bldgd_x5F_label").classed("hidden", true); // }).on("click", function() { window.location.href = "https://www.elementa.nyc/projects/reston-promenade/building-d"; }); parent.appendChild(svg.node()); })) return parent; }32:T1359,plot = { const config = {width: 960, height: 400, margin: {left: 40, top: 50, right: 30, bottom: 10}}; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleBand() .domain(Array.from(nested.get(1).keys())) .range([config.margin.left, config.width - config.margin.right]) .paddingInner(0.05) .paddingOuter(0); const y = d3.scaleBand() .domain(Array.from(nested.keys())) .range([config.margin.top, config.height - config.margin.bottom]) .paddingInner(0.05) .paddingOuter(0); const adjust = zone === "opt_3" ? 1.5 : 0; const dHours = data.filter(d => (d.hour > timeRange[0]) && (d.hour <= timeRange[1]) && (d[zone] > d.limit_high + adjust)).length; const percentHours = dHours/data.filter(d => (d.hour > timeRange[0]) && (d.hour <= timeRange[1])).length; svg.append("g") .attr("transform", `translate(${config.margin.left}, ${config.margin.top/3})`) .append("text") .attr("font-size", 14) .html(`Hot Discomfort Hours: ${dHours} (${d3.format(".0%")(percentHours)} of selected range)`); const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "middle") g.selectAll("legends") .data([0, 6, 12, 18, 24, 30]) .join("rect") .attr("fill", d => d3.interpolateRdPu(d/30)) .attr("x", (d, i) => i * 22) .attr("y", 0) .attr("width", 20) .attr("height", 10); g.selectAll(".labels") .data(["0 Hours", ">30 Hours"]) .join("text") .attr("text-anchor", (d, i) => i === 0? "start": "end") .attr("x", (d, i) => -45 + i * 230) .attr("y", 0) .attr("dy", "0.8em") .text(String); } svg.append("g") .attr("transform", `translate(${config.width - (22*10)}, ${config.margin.top /3 - 10})`) .call(legend); d3.selectAll(".tooltip").remove(); 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 = (arr, h) => { let n = arr.filter(d => d[zone] > d.limit_high + adjust).length; let month = d3.timeFormat("%B")(arr[0].date); let f = d3.timeFormat("%-I%p"); return `${month} ${f(new Date(2018, 1, 1, h - 1))}-${f(new Date(2018, 1, 1, h))}
${n} Discomfort Hour${n === 1 ? "": "s"}`; } const monthFormat = d => d3.timeFormat("%b")(new Date(2018, d - 1, 1, 1)); const yAxis = g => g .attr("transform", `translate(${config.margin.left},0)`) .call(d3.axisLeft(y).tickFormat(monthFormat).tickPadding(15)) .call(g => g.selectAll(".tick line").remove()) .call(g => g.select(".domain").remove()); // ` // Third Quartile: ${_.round(d[2], 2)} ${yUnit}
// Median: ${_.round(d[1], 2)} ${yUnit}
// First Quartile: ${_.round(d[0], 2)} ${yUnit}
// < ${_.round((8760 - d[5]) / 8760 * 100, 2)}% of year` const month = svg.selectAll(".month") .data(Array.from(nested.keys())) .join("g") .attr("class", "month") .attr("transform", d => `translate(0, ${y(d)})`); month.each(function(d, i) { d3.select(this).selectAll(".hour") .data(Array.from(nested.get(d).keys())) .join("rect") .attr("class", "hour") .attr("x", hour => x(hour)) .attr("y", 0) .attr("height", y.bandwidth()) .attr("width", x.bandwidth()) .attr("fill", hour => grid_color(nested.get(d).get(hour), zone)) .on("mouseover", function(dd) { tooltip.style("display", null); tooltip.html(tipContent(nested.get(d).get(dd), dd)) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); const fill = d3.select(this).attr("fill"); d3.select(this) .attr("fill", chroma(fill).darken().hex()); }).on("mousemove", function(dd) { tooltip.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }).on("mouseout", function(dd) { tooltip.style("display", "none"); d3.select(this) .attr("fill", hour => grid_color(nested.get(d).get(hour), zone)); }); }); svg.append("g") .call(yAxis); return svg.node(); }33:Td82,viewof timeRange = { const config = {width: 960, height: 65, margin: {left: 40, top: 0, right: 30, bottom: 25}}; const svg = d3.select(DOM.svg(config.width, config.height)); const x = d3.scaleLinear() .domain([0, 24]) .range([0, config.width - config.margin.left - config.margin.right]); const hour = d => { if (d % 2 === 0) { return d3.timeFormat("%-I %p")(new Date(2018, 1, 1, d)); } else { return ""; } } const g = svg.append("g") .attr("transform", `translate(${config.margin.left},${config.height - config.margin.bottom})`); const xAxis = g => g .call(d3.axisTop(x).tickPadding(30).tickSize(1).ticks(24).tickFormat(hour)) .call(g => g.selectAll(".tick line").attr("y1", 2).attr("opacity", 0.5)) .call(g => g.select(".domain").attr("stroke", "#efefef").attr("stroke-width", 3)); const brush = d3.brushX() .extent([[0, 0], [config.width - config.margin.left - config.margin.right, 3]]) .on("brush", brushed); g.append("g") .attr("class", "axis-x") .call(xAxis); const gBrush = g.append("g") .attr("class", "brush") .attr("pointer-events", "none") .call(brush) .call(g => g.selectAll("rect.selection").attr("display", "none")) .call(g => g.selectAll(".overlay").attr("display", "none")); gBrush.select(".overlay").attr("pointer-events", "none"); const selected = gBrush .append("line") .attr("class", ".selection--custom") .attr("stroke", d3.interpolateRdPu(0.8)) .attr("stroke-width", 3) .attr("x1", x(6)) .attr("y1", 1) .attr("x2", x(22)) .attr("y2", 1); const handles = gBrush .selectAll(".handle--custom") .data([{type: "w"}, {type: "e"}]) .join("circle") .attr("fill", d3.interpolateRdPu(0.8)) .attr("r", 5) .attr("cy", 1) .attr("cursor", "pointer"); const ghost1 = gBrush .selectAll(".handle--ghost") .data([{type: "w"}, {type: "e"}]) .join("circle") .attr("fill", d3.interpolateRdPu(0.8)) .attr("r", 20) .attr("cy", 1) .attr("opacity", 0.05) .attr("cursor", "pointer"); const ghost2 = gBrush .selectAll(".handle--ghost--motion") .data([{type: "w"}, {type: "e"}]) .join("circle") .attr("fill", d3.interpolateRdPu(0.8)) .attr("r", 20) .attr("cy", 1) .attr("opacity", 0) .attr("cursor", "pointer") .on("mouseover", function(d) { d3.select(this).transition() .duration(100) .attr("opacity", 0.15); }).on("mouseout", function(d) { d3.select(this).transition() .duration(100) .attr("opacity", 0); }); gBrush.selectAll(".overlay") .each(function(d) { d.type = "selection"; }) .on("mousedown touchstart", function(d) { return; }) gBrush.call(brush.move, [8, 18].map(x)); function brushed() { let s = d3.event.selection; if (s == null) { handles.attr("display", "none"); } else { let sx = s.map(x.invert).map(Math.round); selected.attr("x1", x(sx[0])).attr("x2", x(sx[1])); handles.attr("display", null).attr("cx", function(d, i) { return x(sx[i]); }); ghost1.attr("display", null).attr("cx", function(d, i) { return x(sx[i]); }); ghost2.attr("display", null).attr("cx", function(d, i) { return x(sx[i]); }); svg.node().value = sx; svg.node().dispatchEvent(new CustomEvent("input")); } } return svg.node(); } 34:T2c66,series = { const config = {width: 960, height: 550, context: 60}; const margin = {top: 10, right: 30, bottom: 20, left: 40, middle: 50}; const chart = {width: config.width - margin.left - margin.right, height: config.height - margin.top - margin.bottom - margin.middle - config.context } const svg = d3.select(DOM.svg(config.width, config.height)); const x1 = d3.scaleTime() .range([0, chart.width]) .domain(d3.extent(data, d => d.date)); const x2 = d3.scaleTime() .range([0, chart.width]) .domain(d3.extent(data, d=> d.date)); const y1 = d3.scaleLinear() .range([chart.height, 0]) .domain([0, 35]).nice(); const y2 = d3.scaleLinear() .range([config.context, 0]) .domain([d3.min(data, d => d.oa), 35]).nice(); const xAxis1 = d3.axisBottom(x1); const xAxis2 = d3.axisBottom(x2); const yAxis = g => g .call(d3.axisLeft(y1)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .html("° C")); const brush = d3.brushX() .extent([[0, 0], [chart.width, config.context]]) .on("brush end", brushed); const zoom = d3.zoom() .scaleExtent([1, Infinity]) .translateExtent([[0, 0], [chart.width, chart.height]]) .extent([[0, 0], [chart.width, chart.height]]) .on("zoom", zoomed); const area1 = d3.area() .x(d => x1(d.date)) .curve(d3.curveStep) .y0(d => y1(d.trm * 0.33 + 20.8)) .y1(d => y1(d.trm * 0.33 + 16.8)); let area1_expanded = d3.area() .x(d => x1(d.date)) .curve(d3.curveStep) .y0(d => y1(d.trm * 0.33 + 20.8)) .y1(d => y1(d.trm * 0.33 + 16.8)); let area2 = d3.area() .x(d => x2(d.date)) .curve(d3.curveStep) .y0(d => y2(d.trm * 0.33 + 20.8)) .y1(d => y2(d.trm * 0.33 + 16.8)); const area1_oa = d3.area() .x(d => x1(d.date)) .curve(d3.curveStep) .y0(d => y1(d.oa_high)) .y1(d => y1(d.oa_low)); const area2_oa = d3.area() .x(d => x2(d.date)) .curve(d3.curveStep) .y0(d => y2(d.oa_high)) .y1(d => y2(d.oa_low)); let line1 = d3.line() .x(d => x1(d.date)) .y(d => y1(d.opt_1)) .curve(d3.curveBasis); let line2 = d3.line() .x(d => x2(d.date)) .y(d => y2(d.opt_1)) .curve(d3.curveBasis); svg.append("defs").append("clipPath") .attr("id", "clip") .append("rect") .attr("width", chart.width) .attr("height", chart.height); const focus = svg.append("g") .attr("class", "focus") .attr("transform", `translate(${margin.left},${margin.top})`); const context = svg.append("g") .attr("class", "context") .attr("transform", `translate(${margin.left},${config.height - margin.bottom - config.context})`); svg.append("rect") .attr("class", "zoom") .attr("width", chart.width) .attr("height", chart.height) .attr("cursor", "move") .attr("fill", "none") .attr("pointer-events", "all") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(zoom); function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom let s = d3.event.selection || x2.range(); x1.domain(s.map(x2.invert), x2); focus.selectAll(".area").attr("d", area1); focus.selectAll(".area_expanded").attr("d", area1_expanded); focus.selectAll(".area_oa").attr("d", area1_oa); focus.select(".line").attr("d", line1); focus.select(".axis--x").call(xAxis1); svg.select(".zoom").call(zoom.transform, d3.zoomIdentity .scale(chart.width / (s[1] - s[0])) .translate(-s[0], 0)); } function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush let value = []; let t = d3.event.transform; x1.domain(t.rescaleX(x2).domain()); value = x1.range().map(t.invertX, t); svg.property("value", value).dispatch("input"); focus.selectAll(".area").attr("d", area1); focus.selectAll(".area_expanded").attr("d", area1_expanded); focus.selectAll(".area_oa").attr("d", area1_oa); focus.select(".line").attr("d", line1); focus.select(".axis--x").call(xAxis1); context.select(".brush").call(brush.move, x1.range().map(t.invertX, t)); } const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") .attr("transform", `translate(${config.width - margin.right},${margin.top})`); g.append("rect") .attr("x", -100) .attr("y", -5) .attr("width", 14) .attr("height", 50) .attr("opacity", 0.6) .style("mix-blend-mode", "multiply") .attr("fill", color("expanded")); g.append("rect") .attr("x", -100) .attr("y", 10) .attr("width", 14) .attr("height", 20) .attr("opacity", 0.6) .style("mix-blend-mode", "multiply") .attr("fill", color("comfort")); g.append("rect") .attr("x", -80) .attr("y", -5) .attr("width", 8) .attr("height", 50) .attr("opacity", 0.6) .attr("fill", color("oa")); g.append("line") .attr("x1", -100) .attr("x2", -72) .attr("y1", 60) .attr("y2",60) .attr("stroke", color("perceived")) .attr("stroke-width", 2); // g.append("path") // .attr("stroke", "#2891B2") // .attr("stroke-width", 2) // .attr("fill", "none") // .attr("d", d3.line() // .x(d => d.x) // .y(d => d.y) // .curve(d3.curveBasis)([{x: -100, y: 60}, {x: -96, y: 56}, {x: -92, y: 64}, {x: -86, y: 60}])); g.selectAll(".labelsLeft") .data(["Upper Comfort Limit", "Comfort Zone", "Lower Comfort Limit", "Inside Perceived Temp."]) .join("text") .attr("fill","#333333") .attr("text-anchor", "end") .attr("x", -110) .attr("y", (d, i) => i * 20) .attr("dy", "0.35em") .text(String); g.selectAll(".labelsRight") .data(["OA High", "OA Low"]) .join("text") .attr("fill","#333333") .attr("text-anchor", "start") .attr("x", -64) .attr("y", (d, i) => i * 40) .attr("dy", "0.35em") .text(String); // const c = g.selectAll(".colors").data(["Outside of target range", "Within target range"]) // c.join("rect") // .attr("x", -14) // .attr("y", (d, i) => i * 25 + 143) // .attr("width", 14) // .attr("height", 14) // .attr("fill", (d, i) => [highColor, lowColor][i]); // c.join("text") // .attr("text-anchor", "end") // .attr("x", -40) // .attr("y", (d, i) => i * 25 + 150) // .attr("dy", "0.35em") // .text(String); } let band = data.filter((d, i) => d.date.getHours() === 0 || i === data.length - 1); focus.append("path") .datum(band) .attr("class", "area") .attr("clip-path", "url(#clip)") .style("mix-blend-mode", "multiply") .attr("fill", color("comfort")) .attr("opacity", 0.6) .attr("d", area1); focus.append("path") .datum(band) .attr("class", "area_expanded") .attr("clip-path", "url(#clip)") .style("mix-blend-mode", "multiply") .attr("fill", color("expanded")) .attr("stroke", color("comfort")) .attr("opacity", 0.6) .attr("d", area1_expanded); focus.append("path") .datum(band) .attr("class", "area_oa") .attr("clip-path", "url(#clip)") .style("mix-blend-mode", "multiply") .attr("fill", color("oa")) .attr("opacity", 0.6) .attr("d", area1_oa); context.append("path") .datum(band) .attr("class", "area") .style("mix-blend-mode", "multiply") .attr("fill", color("expanded")) .attr("opacity", 0.6) .attr("d", area2); context.append("path") .datum(band) .attr("class", "area_oa") .style("mix-blend-mode", "multiply") .attr("fill", color("oa")) .attr("opacity", 0.6) .attr("d", area2_oa); focus.append("path") .datum(data) .attr("class", "line") .attr("fill", "none") .attr("stroke", color("perceived"))//"#abb1b2" .attr("stroke-opacity", .8) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("clip-path", "url(#clip)") .style("mix-blend-mode", "multiply") .attr("d", line1); context.append("path") .datum(data) .attr("class", "line") .attr("fill", "none") .attr("stroke", color("perceived"))//"#abb1b2" .attr("stroke-opacity", .8) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("clip-path", "url(#clip)") .style("mix-blend-mode", "multiply") .attr("d", line2); focus.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0, ${chart.height})`) .call(xAxis1); focus.append("g") .attr("class", "axis axis--y") .call(yAxis); context.append("g") .attr("class", "axis axis--x") .attr("transform", `translate(0, ${config.context})`) .call(xAxis2); // svg.append("g") // .call(legend); // //this is the value of the previous svg node // if (!this) { // context.append("g") // .attr("class", "brush") // .call(brush) // .call(brush.move, [0, 390]); // } // else { // let range = d3.select(this).property("value"); // context.append("g") // .attr("class", "brush") // .call(brush) // .call(brush.move, range); // } context.append("g") .attr("class", "brush") .call(brush) .call(brush.move, [0, 360]) function transition(option) { line1 = d3.line() .x(d => x1(d.date)) .y(d => y1(d[option])) .curve(d3.curveBasis); line2 = d3.line() .x(d => x2(d.date)) .y(d => y2(d[option])) .curve(d3.curveBasis); focus.selectAll(".line").transition() .duration(500) .attr("d", line1); context.selectAll(".line").transition() .duration(500) .attr("d", line2); if (option === "opt_3") { area1_expanded = d3.area() .x(d => x1(d.date)) .curve(d3.curveStep) .y0(d => y1(d.trm * 0.33 + 22.3)) .y1(d => y1(d.trm * 0.33 + 16.8)); area2 = d3.area() .x(d => x2(d.date)) .curve(d3.curveStep) .y0(d => y2(d.trm * 0.33 + 22.3)) .y1(d => y2(d.trm * 0.33 + 16.8)); } else { area1_expanded = d3.area() .x(d => x1(d.date)) .curve(d3.curveStep) .y0(d => y1(d.trm * 0.33 + 20.8)) .y1(d => y1(d.trm * 0.33 + 16.8)); area2 = d3.area() .x(d => x2(d.date)) .curve(d3.curveStep) .y0(d => y2(d.trm * 0.33 + 20.8)) .y1(d => y2(d.trm * 0.33 + 16.8)); } focus.selectAll(".area_expanded").transition() .duration(500) .attr("d", area1_expanded); context.selectAll(".area").transition() .duration(500) .attr("d", area2); } function update(option) { transition(option); } return Object.assign(svg.node(), {update}); }35:T853,legend = { const svg = d3.select(DOM.svg(960, 125)); const margin = {top: 40, right: 25, bottom: 20, left: 40, middle: 50}; const legend = svg => { const g = svg .attr("font-family", "Open Sans") .attr("font-size", 10) .attr("text-anchor", "end") .attr("transform", `translate(${margin.left},${margin.top})`); g.append("rect") .attr("x", 100) .attr("y", 5) .attr("width", 14) .attr("height", 50) .attr("opacity", 0.6) .style("mix-blend-mode", "multiply") .attr("fill", color("expanded")); g.append("rect") .attr("x", 100) .attr("y", 20) .attr("width", 14) .attr("height", 20) .attr("opacity", 0.6) .style("mix-blend-mode", "multiply") .attr("fill", color("comfort")); g.append("rect") .attr("x", 120) .attr("y", 5) .attr("width", 8) .attr("height", 50) .attr("opacity", 0.6) .attr("fill", color("oa")); g.append("line") .attr("x1", 128) .attr("x2", 100) .attr("y1", 70) .attr("y2",70) .attr("stroke", color("perceived")) .attr("stroke-width", 2); // g.append("path") // .attr("stroke", "#2891B2") // .attr("stroke-width", 2) // .attr("fill", "none") // .attr("d", d3.line() // .x(d => d.x) // .y(d => d.y) // .curve(d3.curveBasis)([{x: -100, y: 60}, {x: -96, y: 56}, {x: -92, y: 64}, {x: -86, y: 60}])); g.selectAll(".labelsLeft") .data(["Upper Comfort Limit", "Comfort Zone", "Lower Comfort Limit", "Inside Operative Temp."]) .join("text") .attr("fill","#333333") .attr("text-anchor", "end") .attr("x", 90) .attr("y", (d, i) => i * 20 + 10) .attr("dy", "0.35em") .text(String); g.selectAll(".labelsRight") .data(["OA High", "OA Low"]) .join("text") .attr("fill","#333333") .attr("text-anchor", "start") .attr("x", 135) .attr("y", (d, i) => i * 40 + 10) .attr("dy", "0.35em") .text(String); } svg.append("g") .call(legend); return svg.node(); }36:T4f4,data = { let data = (await d3.csv(`https://elementa.nyc/projects/pmx/data/toronto_nv.csv?version=${Math.floor(Math.random() * 1000)}`, d3.autoType)) const formatDate = d => d3.timeParse("%m %d %H %Y")(`${d.month.toString().padStart(2, "0")} ${d.day.toString().padStart(2, "0")} ${(d.hour - 1).toString().padStart(2, "0")} 2018`); data = data.map(d => ({...d, date: formatDate(d), oa: d.db})); const a = 0.8; const ref = 14; let chunks = _.chunk(data, 24); chunks.unshift(...chunks.slice(-ref)); const avg = d => _.sumBy(d, "oa")/d.length; chunks = chunks.map((d, i, arr) => { let trm = avg(d); let oa_high = _.maxBy(d, "oa").oa; let oa_low = _.minBy(d, "oa").oa; //https://lowcarboncomfort.com/about_this_site.php if (i >= ref) trm = _.sum(_.range(0, ref).map(p => (1 - a) * Math.pow(a, p) * avg(arr[(i - 1) - p]) )); let limit_low = trm * 0.33 + 16.8; let limit_high = trm * 0.33 + 20.8; return { oa_low: oa_low, oa_high: oa_high, limit_low: limit_low, limit_high: limit_high, trm: trm }; }); chunks = chunks.slice(ref).map(d => Array(24).fill(d)).flat(); data = data.map((d, i) => ({...d, ...chunks[i]})); return data; } 37:[] 2e:{"title":"PMX Natural Ventilation Analysis","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"md`

\n### Appendix\nThe chart below shows the hourly temperature profile for the selected natural ventilation strategy. Unlike the above chart, which shows a rollup of the number of discomfort hours for each month, this visualization shows how the operative temperature fluctuates throughout the day, based on outside air temperature and solar gains. This visualization also shows how the comfort band changes according to the conditioning strategy. With natural ventilation, the comfort band is more relaxed and changes throughout the year according to outside air temperature. By adding fans, which increase air movement in the space, the upper limit of the comfort range increases by 1-2°C, thereby reducing the number of discomfort hours in the summer months.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"color = d => {\n \n const lookup = {\n \"comfort\": d3.interpolateRdPu(0.2),\n // \"expanded\": \"#8acfb9\",\n \"expanded\": d3.interpolateRdPu(0.1),\n \"oa\": \"#b3cfdd\",\n \"perceived\": d3.interpolateRdPu(0.8)\n }\n \n return lookup[d];\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"series.update(zone)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require('d3@5.9.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"html`