27:null 28:["$","title",null,{"children":"Kapinga & Annelise Greenpoint Notebook Part 2 | hower_teaching | Observable"}] 2d:T1bc5,isometricmap = { const width = 2000,//pixel size of the map height = 1500; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); var p = svg.selectAll("polyline")//for polylines from rhino var image2show var image1 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/1bf26743-167d-4f03-a644-7faa7d30007d/isometric1.jpg' var image2 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/99be757c-7f42-4061-bcdc-490e15989134/isometric2.jpg' var image3 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/4218099a-991b-4395-83a5-a3f65907e70b/isometric3.jpg' var image4 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/ec296fd5-b952-41f1-bbef-037f1cc8153b/isometric4.jpg' var image5 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/08edc403-ecbd-4329-aa3d-a2c390b10294/isometric4newzoom.jpg' var image6 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/cfa783a9-773e-459a-8e0c-a49e345b5f61/big1.jpg' var image7 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/6c8ef953-6add-49a5-8f40-caf4a8b9286e/big2.jpg' var image8 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/613e237e-d0f2-4d85-b793-face686e60cc/big3.jpg' var image9 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/ceef9ed3-9aa2-49ab-b642-d7f9b8b2096f/big4.jpg' if(isomap=="Isometric"){image2show=image1} if(isomap=="Phase 1"){image2show=image2} if(isomap=="Phase 2"){image2show=image3} if(isomap=="Phase 3"){image2show=image4} if(isomap=="Phase 3 Z"){image2show=image5} console.log(image2show) svg.append("image") .attr('x',0) .attr('y',0) .attr('width','1000px') .attr('xlink:href',image2show) function polyline(data, polylineclass, 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('class', 'polylineclass') .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) } if(isomap=="Phase 3 Z"){ p.enter().append("polyline") .data(isobuild11) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class', 'building1') .attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", 'white') .style('fill-opacity','0') .style("stroke-width", '1') .style('stroke-opacity', '0.3') .style("stroke", 'red') .style('stroke-dasharray', '1 0') .on("mouseover", addMiniIso) .on("mouseout", removeMiniIso) function addMiniIso(event,d){ svg.selectAll('polyline.building1').style('fill', 'red') svg.selectAll('polyline.building1').style('fill-opacity', '1') svg//add image .append("image") //appends path to data .attr('class', 'big1') .attr('width','575px') .attr('x', 1202) .attr("y", 148) .attr('xlink:href', image6) } function removeMiniIso(){ svg.selectAll('polyline.building1').style('fill', 'white') svg.selectAll('polyline.building1').style('fill-opacity', '0') svg.selectAll('image.big1').remove() } p.enter().append("polyline") .data(isobuild2) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class', 'building2') .attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", 'white') .style('fill-opacity','0') .style("stroke-width", '1') .style('stroke-opacity', '0.3') .style("stroke", 'red') .style('stroke-dasharray', '1 0') .on("mouseover", addMiniIso2) .on("mouseout", removeMiniIso2) function addMiniIso2(event,d){ svg.selectAll('polyline.building2').style('fill', 'red') svg.selectAll('polyline.building2').style('fill-opacity', '1') svg//add image .append("image") //appends path to data .attr('class', 'big2') .attr('width','575px') .attr('x', 1202) .attr("y", 148) .attr('xlink:href', image7) } function removeMiniIso2(){ svg.selectAll('polyline.building2').style('fill', 'white') svg.selectAll('polyline.building2').style('fill-opacity', '0') svg.selectAll('image.big2').remove() } p.enter().append("polyline") .data(isobuild3) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class', 'building3') .attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", 'white') .style('fill-opacity','0') .style("stroke-width", '1') .style('stroke-opacity', '0.3') .style("stroke", 'red') .style('stroke-dasharray', '1 0') .on("mouseover", addMiniIso3) .on("mouseout", removeMiniIso3) function addMiniIso3(event,d){ svg.selectAll('polyline.building3').style('fill', 'red') svg.selectAll('polyline.building3').style('fill-opacity', '1') svg//add image .append("image") //appends path to data .attr('class', 'big3') .attr('width','605px') .attr('x', 1192) .attr("y", 138) .attr('xlink:href', image8) } function removeMiniIso3(){ svg.selectAll('polyline.building3').style('fill', 'white') svg.selectAll('polyline.building3').style('fill-opacity', '0') svg.selectAll('image.big3').remove() } p.enter().append("polyline") .data(isobuild4) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class', 'building4') .attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", 'white') .style('fill-opacity','0') .style("stroke-width", '1') .style('stroke-opacity', '0.3') .style("stroke", 'red') .style('stroke-dasharray', '1 0') .on("mouseover", addMiniIso4) .on("mouseout", removeMiniIso4) function addMiniIso4(event,d){ svg.selectAll('polyline.building4').style('fill', 'red') svg.selectAll('polyline.building4').style('fill-opacity', '1') svg//add image .append("image") //appends path to data .attr('class', 'big4') .attr('width','575px') .attr('x', 1202) .attr("y", 148) .attr('xlink:href', image9) } function removeMiniIso4(){ svg.selectAll('polyline.building4').style('fill', 'white') svg.selectAll('polyline.building4').style('fill-opacity', '0') svg.selectAll('image.big4').remove() } } return svg.node(); }2e:T2719,rendersection = { const width = 900,//pixel size of the map height = 700; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var p = svg.selectAll("polyline")//for polylines from rhino var image1 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/f7f4ad19-1e95-4a6a-807a-8b4e575398d2/rendered+iso+-+cropped.png?content-type=image%2Fpng' svg.append("image") .attr('x',7) .attr('y',30) .attr('width','486px') .attr('xlink:href',image1) //polyline(concrete,'class','hatch color','hatch opacity','line opacity','line width','line color') function polyline(data, polylineClass, 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('class', polylineClass) .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) } function staticText(text,xVal,yVal,font,fSize,ffill,fWeight,textClass){ svg .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) .style('fill', ffill) .text(text) } ////////CONCRETE///////////////////////////////////////////////////////////// p.enter().append("polyline") .data(concrete) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','materialconcrete') .attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", 'white') .style('fill-opacity','0') .style("stroke-width", '0.5') .style('stroke-opacity', '1') .style("stroke", 'black') //.style('stroke-dasharray', '4 4') .on("mouseover", addText1) .on("mouseout", removeText1) function addText1(event,d){ svg.selectAll('polyline.materialconcrete').style('fill', '#238443') svg.selectAll('polyline.materialconcrete').style('fill-opacity', '0.7') svg .append('rect') .attr('class','crect') .attr('x','500') .attr('y','270') .attr('width','335') .attr('height','80') .style('fill', '#FFFF0050') .style("stroke-width", '0.3') .style('stroke', 'black') svg .append('rect') .attr('class','crect') .attr('x','500') .attr('y','370') .attr('width','335') .attr('height','80') .style('fill', '#23844330') .style("stroke-width", '0.3') .style('stroke', 'black') staticText('NORMATIVE MATERIAL',510,300,'helvetica','18px','black','bold','CText') staticText('Normative Concrete: 22,650 lbs CO2-eq',510,330,'helvetica','15px','black','regular','CText') staticText('PROPOSED MATERIAL',510,400,'helvetica','18px','black','bold','CText') staticText('ECOPact (Green Concrete): 13,560 lbs CO2-eq',510,430,'helvetica','15px','black','regular','CText') staticText('CARBON DIFFERENCE',510,500,'helvetica','18px','red','bold','CText') staticText('9,090 lbs CO2-eq',510,530,'helvetica','15px','red','regular','CText') } function removeText1(){ svg.selectAll('text.CText').remove() svg.selectAll('polyline.materialconcrete').style('fill', 'white') svg.selectAll('polyline.materialconcrete').style('fill-opacity', '0') svg.selectAll('rect.crect').remove() } /////////STEEL///////////////////////////////////////////////////////////////////// p.enter().append("polyline") .data(steel) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','materialsteel') .attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", 'white') .style('fill-opacity','0') .style("stroke-width", '0.5') .style('stroke-opacity', '1') .style("stroke", 'black') //.style('stroke-dasharray', '4 4') .on("mouseover", addText2) .on("mouseout", removeText2) function addText2(event,d){ svg.selectAll('polyline.materialsteel').style('fill', '#238443') svg.selectAll('polyline.materialsteel').style('fill-opacity', '0.7') svg .append('rect') .attr('class','srect') .attr('x','500') .attr('y','270') .attr('width','293') .attr('height','80') .style('fill', '#FFFF0050') .style("stroke-width", '0.3') .style('stroke', 'black') svg .append('rect') .attr('class','srect') .attr('x','500') .attr('y','370') .attr('width','293') .attr('height','80') .style('fill', '#23844330') .style("stroke-width", '0.3') .style('stroke', 'black') staticText('NORMATIVE MATERIAL',510,300,'helvetica','18px','black','bold','SText') staticText('Normative Steel: 6,305 lbs CO2-eq',510,330,'helvetica','15px','black','regular','SText') staticText('PROPOSED MATERIAL',510,400,'helvetica','18px','black','bold','SText') staticText('Remanufactured Steel: 4,090 lbs CO2-eq',510,430,'helvetica','15px','black','regular','SText') staticText('CARBON DIFFERENCE',510,500,'helvetica','18px','red','bold','SText') staticText('2,215 lbs CO2-eq',510,530,'helvetica','15px','red','regular','SText') } function removeText2(){ svg.selectAll('text.SText').remove() svg.selectAll('polyline.materialsteel').style('fill', 'white') svg.selectAll('polyline.materialsteel').style('fill-opacity', '0') svg.selectAll('rect.srect').remove() } /////////GLASS///////////////////////////////////////////////////////////////////// p.enter().append("polyline") .data(glass) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','materialglass') .attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", 'white') .style('fill-opacity','0') .style("stroke-width", '0.5') .style('stroke-opacity', '1') .style("stroke", 'black') //.style('stroke-dasharray', '4 4') .on("mouseover", addText3) .on("mouseout", removeText3) function addText3(event,d){ svg.selectAll('polyline.materialglass').style('fill', '#238443') svg.selectAll('polyline.materialglass').style('fill-opacity', '0.7') svg .append('rect') .attr('class','grect') .attr('x','500') .attr('y','270') .attr('width','285') .attr('height','80') .style('fill', '#FFFF0050') .style("stroke-width", '0.3') .style('stroke', 'black') svg .append('rect') .attr('class','grect') .attr('x','500') .attr('y','370') .attr('width','285') .attr('height','80') .style('fill', '#23844330') .style("stroke-width", '0.3') .style('stroke', 'black') staticText('NORMATIVE MATERIAL',510,300,'helvetica','18px','black','bold','GText') staticText('Normative Glass: 480 lbs CO2-eq',510,330,'helvetica','15px','black','regular','GText') staticText('PROPOSED MATERIAL',510,400,'helvetica','18px','black','bold','GText') staticText('Remanufactured Glass: 385 lbs CO2-eq',510,430,'helvetica','15px','black','regular','GText') staticText('CARBON DIFFERENCE',510,500,'helvetica','18px','red','bold','GText') staticText('95 lbs CO2-eq',510,530,'helvetica','15px','red','regular','GText') } function removeText3(){ svg.selectAll('text.GText').remove() svg.selectAll('polyline.materialglass').style('fill', 'white') svg.selectAll('polyline.materialglass').style('fill-opacity', '0') svg.selectAll('rect.grect').remove() } /////////BRICK///////////////////////////////////////////////////////////////////// p.enter().append("polyline") .data(brick) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class','materialbrick') .attr("points", function(d) {return d}) //The d attribute defines a path to be drawn, only applies to appended elements .style("fill", 'white') .style('fill-opacity','0') .style("stroke-width", '1') .style('stroke-opacity', '1') .style("stroke", 'black') //.style('stroke-dasharray', '4 4') .on("mouseover", addText4) .on("mouseout", removeText4) function addText4(event,d){ svg.selectAll('polyline.materialbrick').style('fill', '#238443') svg.selectAll('polyline.materialbrick').style('fill-opacity', '0.7') svg .append('rect') .attr('class','brect') .attr('x','500') .attr('y','270') .attr('width','270') .attr('height','80') .style('fill', '#FFFF0050') .style("stroke-width", '0.3') .style('stroke', 'black') svg .append('rect') .attr('class','brect') .attr('x','500') .attr('y','370') .attr('width','270') .attr('height','80') .style('fill', '#23844330') .style("stroke-width", '0.3') .style('stroke', 'black') staticText('NORMATIVE MATERIAL',510,300,'helvetica','18px','black','bold','BText') staticText('Normative Brick: 6,515 lbs CO2-eq',510,330,'helvetica','15px','black','regular','BText') staticText('PROPOSED MATERIAL',510,400,'helvetica','18px','black','bold','BText') staticText('Waste Based Brick: 3,405 lbs CO2-eq',510,430,'helvetica','15px','black','regular','BText') staticText('CARBON DIFFERENCE',510,500,'helvetica','18px','red','bold','BText') staticText('3,110 lbs CO2-eq',510,530,'helvetica','15px','red','regular','BText') } function removeText4(){ svg.selectAll('text.BText').remove() svg.selectAll('polyline.materialbrick').style('fill', 'white') svg.selectAll('polyline.materialbrick').style('fill-opacity', '0') svg.selectAll('rect.brect').remove() } return svg.node(); }2f:T1990,// Copyright 2021-2023 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/treemap function Treemap2(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 = ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837"], // array of colors 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", 10); 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}}); }30:T77b,elevationdrawings = { const width = 1200,//pixel size of the map height = 500; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); var image2show var image22show var image1 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/8d000948-1ef2-485b-a7c1-18908142b8b9/evelation.jpg?content-type=image%2Fjpeg' var image2 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/3377fa7e-f0c9-4985-a8ca-cd71404fa43a/evelation+2.jpg?content-type=image%2Fjpeg' var image3 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/8a279313-2204-4096-9e70-6c4678c721b0/evelation+analysis.jpg?content-type=image%2Fjpeg' var image4 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/5e711b28-f5e0-443a-88d3-ae8121e0c6a6/evelation+analysis+2.jpg?content-type=image%2Fjpeg' var image5 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/df18a06f-beab-4738-93d7-1cdf89f74645/proposed+evelation.jpg?content-type=image%2Fjpeg' var image6 = 'https://images.squarespace-cdn.com/content/603ff93a52ca67517a5da887/c20325df-efd0-4af5-9ee1-fe6cc3ac4bff/proposed+evelation+3.jpg?content-type=image%2Fjpeg' if(elevations=="Original Building"){image2show=image1} if(elevations=="Original Building"){image22show=image2} if(elevations=="Height Analysis"){image2show=image3} if(elevations=="Height Analysis"){image22show=image4} if(elevations=="Proposed Building"){image2show=image5} if(elevations=="Proposed Building"){image22show=image6} console.log(image2show) console.log(image22show) svg.append("image") .attr('x',0) .attr('y',0) .attr('width','600px') .attr('xlink:href',image2show) svg.append("image") .attr('x',600) .attr('y',0) .attr('width','600px') .attr('xlink:href',image22show) return svg.node(); }31:[{"id":"fdb62516e324375d89bf9df9f6d171d01f3e06e07857956ad6a0321b235f698b6eb07f34fdeb998cc92c4eb864edfbec5c4f823a759c76adb95058a09209952e","href":"https://static.observableusercontent.com/files/fdb62516e324375d89bf9df9f6d171d01f3e06e07857956ad6a0321b235f698b6eb07f34fdeb998cc92c4eb864edfbec5c4f823a759c76adb95058a09209952e","name":"isobuild1@1.txt","type":"text/plain","lastModified":1745163602065.722,"size":170},{"id":"430eea32ae5a235671cf89b5c8ec716aa007e1e141d1080df776c3fa8986f77f913e86bb682880715db89d57006df56960961a74125b8db652a657a1b32c0c7d","href":"https://static.observableusercontent.com/files/430eea32ae5a235671cf89b5c8ec716aa007e1e141d1080df776c3fa8986f77f913e86bb682880715db89d57006df56960961a74125b8db652a657a1b32c0c7d","name":"bigbuild1@1.txt","type":"text/plain","lastModified":1745163611324.833,"size":895},{"id":"2f8aed4781ff2c93fd09cbd3e088af1b8b83d3c3ad16f983617278a0503cee6a52481a5a2a067e0f0de8a685474052eb4d4137a7188b3e9f19b96a73f7d18192","href":"https://static.observableusercontent.com/files/2f8aed4781ff2c93fd09cbd3e088af1b8b83d3c3ad16f983617278a0503cee6a52481a5a2a067e0f0de8a685474052eb4d4137a7188b3e9f19b96a73f7d18192","name":"concrete.txt","type":"text/plain","lastModified":1744898065884.322,"size":11992},{"id":"3fec77518922f5ec371cdff71a960902049d38e08082a4422a65a7652b2bdf764a28539fdee0dc2684f3f515bde0cacf2d25f4dd41677d7c520c704d142e5d27","href":"https://static.observableusercontent.com/files/3fec77518922f5ec371cdff71a960902049d38e08082a4422a65a7652b2bdf764a28539fdee0dc2684f3f515bde0cacf2d25f4dd41677d7c520c704d142e5d27","name":"brick.txt","type":"text/plain","lastModified":1744898072216.407,"size":6156},{"id":"59f6e8f97a97872dbdcc5925be576573a7e231a5b45a40be7a387ae54cd8568ff4abd8ba5b9c3bd623202d1ea56882e4076d1a366f1b36d35d0a41ac1bfebf40","href":"https://static.observableusercontent.com/files/59f6e8f97a97872dbdcc5925be576573a7e231a5b45a40be7a387ae54cd8568ff4abd8ba5b9c3bd623202d1ea56882e4076d1a366f1b36d35d0a41ac1bfebf40","name":"glass.txt","type":"text/plain","lastModified":1744898077348.695,"size":536},{"id":"803b92ffe912e73c7740029434bd2dcdf9be4447cdad11e94f2b21bda8a25c2832c1319c15e9505f0f1724b00f366971871c44bad20b79c9d8afc141315c9d69","href":"https://static.observableusercontent.com/files/803b92ffe912e73c7740029434bd2dcdf9be4447cdad11e94f2b21bda8a25c2832c1319c15e9505f0f1724b00f366971871c44bad20b79c9d8afc141315c9d69","name":"steel.txt","type":"text/plain","lastModified":1744898084010.44,"size":2394},{"id":"f4428d636f15d46f2f3af3c144f9409aa1d74a696463400449ae5fa81744e17176367d8d0aa012fc22ce9ea560150265ca9ceb31c053cb540cace9a4846b7a85","href":"https://static.observableusercontent.com/files/f4428d636f15d46f2f3af3c144f9409aa1d74a696463400449ae5fa81744e17176367d8d0aa012fc22ce9ea560150265ca9ceb31c053cb540cace9a4846b7a85","name":"isobuild2.txt","type":"text/plain","lastModified":1745174017347.408,"size":254},{"id":"21ff9a65889e3491915c9dd6b2155821312ae0dcd3068c40c0822932e30ff901f804cd31da7f2e32d3ee5e5d5e395e9cd2626e6ff7e1ebdb4f732100409a0ee4","href":"https://static.observableusercontent.com/files/21ff9a65889e3491915c9dd6b2155821312ae0dcd3068c40c0822932e30ff901f804cd31da7f2e32d3ee5e5d5e395e9cd2626e6ff7e1ebdb4f732100409a0ee4","name":"isobuild3.txt","type":"text/plain","lastModified":1745174017354.484,"size":310},{"id":"897afe31d431764fa424c81dd43797a87fac25d75f6087de3c62a19dbcd13d0823d00acc5612e7eb6dffc0f9dfecee8a63e09361b45dd743585eba65abdab10c","href":"https://static.observableusercontent.com/files/897afe31d431764fa424c81dd43797a87fac25d75f6087de3c62a19dbcd13d0823d00acc5612e7eb6dffc0f9dfecee8a63e09361b45dd743585eba65abdab10c","name":"isobuild4.txt","type":"text/plain","lastModified":1745174017362.684,"size":254},{"id":"964d13e8b96749730628fc0e8c49591e06d30d37bb53de90339f3286688a0b0dc880a1494ce535329c63086595129098418689b5cd08e9ca3453b94e50f49bd5","href":"https://static.observableusercontent.com/files/964d13e8b96749730628fc0e8c49591e06d30d37bb53de90339f3286688a0b0dc880a1494ce535329c63086595129098418689b5cd08e9ca3453b94e50f49bd5","name":"carbon materials - Sheet1 (1).csv","type":"text/csv","lastModified":1744396814951.499,"size":355}] 2b:{"id":"40e627cc5862432f","slug":null,"title":"Kapinga & Annelise Greenpoint Notebook Part 2","thumbnail":"6ef0c28a7b24f69398a1d7737f3b4a45c6fd21c843c23a4fd4b78fb65e7a44cb","access_level":"public","create_time":"$D2025-04-11T18:37:55.871Z","update_time":"$D2025-04-21T14:58:43.206Z","view_time":null,"first_public_time":"$D2025-04-19T14:36:24.459Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"education_2026"},"version":528,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5799f577be8e4821","login":"annelise-eggen","name":"Annelise Eggen","avatar_url":"https://avatars-next.observableusercontent.com/0ac7f499045749e3227e967dadc98360efe3b29a70bec9deba41586004e3b4a9","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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"250ac601b8b23964","slug":"s_25","title":"s_25","owner":{"id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching"}},"type":"notebook","body":{"title":"Kapinga & Annelise Greenpoint Notebook Part 2","cells":[{"id":0,"value":"# Kapinga & Annelise Greenpoint Notebook Part 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"dashboard4 = \n \n html`\n

\n \n

\n ${isometricmap}\n

\n\n

\n ${md`Map`} \n

\n ${md`oom In`} \n

\n\n

\n ${viewof isomap}\n

\n\n

\n ${currrentDash}\n

\n\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"currrentDash = {\n\nvar currentDashVar = TextView\n\n if(isomap==\"Isometric\") {currentDashVar = TextView}\n if(isomap==\"Phase 1\") {currentDashVar = TextView1}\n if(isomap==\"Phase 2\") {currentDashVar = TextView2}\n if(isomap==\"Phase 3\") {currentDashVar = TextView3}\n if(isomap==\"Phase 3 Z\") {currentDashVar = TextView4}\n\n\n return currentDashVar\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof isomap = Inputs.radio([\"Isometric\", \"Phase 1\", \"Phase 2\", \"Phase 3\", \"Phase 3 Z\"], {label: \" \", value: \"Isometric\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"TextView = {\n\n var TextViewVar = html`\n\n

\n ${md`This is an overview of Greenpoint Brooklyn with the building heights and context. Our proposal occurs at a neighborhood wide scale and in order for it to apply to deconstruction and reconstruction buildings must be constructed in a certain period, be in an M1 & Residential combined zones, be a certain size, and be constructed of mainly brick and concrete exteriorally with steel structure.`} \n

\n ${md`Phase 1 highlights the potential buildings for our proposal in red. Selected buildings were constructed in 1930 or 1931 and have a building footpring of 6500 square feet or larger.`} \n

\n ${md`Phase 2 highlights the potential buildings for our proposal in red. This narrowed selection of buildings are located in either a M1-R6A or M1-R6B zone. `} \n

\n ${md`Phase 3 highlights our four selected buildings that we analyzed to construct our proposal. These buildings are the right size, constructed in 1930 or 1931, are one to two stories, are within an M1-R6A or M1-R6B zone, and are made up of brick, concrete, steel, and glass.`} \n

\n ${md`Shown here is a zoomed-in view of our four selected buildings that were analyzed for our proposal.Above each building is the volume of material that can be extracted from deconstruction. The cubes in tan represent cubic feet of concrete, the red represents cubic feet of brick, the dark gray reprsents cubic feet of steel, and the blue represents cubic feet of glass. `} \n

\n\n`\n return TextViewVar\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"isobuild11 = FileAttachment(\"isobuild1@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"bigbuild11 = FileAttachment(\"bigbuild1@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"isobuild2 = FileAttachment(\"isobuild2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"isobuild3 = FileAttachment(\"isobuild3.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"isobuild4 = FileAttachment(\"isobuild4.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"dashboard5 = \n \n html`\n

\n \n

\n ${chart7}\n

\n\n

\n ${rendersection}\n

\n\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof tile = Inputs.select(\n new Map([\n [\"binary\", d3.treemapBinary],\n [\"squarify\", d3.treemapSquarify],\n [\"slice-dice\", d3.treemapSliceDice],\n [\"slice\", d3.treemapSlice],\n [\"dice\", d3.treemapDice]\n ]),\n {label: \"Tiling method\", value: d3.treemapBinary}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"chart7 = Treemap2(carbonmaterials, {\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: 300,\n height: 700\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"carbonmaterials = FileAttachment(\"carbon materials - Sheet1 (1).csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"carbonMaterialsSheet11 = await FileAttachment(\"carbon materials - Sheet1 (1).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"carbonMaterialsSheet11","database":"$undefined"},{"id":12,"value":"import {howto} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"steel = FileAttachment(\"steel.txt\").tsv({array:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"concrete = FileAttachment(\"concrete.txt\").tsv({array:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"brick = FileAttachment(\"brick.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"glass = FileAttachment(\"glass.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"dashboard6 = \n \n html`\n

\n \n

\n ${elevationdrawings}\n

\n\n

\n ${viewof elevations}\n

\n\n

\n ${md`**Waterfront Building: 64 Cayler Street**`} \n

\n\n

\n ${md`**Context Building: 19 Clay Street**`} \n

\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"viewof elevations = Inputs.radio([\"Original Building\",\"Height Analysis\", \"Proposed Building\"], {label: \"\", value:\"Original Building\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2c:"$2b:body"