Document

27:null 28:["$","title",null,{"children":"Martin, Munoz. Forest Hill Site Proposal | hower_teaching | Observable"}] 2d:T29bd,MAP = { const width = 900,//pixel size of the map height = 900; var viewX = 0 var viewY = 0 var widthView = 900 var heightView = 900 var svg = d3.create("svg") .attr("viewBox", [0, 0, width-50, height-10]); // Use Mercator projection var projection = d3 .geoMercator()//projection system used .fitSize([width, height], boundingbox); var path = d3.geoPath().projection(projection);//need one of these for each line layer from qgis var path2 = d3.geoPath().projection(projection); //parking lots var path3 = d3.geoPath().projection(projection); var path4 = d3.geoPath().projection(projection); //building footprints var path5 = d3.geoPath().projection(projection); //streets var path6 = d3.geoPath().projection(projection); var path7 = d3.geoPath().projection(projection); var path8 = d3.geoPath().projection(projection); var path9 = d3.geoPath().projection(projection); //subway lines var path10 = d3.geoPath().projection(projection); //bike routes var path11 = d3.geoPath().projection(projection); var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type var c = svg.selectAll("circle")//for circles var p = svg.selectAll("polyline")//for polylines from rhino var t = svg.selectAll("text") //static lines from qgis //staticLines(path3, residentialzoning.features,"none",1,1,"blue") //staticLines(path6, commzoning.features,"none",'1','1',"red") //staticLines(path7, manufacturingzoning.features,"none",'1','1',"orange") //staticLines(path8, park.features,"none",'1','1',"green") if(pklots) { staticLines(path2, parkinglots.features,"darkgray",'.1','.1',"darkgray") } if(sublines) { staticLines(path9, subwaylines.features,"none",'1','1.5',"red") } if(bkroutes) { staticLines(path10, bikeroutes.features,"none",'1','2',"blue") } staticLines(path4, buildingfootprints2.features,"Gainsboro",'.0.35','0.35',"Gainsboro") staticLines(path5, streets.features,"none",'1','.5',"black") function staticLines(path, data, sfill, sOpac, sW, stroke){ g.enter().append("path") .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append("path") //appends path to data .attr('class','outlines') .attr("d", path) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", sfill) .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke", stroke) } //static points from qgis if(substops) { staticCircles(subwaystops.features,'8','black','1',"0") staticCircles(subwaystops.features,'5','white','1',"0") function staticCircles(data,r,sfill, sOpac, sWidth){ c.enter().append('circle') .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('cx',function(d) {return path.centroid(d)[0]}) .attr("cy",function(d) {return path.centroid(d)[1]}) .attr('r', r) .attr('fill', sfill) .style('fill-opacity',sOpac) .style("stroke-width", sWidth) } } //lines from rhino //polyline(buildingfootprints2,'red','1','0','none') function polyline(data, sfill, sOpac, sW, stroke){ g.enter().append("polyline") .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", sfill) .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke", stroke) } //rollover for zoning if(res1) { p.enter().append("polyline") //this line designates that we're making a polyline .data(r1) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#c7cfb8') // .style("fill-opacity", '0.5') .style('stroke-opacity','0.75') .style("stroke-width", '1') .style("stroke", 'gray') } if(res2) { p.enter().append("polyline") //this line designates that we're making a polyline .data(r2) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#9eac85') .style("fill-opacity", '0.35') .style('stroke-opacity','0.75') .style("stroke-width", '0.1') .style("stroke", 'gray') } //#9eac85, #c7cfb8, #839462, #758457, #545d3e, #2f3523, '#586342' if(res3) { p.enter().append("polyline") //this line designates that we're making a polyline .data(r3) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#839462') .style("fill-opacity", '0.5') .style('stroke-opacity','0.75') .style("stroke-width", '0.1') .style("stroke", 'gray') } if(res4) { p.enter().append("polyline") //this line designates that we're making a polyline .data(r4) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#758457') .style("fill-opacity", '0.75') .style('stroke-opacity','0.75') .style("stroke-width", '0.1') .style("stroke", 'gray') } if(res6) { p.enter().append("polyline") //this line designates that we're making a polyline .data(r6) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill",'#545d3e') .style("fill-opacity", '0.5') .style('stroke-opacity','0.75') .style("stroke-width", '0.1') .style("stroke", 'gray') } if(res7) { p.enter().append("polyline") //this line designates that we're making a polyline .data(r7) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill",'#2f3523') .style("fill-opacity", '0.5') .style('stroke-opacity','0.75') .style("stroke-width", '0.1') .style("stroke", 'gray') } if(res5) { p.enter().append("polyline") //this line designates that we're making a polyline .data(r5) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#586342') .style("fill-opacity", '0.75') .style('stroke-opacity','0.75') .style("stroke-width", '0.1') .style("stroke", 'gray') } /* if(Detachedgarage) { p.enter().append("polyline") //this line designates that we're making a polyline .data(detached_garages) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .attr("class", "garages") .style("fill",'blue') .style("fill-opacity", '0.75') .style('stroke-opacity','0.75') .style("stroke-width", '0.1') .style("stroke", 'none') }*/ if(Attachedgarage) { p.enter().append("polyline") //this line designates that we're making a polyline .data(attached_garages) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill",'brown') .style("fill-opacity", '0.75') .style('stroke-opacity','0.75') .style("stroke-width", '0.1') .style("stroke", 'none') } p.enter().append("polyline") //this line designates that we're making a polyline .data(fhboundary) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill",'none') .style("fill-opacity", 'none') .style('stroke-opacity','3.75') .style("stroke-width", '4') .style("stroke", '#686868') p.enter().append("polyline") //this line designates that we're making a polyline .data(foresthillsgardens) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill",'none') .style("fill-opacity", 'none') .style('stroke-opacity','3.75') .style("stroke-width", '4') .style("stroke", '#738058') p.enter().append("polyline") //this line designates that we're making a polyline .data(sitehouse) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill",'orange') .style("fill-opacity", '1') .style('stroke-opacity','1') .style("stroke-width", '0.1') .style("stroke", 'darkred') /* //points from spreadsheet c.enter().append('circle') .data(spots) //get data to define path .enter() //there are more data than elements, this selects them .append("circle") //appends path to data .attr('class','spots') .attr('cx',function(d) {return projection([d.long,d.lat])[0]}) .attr("cy",function(d) {return projection([d.long,d.lat])[1]}) .attr('r', 3) .attr('fill', 'black') .style('fill-opacity','1') .style("stroke-width", "1") */ return svg.node(); } 2e:T11a7,SYSTEMDIAGRAM = { const width = 1300,//pixel size of the map height = 750; var viewX = 0 var viewY = 0 var widthView = 900 var heightView = 900 var svg = d3.create("svg") .attr("viewBox", [0, 0, width-50, height-10]); function addStaticText(x, y, textContent, fontSize, fillColor, fontWeight, fontFamily = "helvetica", tempText) { svg//draw text .append("text") //appends path to data .attr('class','mText') .attr('x',x) .attr("y",y) .attr('fill', fillColor) .attr('class', tempText) .style('font-family', fontFamily) .style("font-weight", fontWeight) // Font weight .style("font-size", fontSize) .text(textContent) } // Use Mercator projection var projection = d3 .geoMercator()//projection system used .fitSize([width, height], boundingbox); var path4 = d3.geoPath().projection(projection); //building footprints var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type var c = svg.selectAll("circle")//for circles var p = svg.selectAll("polyline")//for polylines from rhino var t = svg.selectAll("text") var g=svg.selectAll('polyline') var path4 = d3.geoPath().projection(projection); //building footprints //polyline(sysdiaborder,'#none','0.5','1','black') //staticLines(path4, sysdiaborder.features,"Gainsboro",'.0.35','0.35',"#5f5f5f") //FIRST ROW addStaticText(520, 120, "DRYWALL", "12px","black", "bold", "arial") addStaticText(665, 120, "LANDFILL", "12px","black", "bold", "arial") addStaticText(1040, 120, "DISASSEMBLY", "12px","black", "bold", "arial") // SECOND ROW addStaticText(500, 237, "EXISTING GARAGE", "12px","black", "bold", "arial") addStaticText(890, 237, "DISASSEMBLED", "12px","black", "bold", "arial") addStaticText(910, 246, "GARAGE", "12px","black", "bold", "arial") //THIRD ROW //FOURTH ROW addStaticText(250, 341, "FOREST MANAGEMENT", "12px","black", "bold", "arial") addStaticText(410, 341, "LOGGING", "12px","black", "bold", "arial") addStaticText(535, 341, "SAWING", "12px","black", "bold", "arial") //ADHESIVE APPLICATION addStaticText(665, 341, "ADHESIVE", "12px","black", "bold", "arial") addStaticText(655, 351, "APPLICATION", "12px","black", "bold", "arial") addStaticText(785, 341, "MASS PLYWOOD", "12px","black", "bold", "arial") addStaticText(1040, 351, "ADU PROPOSAL", "12px","black", "bold", "arial") //FIFTH ROW addStaticText(635, 445, "SHEATHING BOARD", "12px","black", "bold", "arial") addStaticText(655, 351, "APPLICATION", "12px","black", "bold", "arial") //SIXTH ROW addStaticText(500, 522, "K BRIQ MANUFACTURER", "12px","black", "bold", "arial") addStaticText(675, 522, "K BRIQ", "12px","black", "bold", "arial") //SEVENTH ROW addStaticText(500, 612, "WASTE BASED BRICK", "12px","black", "bold", "arial") addStaticText(510, 623, "MANUFACTURER", "12px","black", "bold", "arial") addStaticText(645, 612, "WASTE BASED BRICK", "12px","black", "bold", "arial") addStaticText(1050, 612, "RECYCLING", "12px","black", "bold", "arial") //EIGHTH ROW addStaticText(510, 705, "HEMP RESOURCE", "12px","black", "bold", "arial") addStaticText(665, 705, "HEMPWOOL", "12px","black", "bold", "arial") // staticLines(sysdiaborder,'none','1','1','.50','gray') staticLines(bold,'none','1','1','1','black') staticLines(heav,'none','1','1','.7','darkgray') staticLines(med,'none','1','1','.50','gray') staticLines(sysdiagramarrows,'gray','1','1','1','black') // polyline(squarebool,'none','1','1','3','cyan') function staticLines(data, pfill, pOpac, sOpac, sWght, stroke){ p.enter().append("path") .data(data) .enter() .append('polyline') .attr("points", d => d) .style("fill", pfill) .style("fill-opacity", pOpac) .style("stroke-opacity", sOpac) .style("stroke-width", sWght) .style("stroke", stroke) } p.enter().append("polyline") .data(bold) .enter() .append('polyline') .attr("points", d => d) .style("fill", 'white') .style("fill-opacity", '0.5') .style("stroke-opacity",'1') .style("stroke-width", '.1') .style("stroke", 'white') .on('mouseover', changeFill) .on('mouseout', changeBack); function changeFill(event,d) { d3.select(this).style("fill", 'cyan') } function changeBack(event,d) { d3.select(this).style("fill", 'white') } return svg.node(); } 2f:Tadf,ginfo = { const width = 650,//pixel size of the map height = 60; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var p = svg.selectAll('polyline'); function addStaticText(x, y, textContent, fontSize, fillColor, fontWeight, fontFamily = "helvetica", tempText) { svg//draw text .append("text") //appends path to data .attr('class','mText') .attr('x',x) .attr("y",y) .attr('fill', fillColor) .attr('class', tempText) .style('font-family', fontFamily) .style("font-weight", fontWeight) // Font weight .style("font-size", fontSize) .text(textContent) } addStaticText(45, 30, "GARAGE READJUSTMENT", "18px","black", "bold", "arial") addStaticText(365, 30, "PROPOSED CONSTRUCTION", "18px", "black", "bold", "arial") polyline(gbutton1,'#5C6845','0.5','1','2','none','button1') polyline(gbutton3,'#5C6845','0.5','1','2','none','button3') function changeFillbutton(event,d){ d3.select(this).style("fill", '#839462') d3.select(this).style("fill-opacity", '0.50') d3.select(this).style("stroke-width", '3') } function polyline(data, pfill, pOpac, sOpac, sWght, stroke, className = '') { p = p.data(data); // Bind data to the polyline selection p.enter().append("polyline") // Enter the new data and append polylines .merge(p) .attr("points", function(d) { return d }) // Set the points .style("fill", pfill) .style("fill-opacity", pOpac) .style('stroke-opacity', sOpac) .style("stroke-width", sWght) .style("stroke", stroke) .attr("class", className) // Add className for specific styling and selection } function unchangeFillbutton(event, d) { // Check if this button is selected before resetting it if (d3.select(this).attr('class') !== selectedButton) { d3.select(this) .style("fill", "#5C6845") .style("fill-opacity", "0.20") .style("stroke-width", '2') ; } } function selectButton(event, d) { // First, reset all buttons to unselected svg.selectAll('.button1, .button3') .style("fill", "#5C6845") .style("fill-opacity", "0.20") .style("stroke-width", '2') // Then, select the clicked button d3.select(this) .style("fill", "green") .style("fill-opacity", "0.50") let buttonClass = d3.select(this).attr("class"); console.log(d3.select(this).attr("class")) // Update the mutable variable with only the button name mutable selectedButton = buttonClass; } svg.selectAll('.button1') .on('mouseover', changeFillbutton) .on('mouseout', unchangeFillbutton) .on('click', selectButton) svg.selectAll('.button3') .on('mouseover', changeFillbutton) .on('mouseout', unchangeFillbutton) .on('click', selectButton) return svg.node(); }30:T4a5b,propProcess = { const width = 1300,//pixel size of the map height = 560; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var p = svg.selectAll('polyline'); var t = svg.selectAll('text'); var l = svg.selectAll('line'); var c = svg.selectAll('circle'); function addStaticText(x, y, textContent, fontSize, fillColor, fontWeight, fontFamily = "helvetica", tempText) { svg//draw text .append("text") //appends path to data .attr('class','mText') .attr('x',x) .attr("y",y) .attr('fill', fillColor) .attr('class', tempText) .style('font-family', fontFamily) .style("font-weight", fontWeight) // Font weight .style("font-size", fontSize) .text(textContent) } addStaticText(45, 90, "Our proposal requires a second floor to compensate for the low area of", "18px","black", "475", "helvetica") addStaticText(45, 110, "the original garage as it does not provide enough livable space for a ", "18px","black", "475", "helvetica") addStaticText(45, 130, "family that would be moving in. New, sustainable materials are introduced", "18px","black", "475", "helvetica") addStaticText(45, 150, "for the wall assembly of the upper floor, removing the need for", "18px","black", "475", "helvetica") addStaticText(45, 170, "conventional materials.", "18px","black", "475", "helvetica") function polyline(data, pfill, pOpac, sOpac, sWght, stroke){ p.enter().append("polyline") //this line designates that we're making a polyline .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", pfill) .style("fill-opacity", pOpac) .style('stroke-opacity',sOpac) .style("stroke-width", sWght) .style("stroke", stroke) } var layer1Lines = lineGraphics(player1) var layer2Lines = lineGraphics(player2) var layer3Lines = lineGraphics(player3) var layer4Lines = lineGraphics(player4) var layer5Lines = lineGraphics(player5) var layer6Lines = lineGraphics(player6) var rectW = 50 var rectH = 50 //1ST DRAWING svg .append('rect') .attr('x','55') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer1) .on('mouseover',changeFill) .on('mouseout',changeBack) svg .append('text') .attr('x','72') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("1") function changeFill(event,d){ d3.select(this).style("fill", '#839462') } function changeBack(event,d){ d3.select(this).style("fill", '#5C6845') } //2ND DRAWING svg .append('rect') .attr('x','135') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer2) .on('mouseover',changeFill1) .on('mouseout',changeBack1) svg .append('text') .attr('x','152') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("2") function changeFill1(event,d){ d3.select(this).style("fill", '#839462') } function changeBack1(event,d){ d3.select(this).style("fill", '#5C6845') } // 3RD DRAWING svg .append('rect') .attr('x','215') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer3) .on('mouseover',changeFill2) .on('mouseout',changeBack2) svg .append('text') .attr('x','232') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("3") function changeFill2(event,d){ d3.select(this).style("fill", '#839462') } function changeBack2(event,d){ d3.select(this).style("fill", '#5C6845') } svg .append('rect') .attr('x','295') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer4) .on('mouseover',changeFill3) .on('mouseout',changeBack3) svg .append('text') .attr('x','312') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("4") function changeFill3(event,d){ d3.select(this).style("fill", '#839462') } function changeBack3(event,d){ d3.select(this).style("fill", '#5C6845') } //5TH DRAWING svg .append('rect') .attr('x','375') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer5) .on('mouseover',changeFill4) .on('mouseout',changeBack4) svg .append('text') .attr('x','392') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("5") function changeFill4(event,d){ d3.select(this).style("fill", '#839462') } function changeBack4(event,d){ d3.select(this).style("fill", '#5C6845') } //5th Drawing svg .append('rect') .attr('x','455') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer6) .on('mouseover',changeFill6) .on('mouseout',changeBack6) svg .append('text') .attr('x','472') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("6") function changeFill6(event,d){ d3.select(this).style("fill", '#839462') } function changeBack6(event,d){ d3.select(this).style("fill", '#5C6845') } function layer1(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer1Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "MASS PLYWOOD FRAMING" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "Brick is installed ontop of the sheathing boards that were installed", "K-BRIQ is also installed in the interior of the garage." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer2(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer2Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "SHEATHING APPLICATION" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "Sheathing is installed into the wall assembly for both the waste", "based brick facade and the interior cladding." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer3(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer3Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "WASTE BASED BRICK EXTERIOR CLADDING" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "Waste based brick is applied onto the exterior sides of the building", "in between the mass timber framing." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer4(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer4Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "HEMPWOOL INSULATION" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "Hempwool is installed in between the mass timber framing and in", "between the rafters located on the roof assembly of the building." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer5(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer5Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "K-BRIQ INTERIOR WALL" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "K-BRIQ is placed after the sheathing is applied on top of the", "insulation allowing for brick ties to be used for stability." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer6(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer6Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "ASPHALT APPLICATION" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "Asphalt shingles are applied on top of the roof decking.", ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function lineGraphics(rhino){ var list = rhino var cleanLines = [] for (let i = 0; i < list.length-1; i=i+2) {//loop thought txt of lines var id = list[i+1][0] var sw var str var dash var opac var fill //to add attribute, add variable here if(id==1){//this is user text #1 sw = 1 str = 'black' dash = '1 0' opac = 1 fill = 'none' //to add attribute, add value here, and on all of the text number } if(id==2){//this is user text #2 sw = 0.35 str = 'gray' dash = '1 0' opac = 0.5 fill = 'none' } if(id==3){ sw = .55 str = '#404040' dash = '1 0' opac = 1 fill = 'none' } if(id==4){ sw = 0.75 str = '#979797' dash = '1 0' opac = 1 fill = 'none' } cleanLines.push({pts:list[i],id:id,sw:sw,str:str,dash:dash,opac:opac,fill:fill})//to add more data, make new field, like pts, id, Zone, etc, and set the variable you created above equal to it } return cleanLines } layer1(); return svg.node(); }31:T543b,garageProcesss = { const width = 1300,//pixel size of the map height = 560; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var p = svg.selectAll('polyline'); var t = svg.selectAll('text'); var l = svg.selectAll('line'); var c = svg.selectAll('circle'); function addStaticText(x, y, textContent, fontSize, fillColor, fontWeight, fontFamily = "helvetica", tempText) { svg//draw text .append("text") //appends path to data .attr('class','mText') .attr('x',x) .attr("y",y) .attr('fill', fillColor) .attr('class', tempText) .style('font-family', fontFamily) .style("font-weight", fontWeight) // Font weight .style("font-size", fontSize) .text(textContent) } addStaticText(45, 90, "For our proposal, most of the materials seen in the garage are kept in", "18px","black", "475", "helvetica") addStaticText(45, 110, "order to reduce the amount of new material that needs to be added in", "18px","black", "475", "helvetica") addStaticText(45, 130, "the first floor of our ADUs. A sequence of modifications to the garage ", "18px","black", "475", "helvetica") addStaticText(45, 150, "is required to convert the garage to a livable space.", "18px","black", "475", "helvetica") function polyline(data, pfill, pOpac, sOpac, sWght, stroke){ p.enter().append("polyline") //this line designates that we're making a polyline .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", pfill) .style("fill-opacity", pOpac) .style('stroke-opacity',sOpac) .style("stroke-width", sWght) .style("stroke", stroke) } var layer1Lines = lineGraphics(glayer1) var layer2Lines = lineGraphics(glayer2) var layer3Lines = lineGraphics(glayer3) var layer4Lines = lineGraphics(glayer4) var layer5Lines = lineGraphics(glayer5) var layer6Lines = lineGraphics(glayer6) var layer7Lines = lineGraphics(glayer7) var rectW = 50 var rectH = 50 //1ST DRAWING svg .append('rect') .attr('x','55') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer1) .on('mouseover',changeFill) .on('mouseout',changeBack) svg .append('text') .attr('x','72') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("1") function changeFill(event,d){ d3.select(this).style("fill", '#839462') } function changeBack(event,d){ d3.select(this).style("fill", '#5C6845') } //2ND DRAWING svg .append('rect') .attr('x','135') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer2) .on('mouseover',changeFill1) .on('mouseout',changeBack1) svg .append('text') .attr('x','152') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("2") function changeFill1(event,d){ d3.select(this).style("fill", '#839462') } function changeBack1(event,d){ d3.select(this).style("fill", '#5C6845') } // 3RD DRAWING svg .append('rect') .attr('x','215') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer3) .on('mouseover',changeFill2) .on('mouseout',changeBack2) svg .append('text') .attr('x','232') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("3") function changeFill2(event,d){ d3.select(this).style("fill", '#839462') } function changeBack2(event,d){ d3.select(this).style("fill", '#5C6845') } svg .append('rect') .attr('x','295') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer4) .on('mouseover',changeFill3) .on('mouseout',changeBack3) svg .append('text') .attr('x','312') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("4") function changeFill3(event,d){ d3.select(this).style("fill", '#839462') } function changeBack3(event,d){ d3.select(this).style("fill", '#5C6845') } //5TH DRAWING svg .append('rect') .attr('x','375') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer5) .on('mouseover',changeFill4) .on('mouseout',changeBack4) svg .append('text') .attr('x','392') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("5") function changeFill4(event,d){ d3.select(this).style("fill", '#839462') } function changeBack4(event,d){ d3.select(this).style("fill", '#5C6845') } //5th Drawing svg .append('rect') .attr('x','455') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer6) .on('mouseover',changeFill6) .on('mouseout',changeBack6) svg .append('text') .attr('x','472') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("6") function changeFill6(event,d){ d3.select(this).style("fill", '#839462') } function changeBack6(event,d){ d3.select(this).style("fill", '#5C6845') } //6th Drawing svg .append('rect') .attr('x','535') .attr('y','0') .attr('width',rectW) .attr('height',rectH) .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#5C6845') .on('click', layer7) .on('mouseover',changeFill7) .on('mouseout',changeBack7) svg .append('text') .attr('x','552') .attr('y','35') .style('font-family','arial') .style('font-size','30px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("7") function changeFill7(event,d){ d3.select(this).style("fill", '#839462') } function changeBack7(event,d){ d3.select(this).style("fill", '#5C6845') } function layer1(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer1Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "ORIGINAL GARAGE" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "The original garage needs modfications in order to be", "converted into a livable Accessible Dwelling Unit (ADU)." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer2(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer2Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "GARAGE DOOR REMOVAL" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "The garage door is removed in order to create cavity for the wall", "to be filled in with alternative material." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer3(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer3Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "DRYWALL REMOVAL" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "The drywall of the original garage is removed for Hempwool", "insulation to be placed." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer4(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer4Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "HEMPWOOL INSULATION" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "Once dryall is removed, Hempwool is placed in between stud", "framing that was already in garage." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer5(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer5Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "SHEATHING INSTALLATION" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "Additional sheathing is added to the interior of the garage and the", "exterior where the cavity is located." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer6(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer6Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "BRICK APPLICATION" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "Brick is installed ontop of the sheathing boards that were installed", "K-BRIQ is also installed in the interior of the garage." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function layer7(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer7Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) const text1 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 290) .style('font-family', 'Arial') .style('font-size', '24px') .style('font-weight', '700') .style('fill', 'black') .style('text-anchor', 'start'); const lines1 = [ "ASPHALT REMOVAL" ]; lines1.forEach((line, i) => { text1.append('tspan') .attr('x', 50) .attr('dy', i === 0 ? '0em' : '1.2em') .text(line); }); // Second block (with extra space — 1.2em * lines1.length + 1.2em gap) const text2 = svg.append('text') .attr('class', 'lineText') .attr('x', 0) .attr('y', 280) // same starting y, will use dy to push down .style('font-family', 'Arial') .style('font-size', '18px') .style('font-weight', '500') .style('fill', 'black') .style('text-anchor', 'start'); const lines2 = [ "The apsphalt on top of the roof decking is removed in order to add", "vinyl flooring appropriate for interior purposes." ]; lines2.forEach((line, i) => { text2.append('tspan') .attr('x', 50) .attr('dy', `${(i === 0 ? lines1.length * 1.2 + 1.2 : 1.2)}em`) // offset from above block .text(line); }); } function lineGraphics(rhino){ var list = rhino var cleanLines = [] for (let i = 0; i < list.length-1; i=i+2) {//loop thought txt of lines var id = list[i+1][0] var sw var str var dash var opac var fill //to add attribute, add variable here if(id==1){//this is user text #1 sw = 1 str = 'black' dash = '1 0' opac = 1 fill = 'none' //to add attribute, add value here, and on all of the text number } if(id==2){//this is user text #2 sw = 0.35 str = '#b4b4b4' dash = '1 0' opac = 1 fill = 'none' } if(id==3){ sw = .55 str = '#404040' dash = '1 0' opac = 1 fill = 'none' } if(id==4){ sw = 0.75 str = '#979797' dash = '1 0' opac = 1 fill = 'none' } cleanLines.push({pts:list[i],id:id,sw:sw,str:str,dash:dash,opac:opac,fill:fill})//to add more data, make new field, like pts, id, Zone, etc, and set the variable you created above equal to it } return cleanLines } layer1(); return svg.node(); }32:Tbea,MDATA = { var data = html`

${viewof laybox}

${md`**MAP LAYERS**`}

${md`**TRANSPORTATION**`} ${viewof pklots} ${viewof sublines} ${viewof substops} ${viewof bkroutes}

${md`**RESIDENTIAL ZONING**`} ${viewof res1} ${viewof res2} ${viewof res3} ${viewof res4} ${viewof res5} ${viewof res6} ${viewof res7}

${md`**SITE HISTORY**`}

${md`Forest Hills is a town located in Queens, New York that was originally founded as Forest Hills Park in 1895 by an architecture firm known as Olmstead & Eliot. In 1906, the Cord Meyer Development Company bought 600 acres of land near Forest Park and also named it Forest Hills. Later, Margaret Sage bought 142 acres of land to achieve her goal of constructing a neighborhood that replicated the Tudor housing style seen in England. Since then, many residents have been preserving the architectural style seen throughout Forest Hills. However, many worry that the proposals made by the City of Yes will take away that history in exchange for more housing.`}

${md`**SITE PROPOSAL**`}

Accessory Dwelling Units (ADUs): An ADU is a small dwelling unit located on the same lot of a preexisting home. It can either be located within the same home, or be a separate structure. They can range from backyard cottages, garage conversions, and basement apartments. They provide more space without changing the look of a neighborhood, which would be beneficial for Forest Hills. The City of Yes permits ADUs in one and two family homes in all low-density areas.

${sitepic}

${MAP}

${zoneInfo}

` return data }33:T2c8b,disassemblydrawing = { const width = 1300,//pixel size of the map height = 700; const svg = d3.create("svg") .attr("viewBox", [0, 200, width-0, height-10]); var c = svg.selectAll('circle') var p = svg.selectAll('polyline') // ["#ffffff","#f2f2f2","#e2e2e2","#cecece","#b4b4b4","#979797","#7a7a7a","#5f5f5f","#404040","#1e1e1e","#000000"] //static lines are input here polyline(lowerlineweight,'none','1','2','.15','#b4b4b4') function polyline(data, pfill, pOpac, sOpac, sWght, stroke){ p.enter().append("polyline") //this line designates that we're making a polyline .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", pfill) .style("fill-opacity", pOpac) .style('stroke-opacity',sOpac) .style("stroke-width", sWght) .style("stroke", stroke) } var layer1Lines = lineGraphics(disdwg1) var layer2Lines = lineGraphics(disdwg2) var layer3Lines = lineGraphics(disdwg3) var layer4Lines = lineGraphics(disdwg4) var layer5Lines = lineGraphics(disdwg5) svg p.enter().append('polyline') .data(button1) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#738058') .style('fill-opacity','1') .on('click', layer1) svg .append('text') .attr('x','20') .attr('y','248') .style('font-family','arial') .style('font-size','16px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("PHASE 1 ") // p.enter().append('polyline') .data(button2) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#738058') .style('fill-opacity','1') .on('click', layer2) svg .append('text') .attr('x','280') .attr('y','248') .style('font-family','arial') .style('font-size','16px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("PHASE 2 ") // p.enter().append('polyline') .data(button3) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#738058') .style('fill-opacity','1') .on('click', layer3) svg .append('text') .attr('x','540') .attr('y','248') .style('font-family','arial') .style('font-size','16px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("PHASE 3 ") svg // p.enter().append('polyline') .data(button4) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#738058') .style('fill-opacity','1') .on('click', layer4) svg .append('text') .attr('x','800') .attr('y','248') .style('font-family','arial') .style('font-size','16px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("PHASE 4 ") svg // p.enter().append('polyline') .data(button5) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", '#738058') .style('fill-opacity','1') .on('click', layer5) svg .append('text') .attr('x','1060') .attr('y','248') .style('font-family','arial') .style('font-size','16px') .style('font-weight','bold') .style('fill','white') .style('text-anchor','start') .text("PHASE 5 ") svg function layer1(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() console.log('churro') //d3.select(this).attr('stroke','red') p.enter().append('polyline') .data(layer1Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke", function(d){return d.str}) svg .append('text') .attr('class','lineText') .attr('x','0') .attr('y','750') .style('font-family','Arial') .style('font-size','24px') .style('font-weight','bold') .style('fill','grey') .style('text-anchor','start') .text("Carve Out Mortar For Brick Removal") } function layer2(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer2Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke-dasharray", function(d){return d.dash}) .style("stroke", function(d){return d.str}) svg .append('text') .attr('class','lineText') .attr('x','225') .attr('y','750') .style('font-family','Arial') .style('font-size','24px') .style('font-weight','bold') .style('fill','grey') .style('text-anchor','start') .text("Drill Out Nails For Brick Tie Removal") } function layer3(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer3Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke-dasharray", function(d){return d.dash}) .style("stroke", function(d){return d.str}) svg .append('text') .attr('class','lineText') .attr('x','435') .attr('y','750') .style('font-family','Arial') .style('font-size','24px') .style('font-weight','bold') .style('fill','grey') .style('text-anchor','start') .text("Remove Sheathing Once Ties Are Removed") } function layer4(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer4Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke-dasharray", function(d){return d.dash}) .style("stroke", function(d){return d.str}) svg .append('text') .attr('class','lineText') .attr('x','795') .attr('y','750') .style('font-family','Arial') .style('font-size','24px') .style('font-weight','bold') .style('fill','grey') .style('text-anchor','start') .text("Pry Out Insulation Panels") } function layer5(event,d){ svg.selectAll("polyline.assembly").remove() svg.selectAll("text.lineText").remove() p.enter().append('polyline') .data(layer5Lines) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','assembly') .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('stroke-opacity',function(d){return d.opac}) .style("stroke-width", function(d){return d.sw}) .style("stroke-dasharray", function(d){return d.dash}) .style("stroke", function(d){return d.str}) svg .append('text') .attr('class','lineText') .attr('x','1050') .attr('y','750') .style('font-family','Arial') .style('font-size','24px') .style('font-weight','bold') .style('fill','grey') .style('text-anchor','start') .text("Drill Out Screws") svg .append('text') .attr('class','lineText') .attr('x','1050') .attr('y','775') .style('font-family','Arial') .style('font-size','24px') .style('font-weight','bold') .style('fill','grey') .style('text-anchor','start') .text("For Drywall Removal") } function lineGraphics(rhino){ var list = rhino var cleanLines = [] for (let i = 0; i < list.length-1; i=i+2) {//loop thought txt of lines var id = list[i+1][0] var sw var str var dash var opac var fill //to add attribute, add variable here if(id==1){//this is user text #1 sw = 1.75 str = 'black' dash = '1 0' opac = 1 fill = 'none' //to add attribute, add value here, and on all of the text number } if(id==2){//this is user text #2 sw = 0.75 str = 'darkgray' dash = '1 0' opac = 0.75 fill = 'none' } if(id==3){ sw = 0.75 str = 'black' dash = '1 0' opac = 1 fill = 'none' } if(id==4){ sw = 1 str = 'black' dash = '1 0' opac = 1 fill = 'none' } if(id==5){ sw = 0.1 str = 'black' dash = '1 0' opac = 1 fill = 'none' } if(id==6){ sw = 3 str = 'black' dash = '4 4' opac = 1 fill = 'none' } cleanLines.push({pts:list[i],id:id,sw:sw,str:str,dash:dash,opac:opac,fill:fill})//to add more data, make new field, like pts, id, Zone, etc, and set the variable you created above equal to it } return cleanLines } return svg.node(); }34:T5dd,tweakedData = { var originalData = linkS var chiselTotal = 37300 var timberTotal = 20671 var plasterTotal = 7100 var asphaltTotal = 150 if (sankScen == "Best Case"){ viewof timberSlider.value = 0 viewof stoneSlider.value = 0 viewof brickSlider.value = 0 viewof plasterSlider.value = 0 viewof asphaltSlider.value = 0 } if (sankScen == "Worst Case"){ viewof timberSlider.value = 20671 viewof stoneSlider.value = 28480 viewof brickSlider.value = 8820 viewof plasterSlider.value = 7100 viewof asphaltSlider.value = 150 } if (sankScen == "Wood Rot"){ viewof timberSlider.value = 0 viewof stoneSlider.value = 0 viewof brickSlider.value = 0 viewof plasterSlider.value = 0 viewof asphaltSlider.value = 0 } if (sankScen == "Destroyed Bricks"){ viewof timberSlider.value = 0 viewof stoneSlider.value = 0 viewof brickSlider.value = 0 viewof plasterSlider.value = 0 viewof asphaltSlider.value = 0 } //timber originalData[45].value = timberSlider originalData[49].value = timberTotal - timberSlider //brick and stone originalData[44].value = stoneSlider + brickSlider originalData[48].value = chiselTotal - stoneSlider - brickSlider //plaster originalData[43].value = plasterSlider originalData[47].value = plasterTotal - plasterSlider //asphalt originalData[50].value = asphaltSlider originalData[42].value = asphaltTotal - asphaltSlider return originalData }35:T89c,SANKY = html `

${SANK}

${md`**SANKEY DIAGRAM**`}

${md`**MATERIAL SLIDERS**`}

${md`**EMBODIED CARBON DIVERTED TO THE CIRCULAR ECONOMY (CO2/LB)**`}

${md `% of EMBODIED CARBON DIVERTED`}

${viewof timberSlider} ${viewof stoneSlider} ${viewof brickSlider} ${viewof plasterSlider} ${viewof asphaltSlider}

${percCarbon}

${co2ShowTimber}

${co2ShowStone}

${co2ShowBrick}

${co2ShowPlaster}

${co2ShowAsphalt}

`36:Tc14,SANK = { // Specify the dimensions of the chart. const width = 1300; const height = 400; const format = d3.format(",.0f"); // Create a SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Constructs and configures a Sankey generator. const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3[nodeAlign]) // d3.sankeyLeft, etc. .nodeWidth(15) .nodePadding(10) .extent([[1, 5], [width - 1, height - 5]]); // Applies it to the data. We make a copy of the nodes and links objects // so as to avoid mutating the original. const {nodes, links} = sankey({ nodes: data.nodes.map(d => Object.assign({}, d)), links: data.links.map(d => Object.assign({}, d)) }); // Defines a color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); // Creates the rects that represent the nodes. const rect = svg.append("g") .attr("stroke", "#000") .selectAll() .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.category)); // Adds a title on the nodes. rect.append("title") .text(d => `${d.name}\n${format(d.value)} lbs / ft^3`); // Creates the paths that represent the links. const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll() .data(links) .join("g") .style("mix-blend-mode", "multiply"); // Creates a gradient, if necessary, for the source-target color option. if (linkColor === "source-target") { const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.category)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.category)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", linkColor === "source-target" ? (d) => d.uid : linkColor === "source" ? (d) => color(d.source.category) : linkColor === "target" ? (d) => color(d.target.category) : linkColor) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)} lbs / ft^3`); // Adds labels on the nodes. svg.append("g") .selectAll() .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name); return svg.node(); } 37:T474,carousel = html `

