31:T1d3a,parcoords = { const config = { height: 500, width: 960, margin: {top: 60, right: 65, bottom: 10, left: 60}, format: { "Window U-Value": { selection: [180, 255], anchor: "middle", ticks: d3.format(".2f")}, "Window SHGC": { // ticks: d => lookup["verticalShading"]["".concat(d)], numTicks: [0.15, 0.25, 0.35, 0.45, 0.55], ticks: d3.format(".2f")}, "Horizontal Shading": { // ticks: d => lookup["horizontalShading"]["".concat(d)], selection: [175, 250]}, "L2-Cooling Btu/sf": { newName: `L2 Cooling ${unitSelection.unit === "IP" ? "(BTU/ft²)": "(W/m²)"}`, ticks: d3.format(".1f"), anchor: "middle"}, "L2-Heating Btu/sf": { newName: `L2 Heating ${unitSelection.unit === "IP" ? "(BTU/ft²)": "(W/m²)"}`, ticks: d3.format(".1f"), anchor: "middle"}, "Cooling EUI": { newName: `Cooling EUI ${unitSelection.unit === "IP" ? "(kBTU/ft²-yr)": "(W/m²-yr)"}`, ticks: d3.format(".1f"), anchor: "middle"}, "Heating EUI": { newName: `Heating EUI ${unitSelection.unit === "IP" ? "(kBTU/ft²-yr)": "(W/m²-yr)"}`, ticks: d3.format(".1f"), anchor: "middle"} }, 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); 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 = mapped.columns.filter(d => d != "dataset"); const data = mapped.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range)] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); // 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(); if (Object.keys(config.format).filter(key => "numTicks" in config.format[key]).indexOf(d) >= 0) { if (config.format[d].numTicks.length) { axis.tickValues(config.format[d].numTicks); } else { axis.ticks(config.format[d].numTicks); } } else { axis.ticks(5); } let ya = axis.scale(y.get(d)); if (Object.keys(config.format).filter(d => "ticks" in config.format[d]).indexOf(d) >= 0) { ya = axis.scale(y.get(d)).tickFormat(config.format[d].ticks); } d3.select(this).call(ya); }) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("opacity", 0.6) .attr("stroke", "white")) .call(g => g.selectAll("text") .attr("x", -12)); g.append("text") .attr("class", "label") .style("text-anchor", d => { let anchor = "middle"; if (Object.keys(config.format).filter(d => "anchor" in config.format[d]).indexOf(d) >= 0) { anchor = config.format[d].anchor; } return anchor }) .attr("y", -25) .attr("font-size", 12) .style("font-family", "Open Sans") .html(d => { let name = d; if (Object.keys(config.format).filter(d => "newName" in config.format[d]).indexOf(d) >= 0) { name = config.format[d].newName; } return name; }); const render = renderQueue(draw).rate(50); ctx.clearRect(0,0,config.width,config.height); render(data); g.append("g") .attr("class", "parbrush") .each(function(d) { y.get(d).brush = d3.brushY().extent([[-10,-1], [10,config.chartHeight + 1]]) .on("brush", brush) .on("end", brush); d3.select(this) .call(y.get(d).brush); if (Object.keys(config.format).filter(d => "selection" in config.format[d]).indexOf(d) >= 0) { d3.select(this).call(y.get(d).brush.move, config.format[d].selection); } }) .selectAll("rect") .attr("x", -10) .attr("width", 20); function brush() { render.invalidate(); const actives = []; svg.selectAll(".parbrush") .filter(function(d) { y.get(d).brushSelectionValue = d3.brushSelection(this); return d3.brushSelection(this); }) .each(function(d) { actives.push({ dimension: d, extent: d3.brushSelection(this).map(y.get(d).invert) }); }); const selected = data.filter(function(d) { return actives.every(function(active) { let result = active.extent[1] <= d[active.dimension] && d[active.dimension] <= active.extent[0]; const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); if (reverse.indexOf(active.dimension) >= 0) { result = active.extent[1] >= d[active.dimension] && d[active.dimension] >= active.extent[0]; } return result; }); }); ctx.clearRect(0,0,config.width,config.height); render(selected); } function draw(d) { ctx.lineWidth = 1.5; ctx.strokeStyle = color(d["Cooling EUI"]); 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: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; }33:T4ad,html``34:[{"id":"fde198cbd3bb998519596ca29874452d86bf8f57c3defefbdf33a7a48fdafc3c34b7cc571a68183a0aaa78ed966b7fe972bfdb29eea2cc9c8a8f7201bd7d5c11","href":"https://static.observableusercontent.com/files/fde198cbd3bb998519596ca29874452d86bf8f57c3defefbdf33a7a48fdafc3c34b7cc571a68183a0aaa78ed966b7fe972bfdb29eea2cc9c8a8f7201bd7d5c11","name":"parametricresults.csv","type":"text/csv","lastModified":1767389966194.204,"size":11274}] 2f:{"title":"North Boulder Library","cells":[{"id":0,"value":"md`# North Boulder Library\nThis parallel coordinate plot showcases the different combinations of window U-value and solar heat gain coefficient (SHGC) and their effect on cooling and heating loads in the North Boulder Library.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {group, groupSum, groupCount} from \"@mbostock/group\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@5.9.2');","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"csv = {\n let csv = (await FileAttachment(\"parametricresults.csv\").csv({ typed: true })); \n \n return csv;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"mapped = {\n \n const values = [\"L2-Cooling Btu/sf\", \"L2-Heating Btu/sf\", \"Cooling EUI\", \"Heating EUI\"];\n \n const convert = (d, l, factor) => {\n let obj = {};\n for (let key of l) {\n obj[key] = d[key] * factor;\n }\n return obj;\n }\n \n const columns = csv.columns;\n let mapped = csv;\n \n \n if (unitSelection.unit === \"SI\") {\n mapped = csv.map(d => ({...d, ...convert(d, values, (10.76 / 3.412))}));\n }\n \n mapped.columns = columns;\n \n return mapped;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"eui = d => (unitSelection.unit === \"IP\") ? _.round(d, 2) : _.round(d / 3.412 * 10.76, 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof unitSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"_ = require('lodash@4.17.11/lodash.js').catch(() => window._)","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"color = {\n const domain = d3.extent(mapped.map(d => d[\"Cooling EUI\"])).map((d, i) => i === 0 ? d * .8: d * 1)\n \n const scale = d3.scaleSequential(d3.interpolateRdYlBu).domain(domain);\n return scale;\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}