31:T7c4,md`# PMX Amenity Space Analysis
### Overview The purpose of this study is to assess various space configuration and envelope strategies for the PMX amenity spaces. Each strategy provides a different level of thermal comfort control, allowing for spaces that are either mechanically conditioned or passively tempered. In general, passively tempered spaces are only appropriate for south-facing orientations where relatively high solar gains can maintain comfortable conditions throughout most of the year. Amenity spaces on the north side of the building, on the other hand, should be fully conditioned. For east and west orientations, some combination of fully conditioned and passively tempered spaces may be possible. The chart below shows the number of cold discomfort hours (hours when the operative space temperature is below a comfortable level) for each orientation, zone, and envelope strategy throughout the year. The diagrams represent the location of the amenity space in the PMX tower and the different thermal zones created by each envelope strategy. **Strategy 1:** The entire amenity space is fully conditioned with a 40% window-wall ratio. The exterior façade consists of R-24.4 walls and windows with an assembly U-Value of 0.25 Btu/hr-°F. **Strategy 2:** The amenity space is divided into 2 thermal zones – a passively conditioned (tempered) outer zone and a mechanically conditioned inner zone. Both the inner and outer facades have a 60-70% window- wall ratio with double pane glazing (assembly U-Value of 0.5 Btu/hr-°F and 0.6 SHGC). The outer-most façade has R-4 walls while the inner-most façade has R-24.4 walls. **Strategy 3:** Both zones of the amenity space are passively conditioned (tempered). Both the inner and outer facades have a 60-70% window-wall ratio with R-4 walls and double pane glazing. Both facades can fully open (i.e. Nana Wall or similar operation), allowing for air transfer between the two thermal zones.
`32:T1032,viewof zone = { let parent = document.createElement("div"); parent.value = "l6_z2"; let svg = d3.select(DOM.svg(960, 280)); let cover = (await d3.xml(`https://www.elementa.nyc/projects/pmx/data/zones2.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("#l1_x5F_shadow, #l2_x5F_shadow, #l3_x5F_shadow, #l4_x5F_shadow, #l5_x5F_shadow, #l6_x5F_shadow, #l7_x5F_shadow, #l8_x5F_shadow, #z1_x5F_shadow, #z2_x5F_shadow, #z3_x5F_shadow, #z4_x5F_shadow, #z5_x5F_shadow").classed("hidden", true).classed("clicked", false); svg.selectAll("#l1, #l2, #l3, #l4, #l5, #l6, #l7, #l8") .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("#l1, #l2, #l3, #l4, #l5, #l6, #l7, #l8").classed("clicked", false).classed("hidden", true); d3.select(this).classed("hidden", false).classed("clicked", true); // let id = d3.select(this).attr("id"); // d3.select(`#${id}_x5F_shadow`).classed("hidden", false).classed("clicked", true); parent.value = d3.select(this).attr("id") + parent.value.slice(2, 5); parent.dispatchEvent(new CustomEvent("input")); }); svg.selectAll("#z1, #z2, #z3, #z4, #z5") .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("#z1, #z2, #z3, #z4, #z5").classed("clicked", false).classed("hidden", true); d3.select(this).classed("hidden", false).classed("clicked", true); // let id = d3.select(this).attr("id"); // d3.select(`#${id}_x5F_shadow`).classed("hidden", false).classed("clicked", true); parent.value = parent.value.slice(0, 3) + d3.select(this).attr("id"); parent.dispatchEvent(new CustomEvent("input")); }); svg.selectAll("#l6, #z2").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; }33:T1316,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 dHours = data.filter(d => (d.hour > timeRange[0]) && (d.hour <= timeRange[1]) && (d[zone] < d.limit_low)).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(`Cold 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.interpolatePuBu(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_low).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(); }34: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.interpolatePuBu(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.interpolatePuBu(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.interpolatePuBu(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.interpolatePuBu(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, [6, 22].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(); } 35:T2db5,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); let 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.22 + 24)) .y1(d => y1(d.trm * 0.22 + 15)); let area2 = d3.area() .x(d => x2(d.date)) .curve(d3.curveStep) .y0(d => y2(d.trm * 0.22 + 24)) .y1(d => y2(d.trm * 0.22 + 15)); 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.l6_z2)) .curve(d3.curveBasis); let line2 = d3.line() .x(d => x2(d.date)) .y(d => y2(d.l6_z2)) .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.slice(3, 5) === "z1" || option.slice(3, 5) === "z3") { area1 = d3.area() .x(d => x1(d.date)) .curve(d3.curveStep) .y0(d => y1(24)) .y1(d => y1(20)); area1_expanded = d3.area() .x(d => x1(d.date)) .curve(d3.curveStep) .y0(d => y1(26)) .y1(d => y1(19)); area2 = d3.area() .x(d => x2(d.date)) .curve(d3.curveStep) .y0(d => y2(26)) .y1(d => y2(20)); } else { 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)); area1_expanded = d3.area() .x(d => x1(d.date)) .curve(d3.curveStep) .y0(d => y1(d.trm * 0.22 + 24)) .y1(d => y1(d.trm * 0.22 + 15)); area2 = d3.area() .x(d => x2(d.date)) .curve(d3.curveStep) .y0(d => y2(d.trm * 0.22 + 24)) .y1(d => y2(d.trm * 0.22 + 15)); } focus.selectAll(".area").transition() .duration(500) .attr("d", area1); 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}); }36: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", 55) .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", 25) .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", 55) .attr("opacity", 0.6) .attr("fill", color("oa")); g.append("line") .attr("x1", 128) .attr("x2", 100) .attr("y1", 75) .attr("y2",75) .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 * 22 + 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 * 44 + 10) .attr("dy", "0.35em") .text(String); } svg.append("g") .call(legend); return svg.node(); }37:T4ed,data = { let data = (await d3.csv(`https://elementa.nyc/projects/pmx/data/toronto_db_v2.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.22 + 15; let limit_high = trm * 0.22 + 24 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; }38:[] 2f:{"title":"PMX Amenity Space Analysis","cells":[{"id":596,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"md`

\n### Appendix\nThe chart below shows the hourly temperature profile for the selected zone. 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. In fully conditioned zones, the comfort band is constant throughout the entire year (with minor setpoint changes), whereas in the passively conditioned zones the comfort band is more relaxed and varies according to outside air temperature.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@5.9.2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {nest} from \"@mbostock/nested-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"nested = nest(data, d => d.month, d => d.hour);","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"grid_color = (d, s) => {\n\n const count = d.filter(hour => hour[s] < hour.limit_low).length / d.length;\n \n //const bins = [0, 6, 12, 18, 24];\n\n// let bin = 0;\n// for (let el of bins) {\n// if (count >= el) bin = el;\n// }\n \n// const scale = d3.scaleOrdinal()\n// .domain(bins)\n// .range([\"#eaf5f4\", \"#a3d6ef\", \"#4fbdec\", \"#2e82b1\", \"#005688\"]);\n \n// return scale(bin);\n \n if (d[0].hour > timeRange[0] && d[0].hour <= timeRange[1]) {\n return d3.interpolatePuBu(count);\n }\n else {\n return \"#f4f4f4\";\n }\n\n\n \n \n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"html`