30:T1ea2,parcoords = { const lookup = { orientation: { "0": "North", "90": "East", "180": "South", "270": "West" }, verticalShading: { "0": "No Fin", "1": "Fin", "2": "+45 Fin", "3": "-45 Fin", "4": "CCF" }, horizontalShading: { "1": "No Overhang", "2": "2ft Overhang", "3": "6ft Overhang" } } const config = { height: 500, width: 960, margin: {top: 60, right: 10, bottom: 10, left: 40}, format: { "Orientation": { numTicks: [0, 90, 180, 270], ticks: d => lookup["orientation"]["".concat(d)], selection: [250, 325]}, "Vertical Shading": { ticks: d => lookup["verticalShading"]["".concat(d)], selection: [275, 350]}, "Horizontal Shading": { ticks: d => lookup["horizontalShading"]["".concat(d)], selection: [175, 250]}, "SHGC": { ticks: d3.format(".2f")}, "WPC": { newName: `${unitSelection.unit === "IP" ? "Solar Load (BTU/hr/ft²)": "Solar Load (W/m²)"}`, ticks: d3.format(".2f"), anchor: "end"}, "TPC": { newName: `${unitSelection.unit === "IP" ? "Total Peak Cool (BTU/hr/ft²)": "Total Peak Cool (W/m²)"}`, ticks: d3.format(".2f"), anchor: "end"} }, 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 = parametric_data.columns.filter(d => d != "dataset"); const data = parametric_data.map(d => { let dd = d; for (const key in config.format) { if ("convert" in config.format[key]) { dd = {...dd, [key]: config.format[key].convert(dd[key])}; } } return dd; }); const y = new Map( Array.from( dimensions, key => { const reverse = Object.keys(config.format).filter(d => "reverse" in config.format[d]); let range = reverse.indexOf(key) >= 0 ? [0, config.chartHeight] : [config.chartHeight, 0]; return [key, d3.scaleLinear(d3.extent(data, d => d[key]), range)] } ) ); const x = d3.scalePoint().range([0, config.chartWidth]).domain(dimensions).padding(0); const c = svg.append("g").attr("transform", `translate(${config.margin.left}, ${config.margin.top})`); // 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; switch(d.Orientation) { case 0: ctx.strokeStyle = d3.rgb(163, 192, 142).toString(); break; case 90: ctx.strokeStyle = d3.rgb(25, 163, 221).toString(); break; case 180: ctx.strokeStyle = d3.rgb(78, 71, 157).toString(); break; default: ctx.strokeStyle = d3.rgb(216, 111, 65).toString(); } 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: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; }32:T4ad,html``33:[{"id":"8dcae5ef778e277a0fcc5f000160be67896f620aa57561f4b79d91125ed78cd9593ee35fee5a588ef1a605c7eef5c0f13defc47406fb32699ccc8d18bd1f7d9d","href":"https://static.observableusercontent.com/files/8dcae5ef778e277a0fcc5f000160be67896f620aa57561f4b79d91125ed78cd9593ee35fee5a588ef1a605c7eef5c0f13defc47406fb32699ccc8d18bd1f7d9d","name":"parametricresults.csv","type":"text/csv","lastModified":1759599092802.377,"size":2404}] 2e:{"title":"GMT2","cells":[{"id":0,"value":"md`# GMT2\nThis parallel coordinate plot showcases the different solar gain reducing measures tested on each of the four orientations in this office building, and its impact on the perimeter cooling peak load.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","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":"parametric_data = {\n let parametrics = (await FileAttachment(\"parametricresults.csv\").csv({typed:true}));\n \n const columns = parametrics.columns;\n const data = parametrics.map(d => ({...d, WPH: eui(d.WPH), WPC: eui(d.WPC), TPH: eui(d.TPH), TPC: eui(d.TPC)}));\n data.columns = columns;\n \n return data;\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":"$31","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":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}