31:Te82,characterization = { const config = { height: 520, width: 960, units: unitSelection.unit, label: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}` }; const svg = d3.select(DOM.svg(config.width, config.height)); const g = svg.append("g").attr("transform", "translate(40, 0)") const graph = sankey(sankey_data); const nodeWidth = graph.nodes[0].x1 - graph.nodes[0].x0; console.log(graph.nodes); const node = g.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${eui(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) .text(d => d.name); node.attr('cursor', 'move') .call(d3.drag() .on('start', dragStart) .on('drag', dragMove) .on('end', dragEnd)); const link = g.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(graph.links) .enter().append("g") .style("mix-blend-mode", "multiply"); //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${eui(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(); }32:T1fe2,sensitivies = { //general setup const config = { width: 960, cell: {height: 250, padding:40}, margin: {top: 60, right:10, bottom: 30, left: 35}, cols: 3, format: { "Window U": { newName: "Window U", convert: d => 1/d}, // ticks: d => d3.format(".1f")(1/d)}, "Infiltration (CFM/FT2)": { newName: "Infiltration (CFM/ft²)"}, "WWR": { newName: "Window-Wall Ratio", ticks: d => d3.format(",.0%")(d/100)}, "Shade Depth": { newName: `Shade Depth (${unitSelection.unit === "IP" ? "ft" : "m"})`, convert: d => (unitSelection.unit === "IP" ? d : d * 0.3048)}}, units: unitSelection.unit } //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 / 3) + 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 => eui(p.EUI))).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 % 3) * (config.cell.width + config.cell.padding) + config.margin.left; const v = _.floor(i / 3) * (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 formate 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()); } } //put the y axis label in the top left corner of the first row/col. if (i === 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(config.units === "IP" ? "EUI kBTU/ft²/yr": "EUI kWh/m²/yr"); } //general pattern for generating the interpolation line const line = d3.line() .x(dd => x.get(d.variable)(dd[d.variable])) .y(dd => y(eui(dd.EUI))) .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 % 3 != 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); //these are the cross hair lines const lineX = d3.select(this) .append("line") .attr("class", "target"); const lineY = d3.select(this) .append("line") .attr("class", "target"); 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(eui(dd.EUI)); }) .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(eui(dd.EUI)); }) .attr("r",3) .attr("stroke", "#1f77b4") .style("fill", dd => dd.Baseline === "yes" ? "#1f77b4": "#b4d6e8" ) .append("title") .text(dd => `EUI ${_.round(eui(dd.EUI), 2)}`); const dot = d3.select(this).append("circle") .attr("class", "dot") .attr("r",3) .attr("stroke", "#1f77b4") .style("fill", "#b4d6e8") .style("display", "none"); d3.select(this).append("rect") .attr("class", "tickOverlay") .attr("width", config.cell.width) .attr("height", config.cell.height) .attr("fill", "none") .attr("pointer-events", "all") .attr("stroke", "none") .on("mouseover", function() { lineX.style("display", null); lineY.style("display", null); dot.style("display", null);}) .on("mouseout", function() { lineX.style("display", "none"); lineY.style("display", "none"); dot.style("display", "none");}) .on("mousemove", mousemove); const path = d3.select(this).select(".interpolation"); function mousemove() { var m = d3.mouse(this), p = closestPoint(path.node(), m); // lineX.attr("x1", p[0]).attr("y1", p[1]).attr("x2", m[0]).attr("y2", m[1]); // circle.attr("cx", p[0]).attr("cy", p[1]); dot.attr("cx", p[0]).attr("cy", p[1]); lineX .attr("x1", 0) .attr("y1", p[1]) .attr("x2", config.cell.width) .attr("y2", p[1]); lineY .attr("x1", p[0]) .attr("y1", 0) .attr("x2", p[0]) .attr("y2", config.cell.height); } }); return svg.node(); }33:T1bcc,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 35}, format: { "Wall R": { ticks: d3.format(".1f"), selection: [0, 75]}, "Roof R": { reverse: true, ticks: d3.format(".1f"), selection: [0, 75], anchor: "start"}, "Window U": { selection: [0, 75]}, "Shade Depth": { reverse: true, selection: [0, 75], newName: `Shade Depth (${unitSelection.unit === "IP" ? "ft" : "m"})`, convert: d => (unitSelection.unit === "IP" ? d : d * 0.3048)}, "Infiltration (CFM/FT2)": { newName: "Infiltration (CFM/ft²)", selection: [0,75], ticks: d3.format(".3f")}, "WWR": { newName: "Win-Wall Ratio", ticks: d => d3.format(",.0%")(d/100), selection: [431-75, 431]}, "EUI": { newName: `${unitSelection.unit === "IP" ? "kBTU/ft²/yr": "kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f")} }, 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]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range)] } ) ); 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})`); const axis = d3.axisLeft().ticks(5); 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) { 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; }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:T61b,function closestPoint(pathNode, point) { const pathLength = pathNode.getTotalLength(); let precision = 8; let best = null; let bestLength = null; let bestDistance = Infinity; // linear scan for coarse approximation for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) { if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) { best = scan; bestLength = scanLength; bestDistance = scanDistance; } } // binary search for precise estimate precision /= 2; while (precision > 0.5) { let before = null; let after = null; let beforeLength = null; let afterLength = null; let beforeDistance = null; let afterDistance = null; if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) { best = before; bestLength = beforeLength; bestDistance = beforeDistance; } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) { best = after; bestLength = afterLength; bestDistance = afterDistance; } else { precision /= 2; } } best = [best.x, best.y]; best.distance = Math.sqrt(bestDistance); return best; function distance2(p) { const dx = p.x - point[0]; const dy = p.y - point[1]; return dx * dx + dy * dy; } }36:T491,color = { const lookup = { "Electricity":"#d6d231", "Natural Gas": "#e55725", "DHW":"#d52928", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Pumps":"#adadad", "Fans":"#bfbfbf", "Heat Rejection": "#bfbfbf", "Equipment":"#dddddd", "Passive Solar Gains":"#a17eb9", "Internal Gains": "#a17eb9", "Conduction Losses": "#a17eb9", "Internal Equipment Gains":"#a17eb9", "Lighting Gains":"#a17eb9", "Occupant Gains":"#a17eb9", "Passive Infiltration":"#a17eb9", "Window Losses":"#a17eb9", "Wall Losses":"#a17eb9", "OA Cooling":"#6aadd6", "Equipment Gains":"#6aadd6", "Lighting":"#6aadd6", "Solar":"#6aadd6", "Roof Conduction Gains": "#6aadd6", "Infiltration Gains": "#6aadd6", "Occupants":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Windows":"#f7aa6e", "Reheat": "#f7aa6e", "Ground": "#f7aa6e", "Heating Load":"#e55725", "Heating System":"#e55725", "Roof": "#f7aa6e", "Walls": "#f7aa6e", "Infiltration": "#f7aa6e", "OA Heating":"#f7aa6e", }; return name => lookup[name]; }37:T4ad,html``38:[] 2f:{"title":"ASHRAE Headquarters","cells":[{"id":0,"value":"md`# ASHRAE Headquarters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`\n
\n#### Energy Use Characterization \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"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 .iterations(2);\n return sankey;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof figure1 = html`Figure 1: Baseline Energy Characterization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"DOM.download(() => serialize(characterization), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"md`\n
\n#### Sensitivity Analysis Preliminary Findings\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"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([\"Baseline\", \"Recommended\"])\n .enter().append(\"g\")\n .attr(\"transform\", (d, i) => `translate(${40}, ${i*24 + 10})`);\n\n g.append(\"circle\")\n .attr(\"r\", d => d === \"Baseline\" ? 3: 10)\n .attr(\"stroke\", d => d === \"Baseline\" ? \"#1f77b4\": \"none\")\n .style(\"fill\", d => d === \"Baseline\" ? \"#1f77b4\": \"#b4d6e8\" )\n .style(\"opacity\", d => d === \"Baseline\" ? 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}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"viewof figure2 = html`Figure 2: Sensitivity Analysis.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"md`\n
\n#### Parametric Analysis\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"parLegend = {\n \n const svg = d3.select(DOM.svg(960, 40))\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 + 10})`);\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":531,"value":"viewof figure3 = html`Figure 3: 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":4,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12.1\"); \n\n// d3 = require('https://bundle.run/d3@5.9.2','https://bundle.run/d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"import {group} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d * 3.412 * 0.092903, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"sankey_data = {\n let sankey_data = (await d3.csv(`https://www.elementa.nyc/projects/archive/ashrae/data/sankey_data_updated.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":237,"value":"parametric_data = {\n let parametrics = (await d3.csv(`https://www.elementa.nyc/projects/archive/ashrae/data/interpolated_data.csv`, d3.autoType)); \n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, EUI: eui(d.EUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"sensitivity_data = {\n //add a random version number to avoid caching\n let data = (await d3.csv(`https://www.elementa.nyc/projects/archive/ashrae/data/SHR_parametric_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));\n \n //group the data by independent variable\n const grouped = group(data, d => d.Variable);\n \n data = Array.from(grouped, d => ({variable: d[0], data: d[1].sort((a, b) => a[d[0]] - b[d[0]])}));\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"width = 920","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}