2f:T268b,parcoords_10 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_10.columns.filter(d => d != "dataset"); const data = parametric_data_10.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(100); 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; console.log(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; }30:T268b,parcoords_11 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_11.columns.filter(d => d != "dataset"); const data = parametric_data_11.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(100); 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; console.log(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:T268b,parcoords_12 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_12.columns.filter(d => d != "dataset"); const data = parametric_data_12.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(100); 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; console.log(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; }32:T268b,parcoords_14 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_14.columns.filter(d => d != "dataset"); const data = parametric_data_14.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(100); 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; console.log(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; }33:T268b,parcoords_15 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_15.columns.filter(d => d != "dataset"); const data = parametric_data_15.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(100); 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; console.log(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:T268b,parcoords_16 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_16.columns.filter(d => d != "dataset"); const data = parametric_data_16.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(100); 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; console.log(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; }35:T268b,parcoords_17 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_17.columns.filter(d => d != "dataset"); const data = parametric_data_17.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(100); 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; console.log(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; }36:T268b,parcoords_18 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_18.columns.filter(d => d != "dataset"); const data = parametric_data_18.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(100); 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; console.log(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; }37:T268b,parcoords_19 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_19.columns.filter(d => d != "dataset"); const data = parametric_data_19.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(100); 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; console.log(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; }38:T268b,parcoords_20 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_20.columns.filter(d => d != "dataset"); const data = parametric_data_20.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(100); 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; console.log(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; }39:T268b,parcoords_21 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_21.columns.filter(d => d != "dataset"); const data = parametric_data_21.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(100); 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; console.log(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; }3a:T268b,parcoords_22 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_22.columns.filter(d => d != "dataset"); const data = parametric_data_22.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(100); 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; console.log(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; }3b:T268b,parcoords_23 = { const lookup = { Recirc: { "0": "No", "1": "Yes" }, Economizer: { "0": "No", "1": "Yes" }, Setpoints: { "0": "Strict Setpoints", "1": "Partial Setbacks", "2": "Relaxed Setpoints" } } const config = { height: 500, width: 1150, margin: { top: 60, right: 5, bottom: 10, left: 40 }, format: { "UA": { newName: "Facade UA", ticks: d3.format(".2f"), numTicks: 6, // selection: [180, 250] }, "Solar Gains": { newName: "SHGC x WWR", ticks: d3.format(".2f"), numTicks: 6, // selection: [350, 450] }, "OA": { newName: "OA cfm/sf", numTicks: 4 // selection: [400, 450] }, "EPD x EFLH": { ticks: d3.format(".2f"), numTicks: 4 // selection: [400, 450] }, "Infiltration": { ticks: d3.format(".2f"), numTicks: [0.05,0.08,0.1,0.15], anchor: "middle" }, "Economizer": { ticks: d => lookup["Economizer"]["".concat(d)], numTicks: 1, anchor: "middle" }, "Recirc": { newName: "Recirc AHU?", ticks: d => lookup["Recirc"]["".concat(d)], numTicks: 1 // selection: [50, 150] }, "Setpoints": { anchor: "middle", reverse: true, ticks: d => lookup["Setpoints"]["".concat(d)], numTicks: 1}, // selection: [340, 360]}, "ElecEUI": { newName: `${unitSelection.unit === "IP" ? "Elec kBTU/ft²/yr": "Elec kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, // selection: [0, 435]}, "GasEUI": { newName: `${unitSelection.unit === "IP" ? "Gas kBTU/ft²/yr": "Gas kWh/m²/yr"}`, anchor: "end", ticks: d3.format(".1f"), numTicks: 10}, //selection: [0, 435]}, "ID": { anchor: "end", numTicks: 20, reverse: true}, //selection: [0, 435]}, }, 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_23.columns.filter(d => d != "dataset"); const data = parametric_data_23.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(100); 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; console.log(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; }3c:Ta97,color = { const lookup = { "Heat Pump Energy": "#d52928", "Chiller Energy": "#1dbfcf", "Domestic Hot Water":"#d52928", "Electricity [GJ]":"#d6d231", "Electricity [kWh]":"#d6d231", "Heating": "#d52928", "heating": "#d52928", "Cooling": "#1dbfcf", "Interior Equipment":"#dddddd", "Interior Lighting": "#d6d231", "Exterior Lighting": "#d6d231", "Electricity":"#d6d231", "Natural Gas": "#e55725", "Natural Gas [kWh]": "#e55725", "DHW":"#d52928", "Exterior Lights": "#808080", "Humidification": "#808080", "Heating Energy":"#d52928", "Cooling Energy":"#1dbfcf", "Lights":"#d6d231", "Fans + Pumps":"#bfbfbf", "Equipment":"#6aadd6", "Ambulance Charging":"#dddddd", "Pumps":"#dddddd", "Fans":"#dddddd", "Water Systems":"#dddddd", "Other Gains":"#a17eb9", "Equipment Gain":"#a17eb9", "Thermal Mass":"#a17eb9", "Passive Solar Gains":"#a17eb9", "Solar Heat Gains":"#6aadd6", "Passive Solar Gain":"#a17eb9", "Lights Gains":"#a17eb9", "Lighting Gain":"#a17eb9", "Internal Equipment Gains":"#a17eb9", "electric_equip Gain":"#a17eb9", "Occupant Gains":"#a17eb9", "Occupants Gain":"#a17eb9", "Roof Gain":"#a17eb9", "Walls Gain":"#a17eb9", "Floor Gain":"#a17eb9", "Windows Gain":"#a17eb9", "Infiltration Gain":"#a17eb9", "Infiltration Losses":"#a17eb9", "Infiltration Loss":"#a17eb9", "Roof Losses":"#a17eb9", "Windows Losses":"#a17eb9", "Walls Losses":"#a17eb9", "Window Losses":"#a17eb9", "Floor Losses": "#a17eb9", "Internal Gains":"#a17eb9", "OA Economizer":"#a17eb9", "Walls":"#6aadd6", "Roofs":"#6aadd6", "Floor on Grade":"#f7aa6e", "Infiltration":"#6aadd6", "Windows":"#6aadd6", "OA Heating":"#f7aa6e", "mech_vent Heat Losses":"#f7aa6e", "mech_vent Losses":"#a17eb9", "nat_vent Losses":"#a17eb9", "Ceiling Heat Losses":"#f7aa6e", "Floor Heat Losses":"#f7aa6e", "Infiltration Heat Losses":"#f7aa6e", "Heating Heat Losses":"#f7aa6e", "Roof Heat Losses":"#f7aa6e", "Walls Heat Losses":"#f7aa6e", "Windows Heat Losses":"#f7aa6e", "Reheat":"#f7aa6e", "Equipment Gains":"#6aadd6", "OA Cooling":"#6aadd6", "Dehumidification":"#6aadd6", "Conduction":"#6aadd6", "Lighting":"#6aadd6", "Solar":"#6aadd6", "Solar Gain":"#6aadd6", "electric_equip":"#6aadd6", "Solar":"#6aadd6", "Occupants":"#6aadd6", "Passive Solar":"#6aadd6", "Roof":"#6aadd6", "Cooling Load":"#1f77b4", "Cooling System":"#1f77b4", "Heating Load":"#e55725", "Heating System":"#e55725", }; return name => lookup[name]; }3d: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; }3e: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; }3f:T40b,html``40:[{"id":"f623c25d111754988f1e064cb753e1e5c69a910218015d46ba90803b702593481e4932d652a7e4a99b844c03ea952d3925a86376c1fd23f7b92b7f6dd510fb08","href":"https://static.observableusercontent.com/files/f623c25d111754988f1e064cb753e1e5c69a910218015d46ba90803b702593481e4932d652a7e4a99b844c03ea952d3925a86376c1fd23f7b92b7f6dd510fb08","name":"MPK-11 Parametrics.csv","type":"text/csv","lastModified":1702504875912.154,"size":8564},{"id":"53d80cafc53338f977e349612f75785928a999fb2f4bcdb181e3f2221924afa4d7eb475ed747c6c5cc755c1bd9e2845fa00b45878e743e32d549db5fce897add","href":"https://static.observableusercontent.com/files/53d80cafc53338f977e349612f75785928a999fb2f4bcdb181e3f2221924afa4d7eb475ed747c6c5cc755c1bd9e2845fa00b45878e743e32d549db5fce897add","name":"MPK-10 Parametrics@1.csv","type":"text/csv","lastModified":1702504910100.938,"size":9068},{"id":"4c379459e09156ca1ac6be8ff97ed19ca96bf27e493abbfac0af5b6f7450bcf8007e37d77dde63908125ad37c5e308a2926b98bcf93442ec0157177568db0987","href":"https://static.observableusercontent.com/files/4c379459e09156ca1ac6be8ff97ed19ca96bf27e493abbfac0af5b6f7450bcf8007e37d77dde63908125ad37c5e308a2926b98bcf93442ec0157177568db0987","name":"MPK-12 Parametrics@1.csv","type":"text/csv","lastModified":1702504918269.697,"size":7900},{"id":"be5e85194be646e9bdb6e8eea8c00efee0647c7525411f5fc356f2077c4a97ed620fb042be1475c848b497898710fbe50652d1c5592c6ae8cc30e94e86b4913a","href":"https://static.observableusercontent.com/files/be5e85194be646e9bdb6e8eea8c00efee0647c7525411f5fc356f2077c4a97ed620fb042be1475c848b497898710fbe50652d1c5592c6ae8cc30e94e86b4913a","name":"MPK-14 Parametrics@1.csv","type":"text/csv","lastModified":1702504926895.861,"size":8599},{"id":"04495f642530a1f19106068816561a6fff281420c984ae74bafa0150a2a45d3cca9ad4871461f337d898864d78346d4107c5b826e185f50f52c78826f3333ae0","href":"https://static.observableusercontent.com/files/04495f642530a1f19106068816561a6fff281420c984ae74bafa0150a2a45d3cca9ad4871461f337d898864d78346d4107c5b826e185f50f52c78826f3333ae0","name":"MPK-15 Parametrics@1.csv","type":"text/csv","lastModified":1702504937084.484,"size":8337},{"id":"3f2d012365fbf398956184d5cedbbacdeecf37a010345d6f2adfe3eb23eba656af9050f62358cbf96e3ee804577c63bf5ba46d8c90038515e27af034e7a74cbe","href":"https://static.observableusercontent.com/files/3f2d012365fbf398956184d5cedbbacdeecf37a010345d6f2adfe3eb23eba656af9050f62358cbf96e3ee804577c63bf5ba46d8c90038515e27af034e7a74cbe","name":"MPK-16 Parametrics@1.csv","type":"text/csv","lastModified":1702504944586.656,"size":8398},{"id":"7ff58d0cb549eccce8523de742e0a94be28d5f8e79c8e9511e1caddbc76f4f930264b8b22d0d7507277133d5b4d9bafcddd1327c50bd81719396d02ac843b21b","href":"https://static.observableusercontent.com/files/7ff58d0cb549eccce8523de742e0a94be28d5f8e79c8e9511e1caddbc76f4f930264b8b22d0d7507277133d5b4d9bafcddd1327c50bd81719396d02ac843b21b","name":"MPK-17 Parametrics@1.csv","type":"text/csv","lastModified":1702504951144.957,"size":9388},{"id":"da5dba7607da4a906b41c309f53c7785bac76963867165d943690b1a265582ecbc0a61c93a4e553dcf070a16318270f6e715313b6caadd187b34301b48b816b8","href":"https://static.observableusercontent.com/files/da5dba7607da4a906b41c309f53c7785bac76963867165d943690b1a265582ecbc0a61c93a4e553dcf070a16318270f6e715313b6caadd187b34301b48b816b8","name":"MPK-18 Parametrics@1.csv","type":"text/csv","lastModified":1702504960493.588,"size":8173},{"id":"7ed20da06fa1978f61358353ef8fdff766c037540ecd0fd88534db8d7573fc21cf7134922ead873429beba972c53a5ec17e0d50dde3d67aed3211bcc831cf18b","href":"https://static.observableusercontent.com/files/7ed20da06fa1978f61358353ef8fdff766c037540ecd0fd88534db8d7573fc21cf7134922ead873429beba972c53a5ec17e0d50dde3d67aed3211bcc831cf18b","name":"MPK-19 Parametrics@1.csv","type":"text/csv","lastModified":1702504968706.043,"size":7710},{"id":"343b7ca82cb57486255d0b25662beb15ef433d6d98dae23943a3b8075d6f3b73459000d387f1641b3887ca8cdcc985a2b6d98a82cf67dd6d67035411ebf8ae20","href":"https://static.observableusercontent.com/files/343b7ca82cb57486255d0b25662beb15ef433d6d98dae23943a3b8075d6f3b73459000d387f1641b3887ca8cdcc985a2b6d98a82cf67dd6d67035411ebf8ae20","name":"MPK-20 Parametrics@1.csv","type":"text/csv","lastModified":1702504977000.985,"size":8062},{"id":"5c287b630809c5d19f43dfb996ad1ae661dab5d6101afa13685812b1a7f4a1e0064ab9f5d4739e0f056be973d1ae3d62b95affe490d9e40733f7e4a335032e6a","href":"https://static.observableusercontent.com/files/5c287b630809c5d19f43dfb996ad1ae661dab5d6101afa13685812b1a7f4a1e0064ab9f5d4739e0f056be973d1ae3d62b95affe490d9e40733f7e4a335032e6a","name":"MPK-21 Parametrics@1.csv","type":"text/csv","lastModified":1702504985059.264,"size":7742},{"id":"a431573fb3ff51b21b7b18e39544ab1b1629d706fd26eec68b30cb14f63a715783d9329caad24447cb0b069ee194114385e4189dc7eb1ec8e306ab71a561c284","href":"https://static.observableusercontent.com/files/a431573fb3ff51b21b7b18e39544ab1b1629d706fd26eec68b30cb14f63a715783d9329caad24447cb0b069ee194114385e4189dc7eb1ec8e306ab71a561c284","name":"MPK-22 Parametrics@1.csv","type":"text/csv","lastModified":1702504991105.128,"size":8672},{"id":"c6807a7a4c1ccd856fdde91b82560f24e54e7edf692d3c07fd5069f9608189ea9a96e5a8190d06a935310e77d0e8c977769a6e4da862a3b68d9bda3bfd5b40a4","href":"https://static.observableusercontent.com/files/c6807a7a4c1ccd856fdde91b82560f24e54e7edf692d3c07fd5069f9608189ea9a96e5a8190d06a935310e77d0e8c977769a6e4da862a3b68d9bda3bfd5b40a4","name":"MPK-23 Parametrics@1.csv","type":"text/csv","lastModified":1702504997593.373,"size":8620},{"id":"8aee444c0ac279784a9d13f5bb0322ca3497f1a7b36fe87d8b445876257ee7c2e44a76060d9ecec51ef8d3ef6ff041650706b46628ef6b4f97fb1ad14a0df7eb","href":"https://static.observableusercontent.com/files/8aee444c0ac279784a9d13f5bb0322ca3497f1a7b36fe87d8b445876257ee7c2e44a76060d9ecec51ef8d3ef6ff041650706b46628ef6b4f97fb1ad14a0df7eb","name":"MPK-11 Parametrics@1.csv","type":"text/csv","lastModified":1703182678006.876,"size":8223}] 2d:{"title":"Meta Portfolio Assessment v2","cells":[{"id":0,"value":"md`# Meta Portfolio Assessment v2`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4074,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4205,"value":"md`\n
\n### Feature Selection - MPK-10`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4231,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":4202,"value":"md`\n
\n### Feature Selection - MPK-11`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4228,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4199,"value":"md`\n
\n### Feature Selection - MPK-12`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4225,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4196,"value":"md`\n
\n### Feature Selection - MPK-14`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4221,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4193,"value":"md`\n
\n### Feature Selection - MPK-15`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4219,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4190,"value":"md`\n
\n### Feature Selection - MPK-16`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4216,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4187,"value":"md`\n
\n### Feature Selection - MPK-17`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4214,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":4184,"value":"md`\n
\n### Feature Selection - MPK-18`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4211,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4181,"value":"md`\n
\n### Feature Selection - MPK-19`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4208,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":4137,"value":"md`\n
\n### Feature Selection - MPK-20`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4140,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":4254,"value":"md`\n
\n### Feature Selection - MPK-21`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4257,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":3006,"value":"md`\n
\n### Feature Selection - MPK-22`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`\n
\n### Feature Selection - MPK-23`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4114,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof figure4 = html`Figure 4: 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":2695,"value":"stacked_data = (await d3.csv(`https://www.elementa.nyc/projects/tor-ems/data/stacked_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType));","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"pvColor = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\", \"#d7ddda\"])\n .domain(projectKeys)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1910,"value":"pvColorUpdate = d3.scaleOrdinal()\n .range([\"#1776b6\", \"#6fccd8\"])\n .domain(projectKeysUpdate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"projectKeys = [\"gridToProject\", \"renewableToProject\", \"batteryToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"projectKeysUpdate = [\"gridToProject\", \"renewableToProject\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"pvDataUpdate = {\n let data = await d3.csv(`https://www.elementa.nyc/projects/tor-ems/data/renewables_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType);\n\n const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]\n const times = [];\n \n const timeParse = (m, d, h) => {\n return d3.timeParse(\"%m %d %H\")(`${m.toString().padStart(2, \"0\")} ${d.toString().padStart(2, \"0\")} ${h.toString().padStart(2, \"0\")}`)\n }\n \n for (const m in _.range(12)) {\n for (const d in _.range(months[m])) {\n for (const h in _.range(24)) {\n times.push({month: +m + 1, day: +d + 1, hour: +h, date: timeParse(+m + 1, +d + 1, +h)});\n }\n }\n }\n \n return data.map((d, i, arr) => ({...d, ...times[i]}));\n\n } ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"renewables_data_update = {\n let renewables = (await d3.csv(`https://www.elementa.nyc/projects/tor-ems/data/renewables_data.csv?version=${Math.floor(Math.random() * 100)}`, d3.autoType)); \n \n // const columns = renewables.columns;\n // const data = renewables;\n // data.columns = columns;\n\n return renewables;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash@4.17.15/lodash.js').catch(() => window[\"_\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"formatEUI_SI_IP = d => {\n if (unitSelection.unit === \"IP\") {\n return `${_.round(d, 1)} kBtu/ft²/yr`;\n }\n else if (unitSelection.unit === \"GJ\"){\n return `${_.round(d * 0.001055, 1)} GJ/m²/yr`;\n }\n else {\n return `${_.round(d / 3.412 / 0.092903, 1)} kWh/m²/yr`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"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":495,"value":"stackedColor = {\n const lookup = {\n \"PV Budget\":\"#708238\",\n \"Lights\":\"#d6d231\",\n \"Plug Loads\":\"#dddddd\",\n \"Heating\":\"#d52928\",\n \"DHW\":\"#e55725\",\n \"Cooling\":\"#1dbfcf\",\n \"Pumps\":\"#adadad\",\n \"Fans\":\"#bfbfbf\",\n \"Proposed System\":\"#EEEEEE\",\n \"Ambulance Charging\": \"#808080\",\n \"TEDI\":\"#d52928\",\n \"GHGI\":\"#9CBD53\",\n \"PV Offset\":\"#9CBD53\",\n };\n\n return name => lookup[name];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"sankey = {\n const config = {\n height: 500,\n width: 960,\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":36,"value":"eui = d => (unitSelection.unit === \"SI\") ? _.round(d * 3.412 * 0.092903, 2) : (unitSelection.unit === \"GJ\") ? _.round(d * 0.0036, 2) : _.round(d, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":4172,"value":"parametric_data_10 = {\n let parametrics = (await FileAttachment(\"MPK-10 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4169,"value":"parametric_data_11 = {\n let parametrics = (await FileAttachment(\"MPK-11 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4166,"value":"parametric_data_12 = {\n let parametrics = (await FileAttachment(\"MPK-12 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4163,"value":"parametric_data_14 = {\n let parametrics = (await FileAttachment(\"MPK-14 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4160,"value":"parametric_data_15 = {\n let parametrics = (await FileAttachment(\"MPK-15 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4157,"value":"parametric_data_16 = {\n let parametrics = (await FileAttachment(\"MPK-16 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4154,"value":"parametric_data_17 = {\n let parametrics = (await FileAttachment(\"MPK-17 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4151,"value":"parametric_data_18 = {\n let parametrics = (await FileAttachment(\"MPK-18 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4148,"value":"parametric_data_19 = {\n let parametrics = (await FileAttachment(\"MPK-19 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4145,"value":"parametric_data_20 = {\n let parametrics = (await FileAttachment(\"MPK-20 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4251,"value":"parametric_data_21 = {\n let parametrics = (await FileAttachment(\"MPK-21 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"parametric_data_22 = {\n let parametrics = (await FileAttachment(\"MPK-22 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4125,"value":"parametric_data_23 = {\n let parametrics = (await FileAttachment(\"MPK-23 Parametrics@1.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, TEDI: ip_to(d.TEDI), GasEUI: ip_to(d.GasEUI), ElecEUI: ip_to(d.ElecEUI)}));\n data.columns = columns;\n \n return data;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"d3 = require('d3@5.9.2','d3-sankey@0.12.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":2086,"value":"d3format = d3.format","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3581,"value":"ip_to = d => (unitSelection.unit === \"SI\") ? d / 3.412 / 0.092903 : d;","pinned":true,"hidden":false,"mode":"ojs"},{"id":3583,"value":"si_to = d => (unitSelection.unit === \"IP\") ? d * 3.412 * 0.092903 : d;","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"}