` 38:T86b,setTimeout(() => { const images = [{ url: 'https://offloadmedia.feverup.com/secretnyc.co/wp-content/uploads/2022/03/25095934/foresthills.jpg', alt: '', description: '' }, { url: 'https://thumbs.6sqft.com/wp-content/uploads/2018/09/26182326/45-Markwood-Place-1-e1538000745723.jpg', alt: '', description: '' }, { url: 'https://thumbs.6sqft.com/wp-content/uploads/2014/11/21020302/Forest-Hills-Gardens.jpg?w=1560&format=webp', alt: '', description: '' }, { url: 'https://static3.mansionglobal.com/production/media/article-images/37085a9a6cfa3c3b5e3f0472475d5f23/large_large_6D3F3D7D-0F5C-4C46-8576-CC23BCED6A98.jpeg', alt: '', description: '' }, { url: 'https://live.staticflickr.com/2911/14040214359_73dc8496a0_b.jpg', alt: '', description: '' }]; const featuredImage = document.getElementById("featured"); const thumbnails = document.getElementById("thumbnails"); const current_description = document.getElementById("current_description"); function setFeaturedImageIndex(idx) { const img_details = images[idx]; const imgElement = img_details.element; featuredImage.setAttribute("src", img_details.url); featuredImage.setAttribute("alt", img_details.alt); current_description.textContent = img_details.description; const previouslyHighlightedImage = images[highlightedImgIndex] previouslyHighlightedImage.element.removeAttribute('class'); imgElement.setAttribute('class', 'highlighted'); highlightedImgIndex = idx; clearTimeout(advanceTimeout); advanceTimeout = setTimeout(() => { setFeaturedImageIndex((idx+1)%images.length); }, 5000); } let advanceTimeout; let highlightedImgIndex = 0; for(let i = 0; i { setFeaturedImageIndex(i); }); thumbnails.append(imgElement); } setFeaturedImageIndex(highlightedImgIndex); }, 1000)39:Ta77,MATTEXT = { const width = 400;//pixel size of the map const height = 200; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var t = svg.selectAll("text") // showLayer.forEach(mattext) if (showLayer == 1){ addText(outlines(drawing_brick_outline1)) } if (showLayer == 2){ addText(outlines(drawing_stucco)) } if (showLayer == 3){ addText(outlines(drawing_stone)) } if (showLayer == 4){ addText(outlines(drawing_timber)) } if (showLayer == 5){ addText(outlines(drawing_glass)) } if (showLayer == 6){ addText(outlines(drawing_shingles_outline1)) } function addText(data){ svg t.enter().append('text') .data(data) .enter() .append("text") //appends path to data .attr('class','mText') .attr('x', 0) .attr("y",0) .style('font-family','Arial') .style("font-size", "12px") .text("Volume:") svg t.enter().append('text') .data(data) .enter() .append("text") //appends path to data .attr('class','mText') .attr('x', 0) .attr("y",170) .style('font-family','Arial') .style("font-size", "12px") .text(function(d){return d.Volume}) svg t.enter().append('text') .data(data) .enter() .append("text") //appends path to data .attr('class','mText') .attr('x', 0) .attr("y",190) .style('font-family','Arial') .style("font-size", "12px") .text("Lifespan:") svg t.enter().append('text') .data(data) .enter() .append("text") //appends path to data .attr('class','mText') .attr('x', 0) .attr("y",210) .style('font-family','Arial') .style("font-size", "12px") .text(function(d){return d.Lifespan}) } function outlines(idLines){ var list = idLines var spreadsheet = tudorMat var cleanLines = [] for (let i = 0; i < idLines.length-1; i=i+2) {//loop thought txt of lines var id = list[i+1][0] var idNum = Number(id) var volume var est_lifespan var distance_traveled var xPos for (let k=0; k\n\n\n\n \n \n \n Document\n \n\n\n\n

\n\n

\n \n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1469,"value":"sexLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQ7mE4OCgq1U8AY6eA4qqk6qqx0sXSF35IJBjRolbMiW7K2Ybajvdhjm2LzIXrJuBmbXe4TVxwjovS1/pub?output=csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"sex = d3.csv(sexLink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"ageLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQaW_kk0gSyjPIOkm3M88vcudkCsccVlOvnEY7TpsUEzzUWdKNjJF5nAB7OxKF9DUrwQBOw2zfKfzpZ/pub?output=csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"age = d3.csv(ageLink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"houseLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vS81DzkHMUwhiZyJENumaa4Ty_FxYwFc3PhABqVwWwKOMFlTRNULvwZUGMqVvxbZkoZ7WQC57JKnNHp/pub?output=csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"house = d3.csv(houseLink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1609,"value":"raceLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vR1-u_tH0d1Q9HjkQDRHc5KeI2-JHYzP25fK5adTF5YGJ-ZlMFGCwAYwyKpHugXPQFSfkaYB5hbtgq7/pub?output=csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"race = d3.csv(raceLink, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1645,"value":"dashboard =\n\n html`\n

