30:T22f7,parcoords = { const ventilation = d => { const map = new Map([ [1, "None"], [2, "DCV + ERV"], ]) return map.get(d); } const airside = d => { const map = new Map([ [1, "All-Air VAV"], [2, "DOAS + ACB"], [3, "DOAS + PCB"], ]) return map.get(d); } const hvacPlant = d => { const map = new Map([ [1, "Chiller/Boiler"], [2, "HRC + ASHP"], ]) return map.get(d); } const grid = d => { const map = new Map([ [1, "Current"], [2, "Clean"], ]) return map.get(d); } const config = { height: 500, width: 960, margin: {top: 60, right: 40, bottom: 10, left: 40}, format: { "Opaque U": { ticks: d3.format(".2f"), numTicks: [0.03, 0.06, 0.09, 0.15], // selection: [0, 75] }, "Glazing U": { ticks: d3.format(".2f"), numTicks: [0.23, 0.26, 0.31, 0.40], // selection: [0, 75] }, "Glazing SHGC": { ticks: d3.format(".2f"), numTicks: [0.18, 0.22, 0.26, 0.36], // selection: [0, 75] }, "Glazing Ratio": { ticks: d3.format(".0%"), numTicks: [0.35, 0.45, 0.55, 0.65], // selection: [0, 75] }, "Overhang PF": { ticks: d3.format(".1f"), numTicks: 3, reverse: d => (d), // selection: [0, 75] }, "Ventilation EEM": { ticks: d => ventilation(d), numTicks: 1, reverse: d => (d), // selection: [0, 75] }, "Airside System": { ticks: d => airside(d), numTicks: 2, reverse: d => (d), // selection: [0, 75] }, "HVAC Plant": { ticks: d => hvacPlant(d), numTicks: 1, reverse: d => (d), // selection: [0, 75] }, "Grid": { ticks: d => grid(d), numTicks: 1, reverse: d => (d), // selection: [0, 75] }, "GHCI": { ticks: d3.format(".0f"), numTicks: 4, } }, 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") // .filter(d => d != "Ventilation EEM").filter(d => d != "Airside System").filter(d => d != "HVAC Plant").filter(d => d != "Grid") ; const data = parametric_data.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range).nice()] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); ctx.globalCompositeOperation = 'darken'; const g = c.selectAll(".dimension") .data(dimensions) .enter().append("g") .attr("class", "dimension") .classed("nonactive", false) .attr("transform", d => `translate(${x(d)})`); g.append("g") .attr("class", "paraxis") .each(function(d) { const axis = d3.axisLeft(); let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { ya.tickValues(config.format[d].numTicks) } else { ya.ticks(config.format[d].numTicks); } } else { ya.ticks(5); } if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya.tickFormat(config.format[d].ticks); } // let ya = axis.scale(y.get(d)); // if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { // ya = axis.scale(y.get(d)).tickFormat(config.format[d].ticks); // } d3.select(this).call(ya); }) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("stroke", "white")) .call(g => g.selectAll("text") .attr("x", -12)); g.append("text") .attr("class", "label") .style("text-anchor", d => { let anchor = "middle"; if (Object.keys(config.format).filter(d => "anchor" in config.format[d]).indexOf(d) >= 0) { anchor = config.format[d].anchor; } return anchor }) .attr("y", -25) .attr("font-size", 12) .style("font-family", "Open Sans") .html(d => { let name = d; if (Object.keys(config.format).filter(d => "newName" in config.format[d]).indexOf(d) >= 0) { name = config.format[d].newName; } return name; }); const render = renderQueue(draw).rate(50); 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; }); }); 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; }31:T4ad,html``32:T467,color = { const lookup = { "Electricity":"#d6d231", "DHW":"#d52928", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans":"#bfbfbf", "Equipment":"#dddddd", "Data Center":"#dddddd", "Other Gains":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Internal Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Infiltration Losses":"#a17eb9", "Windows":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#f7aa6e", "Roof":"#f7aa6e", "Below Grade":"#f7aa6e", "Infiltration":"#f7aa6e", "Envelope Losses":"#f7aa6e", "OA Heating":"#f7aa6e", "Reheat":"#f7aa6e", "Equipment Gains":"#6aadd6", "Lighting":"#6aadd6", "Solar Gains":"#6aadd6", "OA Cooling":"#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", "Pumps & Aux":"#adadad", "Exterior Usage": "#808080", "Floor on Grade":"#f7aa6e", "Natural Gas": "#e55725" }; return name => lookup[name]; }33: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; }34: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; }35:[{"id":"c007c69f076db74af7670ab8e073a212f13171659df11a5263e27915f2cbfc17ee208ea3c5ec76b7356092cd3b918b0ba4e796816a629bca87f37ee5067abdde","href":"https://static.observableusercontent.com/files/c007c69f076db74af7670ab8e073a212f13171659df11a5263e27915f2cbfc17ee208ea3c5ec76b7356092cd3b918b0ba4e796816a629bca87f37ee5067abdde","name":"interpolated_data.csv","type":"text/csv","lastModified":1767226480289.035,"size":425184}] 2e:{"title":"LL97 Facade Study","cells":[{"id":0,"value":"md`# LL97 Facade Study`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof date = html`August 25, 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`\n

\n### Parametric Analysis\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"$30","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":1962,"value":"viewof figure1 = html`Figure 1: Effect of different combinations of parameter properties on GHGI. Move or expand the selection box for each attribute.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"SI\") {\n return `${d} kWh/m²/yr`;\n }\n else {\n return `${_.round(d * 3.412 / 10.76, 0)} kBtu/ft²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"formatEUI_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kBtu/ft²/yr`;\n }\n else {\n return `${_.round(d / 3.412 * 10.76, 2)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"formatGHG_IP_SI = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} gCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} gCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"formatGHG_IP_SI_KG = d => {\n if (unitSelection.unit === \"IP\") {\n return `${d} kgCO₂e/ft²/yr`;\n }\n else {\n return `${_.round(d * 7.273362, 2)} kgCO₂e/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"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 let sankey_data = (await d3.csv(`https://www.elementa.nyc/projects/mip/data/sankey_data_nodata.csv?version=${Math.floor(Math.random() * 100)}`)).map(({source, target, value}) => ({source: source, target: target, value: +value}));\n \n //http://elementa.nyc/yale/berekely/data/yale_sankey.csv\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":31,"value":"sankey = {\n const config = {\n height: 500,\n width: 920,\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":475,"value":"stackedColor = {\n const lookup = {\n \"Wet Labs\":\"#d6d231\",\n \"Dry Labs\":\"#E6E483\",\n \"Data Center\":\"#d52928\",\n \"Vivarium\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Exterior Usage\": \"#ABA827\",\n \"PV Offset\": \"#eaeaea\"\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d, 4) : _.round(d, 4);","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"ghg = d => (unitSelection.unit === \"IP\") ? _.round(d * 7.273362, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"cost = d => (unitSelection.unit === \"IP\") ? _.round(d, 2) : _.round(d * 10.76, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await d3.csv(`https://www.elementa.nyc/projects/mip/data/parametric_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType)); \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(\"interpolated_data.csv\").csv({ typed: true })); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, GHGI: eui(d.GHGI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"d3format = require('d3-format@1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"import {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}