27:null 28:["$","title",null,{"children":"3530 Kings College Place - VTX | hower_teaching | Observable"}] 2d:T9255,MoshDrawing = { const width = 1700,//pixel size of the map height = 1250; const svg = d3.create("svg") .attr("viewBox", [-800, -300, width, height]); var dx = 50 var dy = 400 var c = svg.selectAll('circle') var p = svg.selectAll('polyline') var t = svg.selectAll('text') const chartFO = svg.append("foreignObject") .attr("x", -798) .attr("y", 315) .attr("width", 462) .attr("height", 1100); const chartDiv = document.createElement("div"); chartFO.node().appendChild(chartDiv); chartDiv.innerHTML = "" chartDiv.appendChild(treemapChart) const chartF6 = svg.append("foreignObject") .attr("x", -337) .attr("y", 315) .attr("width", 462) .attr("height", 1100); const chartDiv6 = document.createElement("div"); chartF6.node().appendChild(chartDiv6); chartDiv6.innerHTML = "" chartDiv6.appendChild(treemapChart2) staticText('Normative Total: 1101151',dx-90,dy-40,'century gothic','25px','rgb(50,50,50)','600','middle','none','staticdetail','none') staticText('Proposed Total: 149139',dx-540,dy-40,'century gothic','25px','rgb(50,50,50)','600','middle','none','staticdetail','none') //const moshDrawing2 = html`

//${viewof normativeView} ////

//` var ddx = 150 var ddy = -250 var barx = -675 var bary = 60 function writeHelper(matview) { staticText(matview[0].Material,ddx+410, ddy+30,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].CO2,ddx+410,ddy+90,'century gothic','50px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].Distance,ddx+410,ddy+135,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].Usage,ddx+410,ddy+170,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].Mass,ddx+410,ddy+205,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].EOL,ddx+410,ddy+240,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].Material2,ddx+625, ddy+30,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].CO22,ddx+625,ddy+90,'century gothic','50px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].Distance2,ddx+625,ddy+135,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].Usage2,ddx+625,ddy+170,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].Mass2,ddx+625,ddy+205,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') staticText(matview[0].EOL2,ddx+625,ddy+240,'century gothic','25px','rgb(50,50,50)','300','middle','tempText') var wrap = svg.selectAll("text.tempText") .each(function(d, i) { wrap_text(d3.select(this), 150) }) } function writeDetails(proposed, normative, mode){ if (mode == 'Proposed') { // staticText(normative[0].Material,-530,270,'century gothic','25px','rgb(50,50,50)', '300')//for material info staticText(proposed[0].Material,-785, -18,'century gothic','25px','rgb(50,50,50)', '300')//for radio writeHelper(proposed) } else { // staticText(proposed[0].Material,-510,270,'century gothic','25px','rgb(50,50,50)', '300')//for material info staticText(normative[0].Material,-785, -18,'century gothic','25px','rgb(50,50,50)', '300')//for radio writeHelper(normative) } var wrap = svg.selectAll("text.tempText") .each(function(d, i) { wrap_text(d3.select(this), 150) }) } staticText('Material' + ' ' + '(' + mode + ') ',dx-835,dy-450,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none')//Material radio title staticText(curView, dx-835,dy-525,'century gothic','25px','rgb(50,50,50)','300','start','none','staticdetail','none') // radio for proposed materials if(curView=='Interior' && mode=='Proposed'){ polylineDetails(interiorMosh) staticText('(1 unit)',dx-150,dy-350,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticText('Proposed',ddx+410,ddy-10,'century gothic','25px','rgb(50,50,50)','600','middle','none','staticdetail','none') staticText('Normative',ddx+625,ddy-10,'century gothic','25px','rgb(50,50,50)','600','middle','none','staticdetail','none') if(proposedView=='Rammed Earth'){ svg.selectAll('line.barchart').remove() svg.selectAll('rect.barchart').remove() svg.selectAll('text.material-label').remove() svg.selectAll('text.barchart').remove() svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(rammedearth) var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='RAMMED EARTH') var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='BRICK') writeDetails(proposed, normative, mode) staticText('Brick',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Rammed Earth',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 49100 }, { material: "Manufacture", value: 576000 }, { material: "Transportation", value: 9920 }, { material: "Disposal", value: 3480 }, { material: "Sourcing", value: 495 }, { material: "Manufacture", value: 812 }, { material: "Transportation", value: 17600 }, { material: "Disposal", value: 317 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if(proposedView=='Glulam'){ svg.selectAll('line.barchart').remove() svg.selectAll('rect.barchart').remove() svg.selectAll('text.material-label').remove() svg.selectAll('text.barchart').remove() svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(glulam) var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='GLULAM') var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='STEEL') writeDetails(proposed, normative, mode) staticText('Steel',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Glulam',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 36800 }, { material: "Manufacture", value: 81100 }, { material: "Transportation", value: 10600 }, { material: "Disposal", value: 697 }, { material: "Sourcing", value: 9720 }, { material: "Manufacture", value: 23400 }, { material: "Transportation", value: 1280 }, { material: "Disposal", value: 596 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if(proposedView=='Mycelium'){ svg.selectAll('line.barchart').remove() svg.selectAll('rect.barchart').remove() svg.selectAll('text.material-label').remove() svg.selectAll('text.barchart').remove() svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(mycelium) var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='MYCELIUM') var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='EPS') writeDetails(proposed, normative, mode) staticText('EPS',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Mycelium',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 13100 }, { material: "Manufacture", value: 34400 }, { material: "Transportation", value: 477 }, { material: "Disposal", value: 1030 }, { material: "Sourcing", value: 1070 }, { material: "Manufacture", value: 24200 }, { material: "Transportation", value: 458 }, { material: "Disposal", value: 679 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if(proposedView=='Glass'){ svg.selectAll('line.barchart').remove() svg.selectAll('rect.barchart').remove() svg.selectAll('text.material-label').remove() svg.selectAll('text.barchart').remove() svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(glass) var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='LOW-E GLASS') var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='LOW-E GLASS') writeDetails(proposed, normative, mode) staticText('Low-E Glass',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Low-E Glass',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 500 }, { material: "Manufacture", value: 344 }, { material: "Transportation", value: 1.63 }, { material: "Disposal", value: 13.7 }, { material: "Sourcing", value: 500 }, { material: "Manufacture", value: 344 }, { material: "Transportation", value: 1.63 }, { material: "Disposal", value: 13.7 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if(proposedView=='Timber'){ svg.selectAll('line.barchart').remove() svg.selectAll('rect.barchart').remove() svg.selectAll('text.material-label').remove() svg.selectAll('text.barchart').remove() svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(timber) var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='TIMBER') var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='TIMBER') writeDetails(proposed, normative, mode) staticText('Timber',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Timber',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 1810 }, { material: "Manufacture", value: 7460 }, { material: "Transportation", value: 396 }, { material: "Disposal", value: 93 }, { material: "Sourcing", value: 1810 }, { material: "Manufacture", value: 7460 }, { material: "Transportation", value: 396 }, { material: "Disposal", value: 93 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if(proposedView=='CLT'){ svg.selectAll('line.barchart').remove() svg.selectAll('rect.barchart').remove() svg.selectAll('text.material-label').remove() svg.selectAll('text.barchart').remove() svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(CLT) var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='CLT') var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='CONCRETE(CLT)') writeDetails(proposed, normative, mode) staticText('Concrete',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('CLT',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 23000 }, { material: "Manufacture", value: 197000 }, { material: "Transportation", value: 2730 }, { material: "Disposal", value: 5900 }, { material: "Sourcing", value: 5530 }, { material: "Manufacture", value: 17900 }, { material: "Transportation", value: 1280 }, { material: "Disposal", value: 1000 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if(proposedView=='MORF'){ svg.selectAll('line.barchart').remove() svg.selectAll('rect.barchart').remove() svg.selectAll('text.material-label').remove() svg.selectAll('text.barchart').remove() svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(morf) var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='MORF') var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='DRYWALL') writeDetails(proposed, normative, mode) staticText('Gypsum Board',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('MORF',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 8200 }, { material: "Manufacture", value: 24400 }, { material: "Transportation", value: 659 }, { material: "Disposal", value: 797 }, { material: "Sourcing", value: 4569 }, { material: "Manufacture", value: 5192 }, { material: "Transportation", value: 206 }, { material: "Disposal", value: 416 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if(proposedView=='Wood Ash Concrete'){ svg.selectAll('line.barchart').remove() svg.selectAll('rect.barchart').remove() svg.selectAll('text.material-label').remove() svg.selectAll('text.barchart').remove() svg.selectAll("polyline.interior").style('stroke-opacity','.1') // polylineDetails(woodash) var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='WOOD ASH CONCRETE') var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='CONCRETE(WA)') writeDetails(proposed, normative, mode) staticText('Wood Ash Concrete',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Concrete',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 1560 }, { material: "Manufacture", value: 19500 }, { material: "Transportation", value: 549 }, { material: "Disposal", value: 192 }, { material: "Sourcing", value: 4020 }, { material: "Manufacture", value: 34400 }, { material: "Transportation", value: 477 }, { material: "Disposal", value: 1030 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } } // radio for normative materials if(curView=='Interior' && mode=='Normative'){ polylineDetails(interiorMosh) staticText('(1 unit)',dx-150,dy-350,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticText('Normative',ddx+410,ddy-10,'century gothic','25px','rgb(50,50,50)','600','middle','none','staticdetail','none') staticText('Proposed',ddx+625,ddy-10,'century gothic','25px','rgb(50,50,50)','600','middle','none','staticdetail','none') if (normativeView == 'Steel') { svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(glulam) var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='STEEL') var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='GLULAM') writeDetails(proposed, normative, mode) staticText('Steel',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Glulam',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 36800 }, { material: "Manufacture", value: 81100 }, { material: "Transportation", value: 10600 }, { material: "Disposal", value: 697 }, { material: "Sourcing", value: 9720 }, { material: "Manufacture", value: 23400 }, { material: "Transportation", value: 1280 }, { material: "Disposal", value: 596 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if (normativeView == 'Concrete(CLT)') { svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(CLT) var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='CONCRETE(CLT)') var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='CLT') writeDetails(proposed, normative, mode) staticText('Concrete',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('CLT',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 23000 }, { material: "Manufacture", value: 197000 }, { material: "Transportation", value: 2730 }, { material: "Disposal", value: 5900 }, { material: "Sourcing", value: 5530 }, { material: "Manufacture", value: 17900 }, { material: "Transportation", value: 1280 }, { material: "Disposal", value: 1000 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if (normativeView == 'Concrete(WA)') { svg.selectAll("polyline.interior").style('stroke-opacity','.1') // polylineDetails(woodash) var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='CONCRETE(WA)') var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='WOOD ASH CONCRETE') writeDetails(proposed, normative, mode) staticText('Wood Ash Concrete',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Concrete',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 1560 }, { material: "Manufacture", value: 19500 }, { material: "Transportation", value: 549 }, { material: "Disposal", value: 192 }, { material: "Sourcing", value: 4020 }, { material: "Manufacture", value: 34400 }, { material: "Transportation", value: 477 }, { material: "Disposal", value: 1030 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if (normativeView == 'Glass') { svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(glass) var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='LOW-E GLASS') var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='LOW-E GLASS') writeDetails(proposed, normative, mode) staticText('Low-E Glass',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Low-E Glass',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 500 }, { material: "Manufacture", value: 344 }, { material: "Transportation", value: 1.63 }, { material: "Disposal", value: 13.7 }, { material: "Sourcing", value: 500 }, { material: "Manufacture", value: 344 }, { material: "Transportation", value: 1.63 }, { material: "Disposal", value: 13.7 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if (normativeView == 'EPS') { svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(mycelium) var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='EPS') var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='MYCELIUM') writeDetails(proposed, normative, mode) staticText('EPS',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Mycelium',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 13100 }, { material: "Manufacture", value: 34400 }, { material: "Transportation", value: 477 }, { material: "Disposal", value: 1030 }, { material: "Sourcing", value: 1070 }, { material: "Manufacture", value: 24200 }, { material: "Transportation", value: 458 }, { material: "Disposal", value: 679 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if (normativeView == 'Timber') { svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(timber) var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='TIMBER') var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='TIMBER') writeDetails(proposed, normative, mode) staticText('Timber',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Timber',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 1810 }, { material: "Manufacture", value: 7460 }, { material: "Transportation", value: 396 }, { material: "Disposal", value: 93 }, { material: "Sourcing", value: 1810 }, { material: "Manufacture", value: 7460 }, { material: "Transportation", value: 396 }, { material: "Disposal", value: 93 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } if (normativeView == 'Brick') { svg.selectAll("polyline.interior").style('stroke-opacity','.1') polylineDetails(rammedearth) var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='BRICK') var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='RAMMED EARTH') writeDetails(proposed, normative, mode) staticText('Brick',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Rammed Earth',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 49100 }, { material: "Manufacture", value: 576000 }, { material: "Transportation", value: 9920 }, { material: "Disposal", value: 3480 }, { material: "Sourcing", value: 495 }, { material: "Manufacture", value: 812 }, { material: "Transportation", value: 17600 }, { material: "Disposal", value: 317 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } } if(curView=='Chunk'){ polylineDetails(exteriorMosh) } if(curView=='Full'){ polylineDetails(full) polylineDetails(fullve) var normative = matDatanormmat.filter(matDatanormmat => matDatanormmat.Material =='FULL(NORMATIVE)') var proposed = matDatapropmat.filter(matDatapropmat => matDatapropmat.Material =='FULL(PROPOSED)') writeDetails(proposed, normative, mode) staticText('(Per Unit)',dx-150,dy-350,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticText('Normative',barx+175,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') staticText('Proposed',barx+570,bary+230,'century gothic','25px','rgb(50,50,50)','400','middle','none','staticdetail','none') addMultiBarChart( svg, barx, bary, [ { material: "Sourcing", value: 136530 }, { material: "Manufacture", value: 926604 }, { material: "Transportation", value: 25863 }, { material: "Disposal", value: 12156 }, { material: "Sourcing", value: 25254 }, { material: "Manufacture", value: 99808 }, { material: "Transportation", value: 21771 }, { material: "Disposal", value: 3307 }, ], { barWidth: 60, maxBarHeight: 180, colors: ["#FEB07C", "#FEB07C", "#FEB07C", "#FEB07C", "#AF97C7", "#AF97C7", "#AF97C7", "#AF97C7"], // custom colors gridCount: 5 } ); } //permanent material information //rect(x,y,w,h,rx,ry,stroke,sw,fill,fopac) // --- LAYOUT -------------------------------------Title svg.append("rect") .attr('x',dx-848) .attr('y',dy-690) .attr('width',924) .attr('height',80) .style('fill','none') .style('stroke','black') .style('stroke-width',1) .style('rx',6) .style('ry',6) staticText('3530 KINGS COLLEGE PL',dx-785,dy-625,'century gothic','70px','rgb(50,50,50)','550','start','none','staticdetail','none') //-----------------------Normative vs Proposed svg.append("rect") .attr('x',dx+85) .attr('y',dy-690) .attr('width',755) .attr('height',290) .style('fill','none') .style('stroke','black') .style('stroke-width', 1) .style('rx',6) .style('ry',6) staticText('Normative vs Proposed Material Carbon Analysis',dx-750,dy-350,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') //-----------------------View svg.append("rect") .attr('x',dx-848) .attr('y',dy-600) .attr('width',310) .attr('height',200) .style('fill','none') .style('stroke','black') .style('stroke-width', 1) .style('rx',6) .style('ry',6) staticText('View :',dx-835,dy-565,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') //-----------------------Radio svg.append("rect") .attr('x',dx-530) .attr('y',dy-600) .attr('width',605) .attr('height',200) .style('fill','none') .style('stroke','black') .style('stroke-width', 1) .style('rx',6) .style('ry',6) //-----------------------Material Information svg.append("rect") .attr('x',dx-848) .attr('y',dy-390) .attr('width',924) .attr('height',295) .style('fill','none') .style('stroke','black') .style('stroke-width', 1) .style('rx',6) .style('ry',6) // staticLine(ddx+525,ddy-25,ddx+525,ddy+235,1,'black','1px','2 0','none') staticText('Material :',ddx,ddy+30,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticLine(ddx,ddy+2,ddx+720,ddy+2,1,'black','1px','2 0','none') staticText('Embodied Carbon',ddx,ddy+65,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticLine(ddx,ddy+37,ddx+720,ddy+37,1,'black','1px','2 0','none') staticText('(CO2-eq)(lb/lb) :',ddx-2,ddy+100,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticLine(ddx,ddy+107,ddx+720,ddy+107,1,'black','1px','2 0','none') staticText('Distance Traveled (miles) :',ddx,ddy+135,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticLine(ddx,ddy+142,ddx+720,ddy+142,1,'black','1px','2 0','none') staticText('Usage :',ddx,ddy+170,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticLine(ddx,ddy+177,ddx+720,ddy+177,1,'black','1px','2 0','none') staticText('Mass (lbs) :',ddx,ddy+205,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') staticLine(ddx,ddy+212,ddx+720,ddy+212,1,'black','1px','2 0','none') staticText('End of Life :',ddx,ddy+240,'century gothic','25px','rgb(50,50,50)','600','start','none','staticdetail','none') //staticText('High Carbon Steel',dx-120,dy-310,'century gothic','20px','rgb(50,50,50)','600','start','none','staticdetail','none') //-----------------------Data Tree svg.append("rect") .attr('x',dx-848) .attr('y',dy-85) .attr('width',924) .attr('height',600) .style('fill','none') .style('stroke','black') .style('stroke-width', 1) .style('rx',6) .style('ry',6) // staticText("Total Embodied Carbon:",dx+10,dy+65,'Helvetica','10px','black','900','start','dashText') // staticText("Material Sourcing:",dx+10,dy+95,'Helvetica','10px','black','900','start','dashText') function polylineDetails(rl){ //these are static lines for details p.enter().append("polyline") //this line designates that we're making a polyline .data(rl) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class',function(d){return d.class}) .attr("points", function(d){return d.pts}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", function(d){return d.fill}) .style("fill-opacity", function(d){return d.fOpac}) .style('stroke-opacity',function(d){return d.sOpac}) .style("stroke-width", function(d){return d.sWght}) .style("stroke-dasharray", function(d){return d.dash}) .style("stroke", function(d){return d.stroke}) } function polylineClick(rl){ //these are static lines for clicking p.enter().append("polyline") //this line designates that we're making a polyline .data(rl) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class',function(d){return d.class}) .attr("points", function(d){return d.pts}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", function(d){return d.fill}) .style("fill-opacity", function(d){return d.fOpac}) .style('stroke-opacity',function(d){return d.sOpac}) .style("stroke-width", function(d){return d.sWght}) .style("stroke-dasharray", function(d){return d.dash}) .style("stroke", function(d){return d.stroke}) .on('mouseover',click) } function click(event,d){ d3.select(this).style('fill','cyan') d3.select(this).style('fill-opacity','.5') } //static text //staticText('Concrete','100','700','helvetica','14px','black','400','end','none') //staticText('Brick','100','500','helvetica','14px','black','400','end','none') //staticText('Eco Brick','100','300','helvetica','14px','black','400','end','none') //you text positions aren't matching the polgons, you need to rearrange the x and ys of the text // --- DEFINED FUNCTIONS function staticText(text,xVal,yVal,font,fSize,ffill,fWeight,fAnchor,textClass){ svg//this block makes text .append('text') .attr('class',textClass) .attr('x',xVal)//this function causes its contents to be applied to each circle .attr("y",yVal) .attr("font-size",fSize) .attr("font-family",font) .attr("font-weight",fWeight) .attr("text-anchor",fAnchor) .style('fill', ffill) .text(text) } //lines('110','700','200','700','magenta','1','8 3','none') //lines('200','700','300','650','magenta','1','8 3','none') function lines(x1p,y1p,x2p,y2p,lstroke,lwidth,ldash,lclass){ svg .append('line') .attr('class',lclass) .attr('x1',x1p) .attr('y1',y1p) .attr('x2',x2p) .attr('y2',y2p) .attr('stroke',lstroke) .attr('stroke-width',lwidth) .attr('stroke-dasharray',ldash) } function rect(x,y,w,h,rx,ry,stroke,sw,fill,fopac){ svg .append('rect') .attr('x',x) .attr('y',y) .attr('width',w) .attr('height',h) .attr('rx',rx) .style('stroke',stroke) .style('stroke-width',sw) .style('fill',fill) .style('fill-opacity',fopac) } function staticLine(x1l,y1l,x12,y12,sOpac,lstroke,lwidth,ldash,lclass){ svg.append("line") .attr('x1',x1l) .attr('y1',y1l) .attr('x2',x12) .attr('y2',y12) .attr('stroke-opacity', sOpac) .attr('stroke',lstroke) .attr('stroke-width',lwidth) .attr('stroke-dasharray',ldash) .attr('class',lclass) } //-------------BAR GRAPH function addMultiBarChart(svg, x, y, data, { barWidth = 50, barGap = 38, maxBarHeight = 300, colors = null, // array of colors; if null, defaults will be used labelFontSize = 15, gridColor = "black", gridThickness = 1, gridCount = 5 } = {}) { // Default colors if none provided if (!colors) { colors = d3.schemeTableau10; } // Compute scale const maxValue = d3.max(data, d => d.value); const scaleY = d3.scaleLinear() .domain([0, maxValue]) .range([0, maxBarHeight]); // Group for the chart const g = svg.append("g") .attr("transform", `translate(${x},${y})`); // --- GRIDLINES --- const gridGroup = g.append("g") .attr("opacity", 0.6); for (let i = 0; i <= gridCount; i++) { const value = (maxValue / gridCount) * i; const yPos = maxBarHeight - scaleY(value); gridGroup.append("line") .attr('class','barchart') .attr("x1", -20) .attr("x2", data.length * (barWidth + barGap)) .attr("y1", yPos) .attr("y2", yPos) .attr("stroke", gridColor) .attr("stroke-width", gridThickness); // Add grid value labels gridGroup.append("text") .attr('class','barchart') .attr("x", -30) .attr("y", yPos + 4) .attr("text-anchor", "end") .attr("font-size", 25) .text(Math.round(value)); } // --- BARS --- g.selectAll("rect") .data(data) .attr('class','barchart') .join("rect") .attr("x", (_, i) => i * (barWidth + barGap)) .attr("y", d => maxBarHeight - scaleY(d.value)) .attr("width", barWidth) .attr("height", d => scaleY(d.value)) .attr("fill", (d, i) => colors[i % colors.length]); // --- LABELS --- g.selectAll("text.material-label") .data(data) .join("text") .attr("class", "material-label") .attr("x", (_, i) => i * (barWidth + barGap) + barWidth / 2) .attr("y", maxBarHeight + labelFontSize + 5) .attr("text-anchor", "middle") .attr("font-size", labelFontSize) .text(d => d.material); } //-----Radio----- if(mode == 'Normative'){ const chartFO2 = svg.append("foreignObject") .attr("x", -180) .attr("y", -195) .attr("width", 250) .attr("height", 400); const chartDiv2 = document.createElement("div"); chartFO2.node().appendChild(chartDiv2); //chartDiv2.innerHTML = "" chartDiv2.appendChild(viewof normativeView)} if (mode == 'Proposed'){ const chartFO3 = svg.append("foreignObject") .attr("x", -180) .attr("y", -195) .attr("width", 250) .attr("height", 200); const chartDiv3 = document.createElement("div"); chartFO3.node().appendChild(chartDiv3); //chartDiv2.innerHTML = "" chartDiv3.appendChild(viewof proposedView)} const chartFO4 = svg.append("foreignObject") .attr("x", -450) .attr("y", -195) .attr("width", 200) .attr("height", 800); const chartDiv4 = document.createElement("div"); chartFO4.node().appendChild(chartDiv4); //chartDiv2.innerHTML = "" chartDiv4.appendChild(viewof curView) const chartFO5 = svg.append("foreignObject") .attr("x", -450) .attr("y", -110) .attr("width", 250) .attr("height", 800); const chartDiv5 = document.createElement("div"); chartFO5.node().appendChild(chartDiv5); //chartDiv2.innerHTML = "" chartDiv5.appendChild(viewof mode) return svg.node() } 2e:T6ed, function rhinoGraphics(t){ let linesData = [] for(let i = 0; i < t.length; i=i+3){ //pfill, pOpac, sOpac, sWght, stroke,pclass,dash var lFill='0',fOpac='0',sOpac='0',sWght='0',stroke='none',lClass='none',lDash='0' if(t[i+1]==1){ lFill = 'none' //fill fOpac = '1' //fill opacity sOpac = '1' //stroke opacity sWght = '5' //stroke weight stroke = 'black' //stroke color lClass = 'thinLines' //class lDash = '1 0' //dash pattern } if(t[i+1]==2){ lFill = 'none' //fill fOpac = '1' //fill opacity sOpac = '1' //stroke opacity sWght = '2' //stroke weight stroke = 'black' //stroke color lClass = 'thinLines' //class lDash = '1 0' //dash pattern } if(t[i+1]==3){ lFill = 'none' //fill fOpac = '1' //fill opacity sOpac = '1' //stroke opacity sWght = '.5' //stroke weight stroke = 'black' //stroke color lClass = 'thinLines' //class lDash = '1 0' //dash pattern } if(t[i+1]==4){ lFill = 'none' //fill fOpac = '1' //fill opacity sOpac = '1' //stroke opacity sWght = '.25' //stroke weight stroke = 'black' //stroke color lClass = 'thinLines' //class lDash = '1 0' //dash pattern } if(t[i+1]==9){ lFill = 'yellow' //fill fOpac = '0' //fill opacity sOpac = '1' //stroke opacity sWght = '.5' //stroke weight stroke = 'gray' //stroke color lClass = 'thinLines' //class lDash = '4 4' //dash pattern } linesData.push({pts:t[i][0],material:t[i+2][0],fill:lFill,fOpac:fOpac,sOpac:sOpac,sWght:sWght,stroke:stroke,class:t[i+2][0],dash:lDash}) } return linesData }2f:T5ed,function makeLines(t){ console.log(t.length) let linesData = [] for(let i = 0; i < t.length; i=i+3){ //pfill, pOpac, sOpac, sWght, stroke,pclass,dash var lFill='0',fOpac='0',sOpac='0',sWght='0',stroke='none',lClass='none',lDash='0' if(t[i+1]==1){ lFill = 'none' //fill fOpac = '1' //fill opacity sOpac = '1' //stroke opacity sWght = '5' //stroke weight stroke = 'black' //stroke color lClass = 'thinLines' //class lDash = '1 0' //dash pattern } if(t[i+1]==2){ lFill = 'none' //fill fOpac = '1' //fill opacity sOpac = '1' //stroke opacity sWght = '2' //stroke weight stroke = 'black' //stroke color lClass = 'thinLines' //class lDash = '1 0' //dash pattern } if(t[i+1]==3){ lFill = 'none' //fill fOpac = '1' //fill opacity sOpac = '1' //stroke opacity sWght = '.5' //stroke weight stroke = 'black' //stroke color lClass = 'thinLines' //class lDash = '1 0' //dash pattern } if(t[i+1]==4){ lFill = 'none' //fill fOpac = '1' //fill opacity sOpac = '1' //stroke opacity sWght = '.25' //stroke weight stroke = 'gray' //stroke color lClass = 'thinLines' //class lDash = '4 4' //dash pattern } linesData.push({pts:t[i][0],material:t[i+2][0],fill:lFill,fOpac:fOpac,sOpac:sOpac,sWght:sWght,stroke:stroke,class:lClass,dash:lDash}) } return linesData }30:T1972,// Copyright 2021-2023 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/treemap function Treemap(data, { // data is either tabular (array of objects) or hierarchy (nested objects) path, // as an alternative to id and parentId, returns an array identifier, imputing internal nodes id = Array.isArray(data) ? d => d.id : null, // if tabular data, given a d in data, returns a unique identifier (string) parentId = Array.isArray(data) ? d => d.parentId : null, // if tabular data, given a node d, returns its parent’s identifier children, // if hierarchical data, given a d in data, returns its children value, // given a node d, returns a quantitative value (for area encoding; null for count) sort = (a, b) => d3.descending(a.value, b.value), // how to sort nodes prior to layout label, // given a leaf node d, returns the name to display on the rectangle group, // given a leaf node d, returns a categorical value (for color encoding) title, // given a leaf node d, returns its hover text link, // given a leaf node d, its link (if any) linkTarget = "_blank", // the target attribute for links (if any) tile = d3.treemapBinary, // treemap strategy width = 640, // outer width, in pixels height = 400, // outer height, in pixels margin = 0, // shorthand for margins marginTop = margin, // top margin, in pixels marginRight = margin, // right margin, in pixels marginBottom = margin, // bottom margin, in pixels marginLeft = margin, // left margin, in pixels padding = 1, // shorthand for inner and outer padding paddingInner = padding, // to separate a node from its adjacent siblings paddingOuter = padding, // shorthand for top, right, bottom, and left padding paddingTop = paddingOuter, // to separate a node’s top edge from its children paddingRight = paddingOuter, // to separate a node’s right edge from its children paddingBottom = paddingOuter, // to separate a node’s bottom edge from its children paddingLeft = paddingOuter, // to separate a node’s left edge from its children round = true, // whether to round to exact pixels //colors = d3.schemeTableau10, // array of colors colors = d3.schemeOranges[9], zDomain, // array of values for the color scale fill = "#ccc", // fill for node rects (if no group color encoding) fillOpacity = group == null ? null : 0.6, // fill opacity for node rects stroke, // stroke for node rects strokeWidth, // stroke width for node rects strokeOpacity, // stroke opacity for node rects strokeLinejoin, // stroke line join for node rects } = {}) { // If id and parentId options are specified, or the path option, use d3.stratify // to convert tabular data to a hierarchy; otherwise we assume that the data is // specified as an object {children} with nested objects (a.k.a. the “flare.json” // format), and use d3.hierarchy. // We take special care of any node that has both a value and children, see // https://observablehq.com/@d3/treemap-parent-with-value. const stratify = data => (d3.stratify().path(path)(data)).each(node => { if (node.children?.length && node.data != null) { const child = new d3.Node(node.data); node.data = null; child.depth = node.depth + 1; child.height = 0; child.parent = node; child.id = node.id + "/"; node.children.unshift(child); } }); const root = path != null ? stratify(data) : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) : d3.hierarchy(data, children); // Compute the values of internal nodes by aggregating from the leaves. value == null ? root.count() : root.sum(d => Math.max(0, d ? value(d) : null)); // Prior to sorting, if a group channel is specified, construct an ordinal color scale. const leaves = root.leaves(); const G = group == null ? null : leaves.map(d => group(d.data, d)); if (zDomain === undefined) zDomain = G; zDomain = new d3.InternSet(zDomain); const color = group == null ? null : d3.scaleOrdinal(zDomain, colors); // Compute labels and titles. const L = label == null ? null : leaves.map(d => label(d.data, d)); const T = title === undefined ? L : title == null ? null : leaves.map(d => title(d.data, d)); // Sort the leaves (typically by descending value for a pleasing layout). if (sort != null) root.sort(sort); // Compute the treemap layout. d3.treemap() .tile(tile) .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .paddingInner(paddingInner) .paddingTop(paddingTop) .paddingRight(paddingRight) .paddingBottom(paddingBottom) .paddingLeft(paddingLeft) .round(round) (root); const svg = d3.create("svg") .attr("viewBox", [-marginLeft, -marginTop, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 16); const node = svg.selectAll("a") .data(leaves) .join("a") .attr("xlink:href", link == null ? null : (d, i) => link(d.data, d)) .attr("target", link == null ? null : linkTarget) .attr("transform", d => `translate(${d.x0},${d.y0})`); node.append("rect") .attr("fill", color ? (d, i) => color(G[i]) : fill) .attr("fill-opacity", fillOpacity) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linejoin", strokeLinejoin) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); if (T) { node.append("title").text((d, i) => T[i]); } if (L) { // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; node.append("clipPath") .attr("id", (d, i) => `${uid}-clip-${i}`) .append("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); node.append("text") .attr("clip-path", (d, i) => `url(${new URL(`#${uid}-clip-${i}`, location)})`) .selectAll("tspan") .data((d, i) => `${L[i]}`.split(/\n/g)) .join("tspan") .attr("x", 3) .attr("y", (d, i, D) => `${(i === D.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, D) => i === D.length - 1 ? 0.7 : null) .text(d => d); } return Object.assign(svg.node(), {scales: {color}}); }31:[{"id":"bdf7d1110c281372834e29633af95abbaab0b6c03833c200ca83a89aeefc0757b0f6a296c72f1a1086837f0ecded4df08b1315ce166b88b1870733d5da4d5d28","href":"https://static.observableusercontent.com/files/bdf7d1110c281372834e29633af95abbaab0b6c03833c200ca83a89aeefc0757b0f6a296c72f1a1086837f0ecded4df08b1315ce166b88b1870733d5da4d5d28","name":"moshwoodash@2.txt","type":"text/plain","lastModified":1765444486400.004,"size":910},{"id":"1b19cfd56914e85af6a15e4593e7bbb33be1c226e0b808712c9c0fa0be042bffa5a8e741d04893f26850af17cbb4e88ce0106468cc388f4cf13876478ac9e749","href":"https://static.observableusercontent.com/files/1b19cfd56914e85af6a15e4593e7bbb33be1c226e0b808712c9c0fa0be042bffa5a8e741d04893f26850af17cbb4e88ce0106468cc388f4cf13876478ac9e749","name":"moshwood@3.txt","type":"text/plain","lastModified":1765444486400.004,"size":834780},{"id":"c694068c4711232fb7eac4b98f1eab7e53cfb52ff64b14b844459bc341df8a6539b1b68d0d89d5c4bbe97289fef0276659b01aee39369729fa69e8ded1a32a4b","href":"https://static.observableusercontent.com/files/c694068c4711232fb7eac4b98f1eab7e53cfb52ff64b14b844459bc341df8a6539b1b68d0d89d5c4bbe97289fef0276659b01aee39369729fa69e8ded1a32a4b","name":"timber.txt","type":"text/plain","lastModified":1765463793868.278,"size":704787},{"id":"e77aa2941a20c86d6ef856ff30da1711783caaadf95d32a02d80d2ae9831b74425b98bff8fafc5455deed86c74158903f3db71d36448959f56154af1e8293b12","href":"https://static.observableusercontent.com/files/e77aa2941a20c86d6ef856ff30da1711783caaadf95d32a02d80d2ae9831b74425b98bff8fafc5455deed86c74158903f3db71d36448959f56154af1e8293b12","name":"rammed.txt","type":"text/plain","lastModified":1765463802804.323,"size":16490},{"id":"014065065eb9a8e74d219cefe9eb0ca1acaefcd983ee9089844946f9b89d1aef4c121725a87ba67cd1104cc5242daf367a261744ef783fe010fbb992153a2ef5","href":"https://static.observableusercontent.com/files/014065065eb9a8e74d219cefe9eb0ca1acaefcd983ee9089844946f9b89d1aef4c121725a87ba67cd1104cc5242daf367a261744ef783fe010fbb992153a2ef5","name":"TREE MAP - Sheet1 (2)-2.csv","type":"text/csv","lastModified":1765473324876.599,"size":206},{"id":"d46b0064f6eda83748e2956ff70e43fad29cbf504ae6fee13a82dc911cbb651bc961a48c7c2e731f0b1aa0639812921e4dfccf5afbecc790cf1e68909d8812fe","href":"https://static.observableusercontent.com/files/d46b0064f6eda83748e2956ff70e43fad29cbf504ae6fee13a82dc911cbb651bc961a48c7c2e731f0b1aa0639812921e4dfccf5afbecc790cf1e68909d8812fe","name":"chunk.txt","type":"text/plain","lastModified":1765463950251,"size":108640},{"id":"2704e53f831838411044424bdc02c01eed5f3b307e29bf0ecdf458316b4e5bfcfedcf981e08294c1aa927ff63f04bdfc9ed9b0942f72c083978ee3c16e9765dc","href":"https://static.observableusercontent.com/files/2704e53f831838411044424bdc02c01eed5f3b307e29bf0ecdf458316b4e5bfcfedcf981e08294c1aa927ff63f04bdfc9ed9b0942f72c083978ee3c16e9765dc","name":"glass@2.txt","type":"text/plain","lastModified":1765464244533.535,"size":49912},{"id":"44fcbcf9d3bd80983d441b6bbcc4c4947f56fa4dc498986612c80e05a4083b322a1a7e4b33f8684104b1b65671b542a36538c73ca0bf177bf928fd4bdc9e834d","href":"https://static.observableusercontent.com/files/44fcbcf9d3bd80983d441b6bbcc4c4947f56fa4dc498986612c80e05a4083b322a1a7e4b33f8684104b1b65671b542a36538c73ca0bf177bf928fd4bdc9e834d","name":"clt.txt","type":"text/plain","lastModified":1765463748322.642,"size":4554},{"id":"82e45995e992a3fbfe85586916d10ff0f8700cf36d23385f5062334a35be1f9e2106c2d4e81b91501c85f73627898aa7b88c0ce56f2c0b015eb7865f7ef596cc","href":"https://static.observableusercontent.com/files/82e45995e992a3fbfe85586916d10ff0f8700cf36d23385f5062334a35be1f9e2106c2d4e81b91501c85f73627898aa7b88c0ce56f2c0b015eb7865f7ef596cc","name":"mycelium.txt","type":"text/plain","lastModified":1765463815153.289,"size":308636},{"id":"5f93f6b1b8d0cf1a2c519d322781a058f6ba26382ee626c477d8d1142046227fe21ae4c227bdce75a30547f3694e808b540c2f1adf1370118550e67e42149ec3","href":"https://static.observableusercontent.com/files/5f93f6b1b8d0cf1a2c519d322781a058f6ba26382ee626c477d8d1142046227fe21ae4c227bdce75a30547f3694e808b540c2f1adf1370118550e67e42149ec3","name":"morf@1.txt","type":"text/plain","lastModified":1765464087565.701,"size":61541},{"id":"4a334ff640e1b689300c0aec7ad541dfc5c7f5a4521c70979fac059cc67134069ad11f576a91f91153e79e4c186befcc7fd453035a9251986df53a65f771bf2c","href":"https://static.observableusercontent.com/files/4a334ff640e1b689300c0aec7ad541dfc5c7f5a4521c70979fac059cc67134069ad11f576a91f91153e79e4c186befcc7fd453035a9251986df53a65f771bf2c","name":"TREE MAP - Sheet1 (3)-2.csv","type":"text/csv","lastModified":1765473332894.181,"size":215},{"id":"4413b84e9905557b2c54d861901748919ec243dcca12c9b28dfb18c866288aafffa65b1273558a5c4ef4d47f910e776118829d73d78f781d66096a4ea993bc58","href":"https://static.observableusercontent.com/files/4413b84e9905557b2c54d861901748919ec243dcca12c9b28dfb18c866288aafffa65b1273558a5c4ef4d47f910e776118829d73d78f781d66096a4ea993bc58","name":"glulam.txt","type":"text/plain","lastModified":1765463836125.185,"size":18837},{"id":"7fba85dc3d3e4b7d2e9338bd206514536f043f9b23c49410a33a298e1b1d21b2366d526fa79872ccc577036471930394fe398fffcf542785530db6a96744932a","href":"https://static.observableusercontent.com/files/7fba85dc3d3e4b7d2e9338bd206514536f043f9b23c49410a33a298e1b1d21b2366d526fa79872ccc577036471930394fe398fffcf542785530db6a96744932a","name":"interior@2.txt","type":"text/plain","lastModified":1765464199146.245,"size":211454},{"id":"c2eb388532d1058fe12573e104738b0b6f7df770dc3c0eb897e77e5586ec78e1ca2d04f791ef18dae29907a994ab500ce4d7868390ffaa1170a4af689ae889c5","href":"https://static.observableusercontent.com/files/c2eb388532d1058fe12573e104738b0b6f7df770dc3c0eb897e77e5586ec78e1ca2d04f791ef18dae29907a994ab500ce4d7868390ffaa1170a4af689ae889c5","name":"base.txt","type":"text/plain","lastModified":1765464393049.843,"size":645717},{"id":"ac41ff95306b2ee20882192006223c96b1130a2187cdb9855ab257f0e633b709c707b952e3711dc66a6ac57add0802c3af2cbd8a4ec60d96aff59aa06a717cda","href":"https://static.observableusercontent.com/files/ac41ff95306b2ee20882192006223c96b1130a2187cdb9855ab257f0e633b709c707b952e3711dc66a6ac57add0802c3af2cbd8a4ec60d96aff59aa06a717cda","name":"FullVE.txt","type":"text/plain","lastModified":1765464402452.351,"size":652776}] 2b:{"id":"9afafb2a50326308","slug":null,"title":"3530 Kings College Place - VTX","thumbnail":"5425ff121d15816bd87e4c45d7eb3346a419e66292987597d04efbf822509c11","access_level":"public","create_time":"$D2025-12-11T09:14:46.400Z","update_time":"$D2025-12-18T18:34:56.839Z","view_time":null,"first_public_time":"$D2025-12-18T18:18:26.885Z","has_unpublished_edits":null,"fork":{"id":"b2231fc7738f6ff5","slug":null,"title":"353 E Mosholu Pkwy N - VTX","owner":{"id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"education_2026"},"version":3380,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcc71edec824954f","login":"tristan5","name":"Tristan","avatar_url":"https://avatars-next.observableusercontent.com/c249477d6a9ecdaaa0f17f43be718899ff5ef66d1f91da8763e97d0bf5dc13aa","tier":null}],"members":[{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"education_2026","role":"editor"},{"type":"individual","id":"dcc71edec824954f","login":"tristan5","name":"Tristan","avatar_url":"https://avatars-next.observableusercontent.com/c249477d6a9ecdaaa0f17f43be718899ff5ef66d1f91da8763e97d0bf5dc13aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"3530 Kings College Place - VTX","cells":[{"id":0,"value":"# 3530 Kings College Place - VTX","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2314,"value":"Add drywall and morf\nRadio sizing??\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"curView","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"viewof curView = {\n const radio = Inputs.radio(\n [\"Full\", \"Chunk\", \"Interior\"],\n {\n label: \"Current View\",\n value: \"Interior\"\n }\n )\n\n radio.classList.add(\"curview-radio\")\n return radio\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2750,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2714,"value":"viewof mode = {\n const radio = Inputs.radio(\n [\"Proposed\", \"Normative\"],\n { label: \"View Mode\" }\n )\n radio.classList.add(\"mode-radio\")\n return radio\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2843,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":878,"value":"viewof proposedView = {\n const radio = Inputs.radio(\n [\n \"Rammed Earth\",\n \"Glulam\",\n \"Mycelium\",\n \"Glass\",\n \"Timber\",\n \"MORF\",\n \"CLT\",\n \"Wood Ash Concrete\"\n ],\n {\n label: \"Proposed View\",\n disabled: mode !== \"Proposed\"\n }\n )\n\n if (curView === \"Full\" || curView === \"Chunk\") {\n radio.style.display = \"none\"\n }\n\n radio.classList.add(\"pro-radio\")\n\n return radio\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2940,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1786,"value":"viewof normativeView = {\n const radio = Inputs.radio(\n [\n \"Steel\",\n \"Concrete(CLT)\",\n \"Concrete(WA)\",\n \"Glass\",\n \"EPS\",\n \"Timber\",\n \"Brick\"\n ],\n {\n label: \"Normative View\",\n disabled: mode !== \"Normative\"\n }\n )\n\n if (curView === \"Full\" || curView === \"Chunk\") {\n radio.style.display = \"none\"\n }\n\n radio.classList.add(\"nor-radio\")\n\n return radio\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2981,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":954,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"moshfullve1 = FileAttachment(\"FullVE.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"fullve = rhinoGraphics(moshfullve1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"moshfull = FileAttachment(\"base.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"full = rhinoGraphics(moshfull)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"moshwoodash = FileAttachment(\"moshwoodash@2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"woodash = rhinoGraphics(moshwoodash)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"moshclt = FileAttachment(\"clt.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"CLT = rhinoGraphics(moshclt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"moshexterior = FileAttachment(\"chunk.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"exteriorMosh = rhinoGraphics(moshexterior)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"moshglass = FileAttachment(\"glass@2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"glass = rhinoGraphics(moshglass)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"moshglulam = FileAttachment(\"glulam.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"glulam = rhinoGraphics(moshglulam)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"moshinterior = FileAttachment(\"interior@2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"interiorMosh = rhinoGraphics(moshinterior)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"moshmorf = FileAttachment(\"morf@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"morf = rhinoGraphics(moshmorf)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"moshmycelium = FileAttachment(\"mycelium.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"mycelium = rhinoGraphics(moshmycelium)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"moshrammedearth = FileAttachment(\"rammed.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"rammedearth = rhinoGraphics(moshrammedearth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"moshtimber = FileAttachment(\"timber.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"timber = rhinoGraphics(moshtimber)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"moshwood = FileAttachment(\"moshwood@3.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"wood = rhinoGraphics(moshwood)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"matData_moshproposedmat = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQkXbh_Egj0y9VZUjKb649RLbbeH6ELpO0cuomlqcqnnmShT8lN9ZM7yvyJ-9OR7J8TnxA06QCnq3M-/pub?gid=1275074136&single=true&output=csv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"matDatapropmat = d3.csv(matData_moshproposedmat,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"matData_moshnormativemat='https://docs.google.com/spreadsheets/d/e/2PACX-1vQkXbh_Egj0y9VZUjKb649RLbbeH6ELpO0cuomlqcqnnmShT8lN9ZM7yvyJ-9OR7J8TnxA06QCnq3M-/pub?gid=827963834&single=true&output=csv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"matDatanormmat = d3.csv(matData_moshnormativemat,d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"//import {Treemap} from \"@d3/treemap-component\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2011,"value":"treemapChart = Treemap(treeMapSheet12, {\n path: d => d.name.replace(/\\./g, \"/\"), // e.g., \"flare/animate/Easing\"\n value: d => d.size, // size of each node (file); null for internal nodes (folders)\n group: d => d.name.split(\".\")[1], // e.g., \"animate\" in \"flare.animate.Easing\"; for color\n label: (d, n) => [...d.name.split(\".\").pop().split(/(?=[A-Z][a-z])/g), n.value.toLocaleString(\"en\")].join(\"\\n\"),\n title: (d, n) => `${d.name}\\n${n.value.toLocaleString(\"en\")}`, // text to show on hover\n link: (d, n) => `https://github.com/prefuse/Flare/blob/master/flare/src${n.id}.as`,\n //tile, // e.g., d3.treemapBinary; set by input above\n width: 850,\n height: 1100\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2627,"value":"treemapChart2 = Treemap(treeMapSheet13, {\n path: d => d.name.replace(/\\./g, \"/\"), // e.g., \"flare/animate/Easing\"\n value: d => d.size, // size of each node (file); null for internal nodes (folders)\n group: d => d.name.split(\".\")[1], // e.g., \"animate\" in \"flare.animate.Easing\"; for color\n label: (d, n) => [...d.name.split(\".\").pop().split(/(?=[A-Z][a-z])/g), n.value.toLocaleString(\"en\")].join(\"\\n\"),\n title: (d, n) => `${d.name}\\n${n.value.toLocaleString(\"en\")}`, // text to show on hover\n link: (d, n) => `https://github.com/prefuse/Flare/blob/master/flare/src${n.id}.as`,\n //tile, // e.g., d3.treemapBinary; set by input above\n width: 850,\n height: 1100\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":"treeMapSheet12 = await FileAttachment(\"TREE MAP - Sheet1 (2)-2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"treeMapSheet12","database":"$undefined"},{"id":2580,"value":"treeMapSheet13 = await FileAttachment(\"TREE MAP - Sheet1 (3)-2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"treeMapSheet13","database":"$undefined"},{"id":891,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"mapVar = \"MATERIAL\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"mapVal = \"transport\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2c:"$2b:body"