\n ${viewof dashGraphics}\n

\n\n

\n ${viewof dashGraphics1}\n

\n\n

\n ${md`**FOREST HILLS TUDOR ADUS**`}\n

\n\n\n \n\n

\n ${viewof fhdata}\n

\n\n\n

\n ${DATAMAP}\n

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"viewof dashGraphics = {\n const width = 1300,//pixel size of the map\n height = 600;\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n var g=svg.selectAll('polyline')\n \npolyline(dashboardBox,'#738058','1','5','none')\n\n \n \nfunction polyline(data, sfill, sOpac, sW, stroke){\n\n g.enter().append(\"polyline\")\n .data(data) //get data to define path\n .enter() //there are more data than elements, this selects them\n .append('polyline')\n .attr(\"points\", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements\n .style(\"fill\", sfill)\n .style('stroke-opacity',sOpac)\n .style(\"stroke-width\", sW)\n .style(\"stroke\", stroke)\n}\n\n return svg.node();\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3976,"value":"viewof dashGraphics1 = {\n const width = 1300,//pixel size of the map\n height = 55;\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n var g=svg.selectAll('polyline')\n \npolyline(dashboardBox,'#839462','1','5','none')\n\n \n \nfunction polyline(data, sfill, sOpac, sW, stroke){\n\n g.enter().append(\"polyline\")\n .data(data) //get data to define path\n .enter() //there are more data than elements, this selects them\n .append('polyline')\n .attr(\"points\", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements\n .style(\"fill\", sfill)\n .style('stroke-opacity',sOpac)\n .style(\"stroke-width\", sW)\n .style(\"stroke\", stroke)\n}\n\n return svg.node();\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1783,"value":"DATAMAP =\n{\nvar dash \n \nif (fhdata == \"SITE ANALYSIS\"){dash=SITEDASHB}\n\nif (fhdata == \"MATERIALS\"){dash= MATDASH}\n\nif (fhdata == \"PROPOSAL\"){dash = PROPDASH}\n \n return dash\n}\n\n\n\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4640,"value":"SITEDASH = \n{\nvar dash \n \nif (SITEDATA == \"MAP DATA\"){dash=MDATA}\nif (SITEDATA == \"DEMOGRAPHICS\"){dash=DEMO}\n\nreturn dash\n \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4860,"value":"SITEDASHB = html `\n\n

\n ${viewof SITEDATA}\n

\n\n

\n ${SITEDASH}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4628,"value":"PROPDASH = html`\n

\n ${viewof PROPSEL}\n

\n\n

\n ${PROPVIEW}\n

\n`","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4875,"value":"PROPVIEW = \n{\nvar dash\n \nif (PROPSEL == \"SYSTEM DIAGRAM\"){dash=SYSTEMDIA} \nif (PROPSEL == \"PROCESS\"){dash=PROCESSDWG}\nif (PROPSEL == \"ISO SECTION\"){dash=PROPISO}\n \nreturn dash\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5421,"value":"SYSTEMDIA = html` \n

\n ${SYSTEMDIAGRAM}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5634,"value":"PROCESSDWG = html` \n

\n ${PROCESSDWGG}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4901,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4890,"value":"PROCESSDWGG =\n html`\n

\n ${ginfo}\n

\n\n

\n ${selectedGDash}\n

\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4927,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4934,"value":"mutable selectedButton = gbutton1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4932,"value":"selectedGDash =\n{\n var display\n if (selectedButton == \"button1\"){display =garageProcesss}\n if (selectedButton == \"button3\"){display =propProcess}\n return display\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4944,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4946,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4037,"value":"DEMO = html `\n\n

\n ${viewof demodata}\n

\n\n

\n ${DEMOGRAPHICS}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4003,"value":"DEMOGRAPHICS =\n{\nvar dash \n \nif (demodata == \"PEOPLE\"){dash=DDATA}\n\nif (demodata == \"ECONOMICS\"){dash=ECONDATA}\n\n\n \n return dash\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4030,"value":"ECONDATA = html` \n\n

\n ${viewof perchange}\n

\n\n

\n ${viewof incdis}\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1906,"value":"DDATA = {\n var data1 = html`\n \n

\n ${viewof racedat}\n

\n \n

\n ${viewof genderdat}\n

\n\n

\n ${viewof agedat}\n

\n\n

\n ${viewof housedat}\n

\n\n\n `\n return data1\n}\n","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4160,"value":"viewof housedat = html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4148,"value":"viewof racedat = html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4153,"value":"viewof agedat = html ` `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4156,"value":"viewof genderdat = html ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3999,"value":"viewof demodata = Inputs.radio([\"PEOPLE\",\"ECONOMICS\"], {value: \"PEOPLE\", format: x => html`${x}`})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4887,"value":"viewof PROPSEL = Inputs.radio([\"SYSTEM DIAGRAM\",\"PROCESS\",\"ISO SECTION\"], {value: \"SYSTEM DIAGRAM\", format: x => html`${x}`})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3644,"value":"MATDASH = html` \n \n

\n ${viewof matoptions}\n

\n\n

\n ${MATD}\n

\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3659,"value":"MATD =\n{\n var dboard\n \n if (matoptions == \"ISOMETRIC DRAWING\"){dboard = MATDATA}\n \n if (matoptions == \"LIFE CYCLE ANALYSIS\"){dboard = SANKY}\n\n if (matoptions == \"ASSEMBLY\"){dboard = ASSEMBLYBOARD}\n\n\n \nreturn dboard\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3908,"value":"ASSEMBLYBOARD = html`\n\n

\n ${viewof assemblydia}\n

\n \n

\n ${DIASSEMBLY}\n

\n`\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3930,"value":"DIASSEMBLY = {\n var aboard\n \n if (assemblydia == \"REASSEMBLY\"){aboard = reassemblydia}\n \n if (assemblydia == \"DISASSEMBLY\"){aboard = diassemblydia}\n\n\n\n\n \nreturn aboard\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3933,"value":"reassemblydia = html` \n

\n ${reassemblyDrawing}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4262,"value":"diassemblydia = html` \n

\n ${disassemblydrawing}\n

\n ${\"TUDOR STYLE BUILDING MATERIAL TREE\"}\n

\n ${fh1}\n ${fh2}\n ${fh3}\n

\n\n

\n ${viewof showLayer}\n

\n ${MATTEXT}\n

\n ${isoSection}\n

\n ${viewof fillType}\n