27:null 28:["$","title",null,{"children":"city vertical extension (backup) - VTX | hower_teaching | Observable"}] 2d:T706b,// --- CANVAS --- chart = { const width = 1700,//pixel size of the map height = 1100; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // Use Mercator projection var projection = d3 .geoMercator()//projection system used .fitSize([width, height]);//out bounding box is here var path = d3.geoPath().projection(projection);//need one of these for each layer from qgis var path2 = d3.geoPath().projection(projection); var path3 = d3.geoPath().projection(projection); var path4 = d3.geoPath().projection(projection); var path5 = d3.geoPath().projection(projection); var availTotal = 0 var isobbl = 'a0' var totalAdditional = 0 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 l = svg.selectAll("line") // --- FILLS --- //color palatte(?): https://www.istockphoto.com/vector/halloween-theme-color-palettes-or-color-schemes-are-trends-combinations-and-palette-gm1414123338-462958721 var HalloOrange = 'rgb(254,176,124)' var HalloYellow = 'rgb(249,206,144)' var HalloBeige = 'rgb(249,241,218)' var HalloGreen = 'rgb(184,209,192)' var HalloPurple = 'rgb(175,151,199)' var HalloPink = 'rgb(236,155,176)' //polyline (data, sfill, sOpac, sW, stroke, dash, tform) for display //lines with fills // if() polyline(residentialLines, HalloOrange, '.5', 2, HalloOrange, '1','none','zoning') polyline(schools, HalloBeige, '1', 2, HalloBeige, '1','none','edu') polyline(commercialLines, HalloPink, '.5', .75, HalloPink, '2 0','none','zoning') polyline(landLines, HalloGreen, '.5', 2, HalloGreen, '1','none','zoning') polyline(busline, 'none', '1', 2, HalloPurple, '2 0','none','transport') polyline(DandB, 'none', '1', 3, HalloOrange, '1','none','transport') polyline(Subway4, 'none', '1', 3, HalloGreen, '1','none','transport') polyline(parkways, 'none', '1', 10, HalloGreen, '1','none','zoning') // --- RHINO LINES --- //polyline (data, sfill, sOpac, sW, stroke, dash, tform) polyline(curbs, 'none', '1', .5, 'rgb(50,50,50)', '2 0','translate(35 15)') polyline(city, 'none', '1', .75, 'rgb(50,50,50)', '2 0','translate(35 15)') polyline(spookyghosts, 'none', '.3', .75, 'rgb(50,50,50)', '2 0','translate(0 0)') //this is the roof data set, w/ bbl etc polylineRoof(troo, 'none', '1', 1.75, 'rgb(50,50,50)', '2 0','translate(0 0)','roofCurves') function polylineRoof(data, sfill, sOpac, sW, stroke, dash, tform, lclass){ g.enter().append("polyline") .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class', lclass) .attr("points", function(d){return d.pts}) //The d attribute defines a path to be drawn, only applies to appended elements .attr('transform',tform) .style("fill", d => color(d.afar)) .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke-dasharray", dash) .style( "stroke", stroke) .on("mouseover", rollover) .on("mouseout", rollout) } // --- CIRCLES --- rCircles(busstops,7,'black',.1,'black','busstops') rCircles(SubwayStops,7,'black',.1,'black','busstops') rCircles(busstops,6,'black',.1,HalloPurple,'busstops') rCircles(SubwayStops,6,'black',.1,HalloOrange,'busstops') // --- ROLLOVER INFO --- staticText('Available FAR:',420,400,'century gothic','20px', 'rgb(50,50,50)','400','start','none','staticdetail','none') staticText('Lot Area:',420,430,'century gothic','20px', 'rgb(50,50,50)','400','start','none','staticdetail','none') staticText('Potential Floors:',420,460,'century gothic','20px', 'rgb(50,50,50)','400','start','none','staticdetail','none') staticText('Potential Units:',420,490,'century gothic','20px', 'rgb(50,50,50)','400','start','none','staticdetail','none') function rollover(event,d){ const outline = d.pts.split(' ').map(pair => pair.split(',').map(Number)); outline.splice(outline.length-1,1); var cen = d3.polygonCentroid(outline) availTotal = availTotal+d.afar //availFAR staticText(Number.parseFloat(d.afar).toFixed(2),655,400,'century gothic','25px','rgb(50,50,50)','500','end','none','rolltext') //lot area staticText(d.lotarea+' sqft\u00B2',663,430,'century gothic','25px','rgb(50,50,50)','400','end','none','rolltext','none') //potential floors staticText(d.afloor,655,460,'century gothic','25px','rgb(50,50,50)','400','end','none','rolltext','none') //residential units staticText(d.aunits,655,490,'century gothic','25px','rgb(50,50,50)','400','end','none','rolltext','none') //address staticText(d.addy,420,370,'century gothic','25px','rgb(50,50,50)','600','start','none','rolltext','none') /* const matchingIso = isoisoiso.filter((isoisoiso) => isoisoiso.bbl == d.bbl);//ok got it, lemme have a look console.log(matchingIso[0].name) isobbl = matchingIso[0].name polyline(matchingIso, 'none', '4', '.5', 'rgb(50,50,50)', '2 0','translate(0 1000) scale(2.5)') const matchingIsoRoofs = isorooiso.filter((isorooiso) => isorooiso.bbl == d.bbl) */ //polyline(isoiso.pts, 'none', '1', '.5', 'rgb(50,50,50)', '2 0','none') //polyline(isoroo.pts, 'none', '1', '.5', 'rgb(50,50,50)', '2 0','none') //polyline([{name:'newroof',pts:d.pts}], 'none', '1', 1.75, 'rgb(50,50,50)', '2 0','translate(0 '+-3.3*(d.afloor)+')') } function rollout(event,d){ svg.selectAll('rect.rollrect').remove() svg.selectAll('text.rolltext').remove() svg.selectAll('line.isoline').remove() svg.selectAll('line.isoisoiso').remove() svg.selectAll('polyline.'+isobbl).remove() } function resetFar(){ availTotal = 0 staticText(Number.parseFloat(availTotal).toFixed(2),160,50,'helvetica','10px','rgb(50,50,50)','400','start','none','fardetail') svg.selectAll('text.fardetail').remove()//remove existing FAR number //polylineRoof(troo, 'none', '1', 1.75, 'rgb(50,50,50)', '2 0','none')//redraws roofs with color gradient //polylineRoof(troo, 'none', '1', 1.75, 'rgb(50,50,50)', '2 0','none') svg.selectAll('polyline.newroof').remove() } // --- LAYOUT --- rect('10','10','800','100','4','4','black','.5','white','.5') //title block rect('415','120','395','210','4','4','black','.5','white','.5')//title block 2 ig rect('820','10','875','320','4','4','black','.5','white','.5') //radio and graphs rect('830','20','220','300','4','4','black','.5','white','.5') //radio segment rect('10','120','395','140','4','4','black','.5','white','.5') //FAR slider rect('10','270','395','60','4','4','black','.5','white','.5') //checkbox staticText('Display:',20,295,'century gothic','17px', 'rgb(50,50,50)','600','start','none','staticdetail','none') rect('10','340','395','400','4','4','black','.5','white','.5') //legend staticText('Legend',20,365,'century gothic','17px', 'rgb(50,50,50)','600','start','none','staticdetail','none') rect('10','750','275','345','4','4','black','.5','white','.5') //iso staticText('Iso',20,775,'century gothic','17px', 'rgb(50,50,50)','600','start','none','staticdetail','none') // --- DEFINED FUNCTIONS --- function staticText(text,xVal,yVal,font,fSize,ffill,fWeight,fAnchor,fstyle,textClass,click){ svg.append('text') .attr('class',textClass) .attr('x',xVal) .attr("y",yVal) .attr("font-size",fSize) .attr("font-family",font) .attr("font-weight",fWeight) .attr("text-anchor",fAnchor) .style('fill', ffill) .style('font-style', fstyle) .text(text) .on("pointerdown", click) } function staticLine(x1l,y1l,x12,y12,sOpac,lstroke,lwidth,ldash,lclass){ svg.append("line") .attr('x1',x1l) .attr('y1',y1l) .attr('x2',x12) .attr('y2',y12) .attr('stroke-opacity', sOpac) .attr('stroke',lstroke) .attr('stroke-width',lwidth) .attr('stroke-dasharray',ldash) .attr('class',lclass) } function polyline(data, sfill, sOpac, sW, stroke, dash,tform,){ g.enter().append("polyline") .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('polyline') .attr('class',function(d){return d.name}) .attr("points", function(d){return d.pts}) //The d attribute defines a path to be drawn, only applies to appended elements .attr('transform',tform) .style("fill", sfill) .style('stroke-opacity',sOpac) .style("stroke-width", sW) .style("stroke-dasharray", dash) .style("stroke", stroke) .style("fill-opacity", 0.25) } function rect(x,y,w,h,rx,ry,stroke,sw,fill,fopac){ svg.append('rect') .attr('x',x) .attr('y',y) .attr('width',w) .attr('height',h) .attr('rx',rx) .attr('ry',ry) .style('stroke',stroke) .style('stroke-width',sw) .style('fill',fill) .style('fill-opacity',fopac) } //rhino circles function rCircles(data,r,stroke,sw,fill,cclass){ c.enter().append('circle') .data(data) //get data to define path .enter() //there are more data than elements, this selects them .append('circle') .attr('class',cclass) .attr('cx',function(d){return d.xval}) .attr('cy',function(d){return d.yval}) .attr('r',r) .style('stroke',stroke) .style('stroke-width',sw) .style('fill',fill) } //observable circles function staticCircle(cx,cy,r,sfill, sOpac, sWidth, station){ svg.append('circle') .attr('class', station) .attr('cx',cx) .attr('cy',cy) .attr('r', r) .attr('fill', sfill) .style('fill-opacity',sOpac) .style("stroke-width", sWidth) } // --- RADIO --- //title staticText('General Demographics',845,45,'century gothic','17px', 'rgb(50,50,50)','600','start','none','staticdetail','none') const fo = svg.append("foreignObject") .attr("x", 835) .attr("y", 55) // position above the gradient .attr("width", 200) .attr("height", 250); const container = document.createElement("div"); container.append(viewof factors); fo.node().appendChild(container); //------------------------------------------------------------------- // --- CHARTS --- //--- AGE ------------------------------------------------------ const tempData = [ { age: "<5", value: 2848 }, { age: "5-9", value: 2970 }, { age: "10-14", value: 3106 }, { age: "15-19", value: 3072 }, { age: "20-24", value: 2970 }, { age: "25-29", value: 3682 }, { age: "30-34", value: 3692 }, { age: "35-39", value: 3037 }, { age: "40-44", value: 3021 }, { age: "45-49", value: 3772 }, { age: "50-54", value: 3919 }, { age: "55-59", value: 3759 }, { age: "60-64", value: 2277 }, { age: "65-69", value: 1682 }, { age: "70-74", value: 1120 }, { age: "75-79", value: 708 }, { age: "80-84", value: 445 }, { age: ">85", value: 386 } ]; const ageOrder = ["<5","5-9","10-14","15-19","20-24","25-29","30-34","35-39","40-44","45-49","50-54","55-59","60-64","65-69","70-74","75-79","80-84",">85"]; const age = Plot.plot({ width: 640, height: 320, marginLeft: 50, marginBottom: 70, x: { label: "Age (Years)", tickRotate: -20, labelOffset: 45, domain: ageOrder}, y: { label: "Population", grid: true }, color: { legend: true, label: "Age" }, marks: [ Plot.barY(tempData, { x: "age", y: "value", fill: HalloOrange }) ] }); // --- INCOME ---------------------------------------------------------- const incomeData = [ { year: 2000, income: 42000 }, { year: 2001, income: 43000 }, { year: 2002, income: 43500 }, { year: 2003, income: 44000 }, ]; /* Optional: define the order so bars appear left-to-right correctly const incomeOrder = ["0-20k","20-40k","40-60k","60-80k","80-100k","100-120k","120k+"]; */ // --- Income Bar Chart --- const incomeChart = Plot.plot({ width: 640, height: 320, marginLeft: 50, marginBottom: 70, x: { label: "Year", tickRotate: -20, labelOffset: 45}, y: { label: "Median Household Income ($)", grid: true }, color: { legend: true, label: "Income" }, marks: [ Plot.line(incomeData, { x: "year", y: "income",stroke: HalloOrange }), Plot.dot(incomeData, { x: "year", y: "income", fill: HalloOrange }) ] }); // --- RACE ----------------------------------------------------------- const raceRaw = [ { race: "White", value: 4193 }, { race: "Hispanic", value: 22900 }, { race: "Black", value: 7354 }, { race: "Asian", value: 4527 }, { race: "Mixed", value: 522 }, { race: "Other", value: 463 } ]; // Compute percentages (so total = 100%) const totalRace = d3.sum(raceRaw, d => d.value); const raceData = raceRaw.map(d => ({ race: d.race, value: (d.value / totalRace) * 100 })); // --- Halloween Colors --- const raceColors = { "White": HalloYellow, "Hispanic": HalloOrange, "Black": HalloGreen, "Asian": HalloPurple, "Mixed": HalloPink, "Other": HalloBeige }; // --- Create Pie Chart with D3 --- function createRacePie(containerDiv) { const width = 640, height = 320, radius = Math.min(width, height) / 2 - 20; // Clear container containerDiv.innerHTML = ""; const svgPie = d3.select(containerDiv) .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", `translate(${width / 2},${height / 2})`); const pie = d3.pie() .value(d => d.value) .sort(null); const arc = d3.arc() .innerRadius(0) .outerRadius(radius); // Draw arcs svgPie.selectAll("path") .data(pie(raceData)) .enter() .append("path") .attr("d", arc) .attr("fill", d => raceColors[d.data.race]) .attr("stroke", "white") .attr("stroke-width", 1) .style("opacity", 0.9); // Add percentage + labels svgPie.selectAll("text") .data(pie(raceData)) .enter() .append("text") .text(d => `${d.data.race} (${d.data.value.toFixed(1)}%)`) .attr("transform", d => `translate(${arc.centroid(d)})`) .style("text-anchor", "middle") .style("font-size", "12px") .style("font-family", "century gothic") .style("fill", "rgb(50,50,50)"); } // --- EDUCATION ---------------------------------------------------------- // data based on 2018 stats const educationRaw = [ { level: "Less than High School", value: 32 }, { level: "High School / Some College", value: 45 }, { level: "College or Higher", value: 23 } ]; const educationColors = { "Less than High School": HalloPurple, "High School / Some College": HalloPink, "College or Higher": HalloYellow }; function createEducationPie(containerDiv) { const width = 640, height = 320, radius = Math.min(width, height) / 2 - 20; // clear container containerDiv.innerHTML = ""; const svgPie = d3.select(containerDiv) .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", `translate(${width / 2},${height / 2})`); const pie = d3.pie() .value(d => d.value) .sort(null); const arc = d3.arc() .innerRadius(0) .outerRadius(radius); // draw arcs svgPie.selectAll("path") .data(pie(educationRaw)) .enter() .append("path") .attr("d", arc) .attr("fill", d => educationColors[d.data.level]) .attr("stroke", "white") .attr("stroke-width", 1) .style("opacity", 0.9); // add percentage + labels svgPie.selectAll("text") .data(pie(educationRaw)) .enter() .append("text") .text(d => `${d.data.level} (${d.data.value}%)`) .attr("transform", d => `translate(${arc.centroid(d)})`) .style("text-anchor", "middle") .style("font-size", "12px") .style("font-family", "century gothic") .style("fill", "rgb(50,50,50)"); } // --- RENT BURDEN (2000–2010) ------------------------------------------------- const rentBurdenData = [ { year: 2000, fivePlus: 42, zeroToFour: 37 }, { year: 2002, fivePlus: 40, zeroToFour: 36 }, { year: 2004, fivePlus: 41, zeroToFour: 38 }, { year: 2006, fivePlus: 43, zeroToFour: 40 }, { year: 2008, fivePlus: 45, zeroToFour: 42 }, { year: 2010, fivePlus: 47, zeroToFour: 44 } ]; function createRentBurdenChart(containerDiv) { const margin = { top: 30, right: 40, bottom: 40, left: 60 }, width = 640 - margin.left - margin.right, height = 320 - margin.top - margin.bottom; containerDiv.innerHTML = ""; const svg = d3.select(containerDiv) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // scales const x = d3.scaleLinear() .domain(d3.extent(rentBurdenData, d => d.year)) .range([0, width]); const y = d3.scaleLinear() .domain([0, 50]) .range([height, 0]); // axes svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); svg.append("g") .call(d3.axisLeft(y).tickFormat(d => d + "%")); // line generators const lineFivePlus = d3.line() .x(d => x(d.year)) .y(d => y(d.fivePlus)) .curve(d3.curveMonotoneX); const lineZeroToFour = d3.line() .x(d => x(d.year)) .y(d => y(d.zeroToFour)) .curve(d3.curveMonotoneX); // draw lines svg.append("path") .datum(rentBurdenData) .attr("fill", "none") .attr("stroke", HalloOrange) .attr("stroke-width", 3) .attr("d", lineFivePlus); svg.append("path") .datum(rentBurdenData) .attr("fill", "none") .attr("stroke", HalloPurple) .attr("stroke-width", 3) .attr("d", lineZeroToFour); // labels svg.append("text") .attr("x", width / 2) .attr("y", height + margin.bottom - 5) .attr("text-anchor", "middle") .style("font-family", "century gothic") .style("font-size", "12px") .text("Year"); svg.append("text") .attr("x", -height / 2) .attr("y", -40) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .style("font-family", "century gothic") .style("font-size", "12px") .text("Rent Burden (%)"); // legend const legend = svg.append("g") .attr("transform", `translate(${width - 140},10)`); legend.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 12) .attr("height", 12) .attr("fill", HalloOrange); legend.append("text") .attr("x", 20) .attr("y", 10) .style("font-family", "century gothic") .style("font-size", "12px") .text("5+ Years"); legend.append("rect") .attr("x", 0) .attr("y", 20) .attr("width", 12) .attr("height", 12) .attr("fill", HalloPurple); legend.append("text") .attr("x", 20) .attr("y", 30) .style("font-family", "century gothic") .style("font-size", "12px") .text("0–4 Years"); } // --- ForeignObject container for charts --- DONT EDIT const chartFO = svg.append("foreignObject") .attr("x", 1050) .attr("y", 20) .attr("width", 640) .attr("height", 300); const chartDiv = document.createElement("div"); chartFO.node().appendChild(chartDiv); // --- Radio button listener --- viewof factors.addEventListener("input", () => { // Clear previous chart chartDiv.innerHTML = ""; // Append chart based on selection if (viewof factors.value === "Age") { chartDiv.appendChild(age); } else if (viewof factors.value === "Income") { chartDiv.appendChild(incomeChart); } else if (viewof factors.value === "Race") { createRacePie(chartDiv); } else if (viewof factors.value === "Education Level") { createEducationPie(chartDiv); } else if (viewof factors.value === "Rent Burden"){ createRentBurdenChart(chartDiv); } }); //------------------------------------------------------------------- // Create a group element in your existing SVG //var plotGroup = svg.append("g") //.attr("transform", "translate(1050, 20)"); // Adjust these values to position your plot // Append the Observable Plot to the group element /* if(factors=="tempData"){ var plotGroup = svg.append("g") .attr("transform", "translate(1050, 20)"); plotGroup.node().appendChild(plotSvg); } if(factors=="Income"){ var plotGroup = svg.append("g") .attr("transform", "translate(1050, 20)"); plotGroup.node().appendChild(plotSvg2); //inputs line chart 2 }*/ // --- LEGEND --- // legend checkbox const fo9 =svg.append("foreignObject") .attr("x", 20) .attr("y", 300) // position above the gradient .attr("width", 600) .attr("height", 250); const container2 = document.createElement("div"); container2.append(viewof factors1); // style radios and checkboxes const style = document.createElement("style"); style.textContent = ` input[type="radio"], input[type="checkbox"] { accent-color: rgb(254,176,124); } `; container2.appendChild(style); fo9.node().appendChild(container2); //legend itself // rect(x,y,w,h,rx,ry,stroke,sw,fill,fopac) // staticText(text,xVal,yVal,font,fSize,ffill,fWeight,fAnchor,fstyle,textClass,click) rect(49,389,22,22,5,5,1,'black','black',1) rect(50,390,20,20,5,5,1,'black',HalloOrange,1) //resid staticText('= Residential', 80, 410, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') rect(49,429,22,22,5,5,1,'black','black',1) rect(50,430,20,20,5,5,1,'black',HalloPink,1) //comm staticText('= Commercial', 80, 450, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') rect(49,469,22,22,5,5,1,'black','black',1) rect(50,470,20,20,5,5,1,'black',HalloGreen,1) //park staticText('= Green Space', 80, 490, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') rect(49,689,22,22,5,5,1,'black','black',1) rect(50,690,20,20,5,5,1,'black',HalloBeige,1) //school staticText('= Schools', 80, 710, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') staticLine('25','510','390','510','.8','black','1','none','legendline') staticCircle(60,535,8,'black', 1, 1, 'none') //bus HalloPurple staticCircle(60,535,7,HalloPurple, 1, 1, 'none') staticText('= Bus Stops', 80, 542, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') staticLine(50,563,70,563,3,HalloPurple,3,'none','buslegend') staticText('= Bus Route', 80, 571, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') staticCircle(60,591,8,'black', 1, 1, 'none') //train HalloOrange, 4 HalloBeige staticCircle(60,591,7,HalloOrange, 1, 1, 'none') staticText('= Train Stations', 80, 598, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') staticLine(50,619,70,619,3,HalloOrange,3,'none','trainlegend') staticText('= D and R Trains', 80, 627, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') staticLine(50,647,70,647,3,HalloGreen,3,'none','trainlegend') staticText('= 4 Train', 80, 655, 'century gothic','25px','rgb(50,50,50)','400','start','none','none','none') staticLine('25','670','390','670','.8','black','1','none','legendline') // --- FAR SLIDER --- const foFAR = svg.append("foreignObject") .attr("x", 430) .attr("y", 170) .attr("width", 370) .attr("height", 80); const containerFAR = document.createElement("div"); containerFAR.style.display = "flex"; containerFAR.style.flexDirection = "column"; containerFAR.style.alignItems = "center"; containerFAR.style.justifyContent = "center"; containerFAR.style.height = "100%"; containerFAR.style.gap = "5px"; const label = document.createElement("label"); label.textContent = "Floor Area Ratio (FAR)"; label.style.fontFamily = "century gothic"; label.style.fontSize = "15px"; label.style.color = "rgb(50,50,50)"; label.style.fontWeight = "600"; const slider = document.createElement("input"); slider.type = "range"; slider.min = "0"; slider.max = "5"; slider.step = "0.2"; slider.value = "5"; slider.style.width = "90%"; const val = document.createElement("span"); val.textContent = slider.value; val.style.fontFamily = "century gothic"; val.style.fontSize = "14px"; val.style.color = "rgb(50,50,50)"; containerFAR.append(label, slider, val); foFAR.node().appendChild(containerFAR); svg.selectAll('polyline.roofCurves').remove() var filteredCurves = troo.filter(troo => troo.afar < slider.value); polylineRoof(filteredCurves, 'none', '1', 1.75, 'rgb(50,50,50)', '2 0','translate(35 15)','roofCurves') totalAdditional = 0 for (let i = 0; i < filteredCurves.length; i++) { totalAdditional = totalAdditional + filteredCurves[i].aunits } updateFAR(slider.value);//this will run the function when the notebook loads // --- test --- function updateFAR(value) { // remove any old “filtered” layers first svg.selectAll("polyline.filtered").remove(); // show the FAR number dynamically svg.selectAll("text.fardetail").remove(); staticText( `FAR ≤ ${Number.parseFloat(value).toFixed(1)}`, 575, 155, 'century gothic', '18px', 'rgb(50,50,50)', '600', 'start', 'none', 'fardetail' ); svg.selectAll('text.additionalUnits').remove() staticText(`Total Units: ${totalAdditional}`,615,290,'century gothic','27px', 'rgb(50,50,50)','600','middle','none','additionalUnits','none') /* filter roof polygons below the slider value const filtered = bottomleftroofs.filter(d => parseFloat(d.afar) <= value); // recolor those polygons to highlight them g.enter() .append("polyline") .data(filtered) .enter() .append('polyline') .attr('class', 'filtered') .attr("points", d => d.pts) .attr('transform', 'translate(35 15)') .style("fill", d => color(d.afar)) .style('stroke-opacity', 0.9) .style("stroke-width", 2) .style("stroke", "rgb(80,80,80)") .style("fill-opacity", 0.8); */ } // --- test 2 --- slider.addEventListener("input", () => { val.textContent = slider.value; console.log(slider.value) //this is how we switch out roofs that have far less than slider value svg.selectAll('polyline.roofCurves').remove() var filteredCurves = troo.filter(troo => troo.afar < slider.value); polylineRoof(filteredCurves, 'none', '1', 1.75, 'rgb(50,50,50)', '2 0','translate(35 15)','roofCurves') totalAdditional = 0 for (let i = 0; i < filteredCurves.length; i++) { totalAdditional = totalAdditional + filteredCurves[i].aunits } updateFAR(slider.value); }); //title staticText('NORWOOD, BRONX',30,87,'century gothic','80px','rgb(50,50,50)','600','start','none','staticdetail','none') svg.selectAll("circle").raise(); return svg.node(); }2e:T732,// --- RADIO --- viewof factors = { // 1) create an SVG element const svg = d3.select(DOM.svg(400, 400)) .attr("viewBox", [0, 0, 800, 800]) .style("width", "100%"); // 2) helper to draw rounded rects function makeRect(x, y, w, h, fill, stroke, strokeWidth, className) { svg.append("rect") .attr("class", className) .attr("x", x) .attr("y", y) .attr("rx", 15) .attr("width", w) .attr("height", h) .attr("fill", fill) .attr("stroke", stroke) .attr("stroke-width", strokeWidth); } // 3) build the form const form = document.createElement("form"); form.style.display = "flex"; form.style.flexDirection = "column"; form.style.gap = "10px"; const options = [ "Age", "Income", "Race", "Education Level", "Rent Burden" ]; let currentValue = ""; // default selection for (const option of options) { const label = document.createElement("label"); label.style.display = "flex"; label.style.alignItems = "center"; label.style.gap = "5px"; label.style.color = "black"; label.style.fontWeight = "400"; label.style.fontFamily = "Century Gothic"; const input = document.createElement("input"); input.type = "radio"; input.name = "factors"; input.value = option; input.checked = false; input.addEventListener("change", () => { form.value = option; form.dispatchEvent(new CustomEvent("input")); }); label.appendChild(input); label.appendChild(document.createTextNode(" " + option)); form.appendChild(label); } // 4) draw your rectangle (adjust coords/sizes as needed) //makeRect(220, 1260, 325, 390, "rgba(255,255,255,0.9)", "black", 3, "myRect"); // 5) initialize .value and return the form form.value = currentValue; return form; }2f:T72c,// --- CHECKBOX --- viewof factors1 = { // 1) create an SVG element const svg = d3.select(DOM.svg(600, 400)) .attr("viewBox", [0, 0, 800, 800]) .style("width", "100%"); // 2) helper to draw rounded rects function makeRect(x, y, w, h, fill, stroke, strokeWidth, className) { svg.append("rect") .attr("class", className) .attr("x", x) .attr("y", y) .attr("rx", 15) .attr("width", w) .attr("height", h) .attr("fill", fill) .attr("stroke", stroke) .attr("stroke-width", strokeWidth); } // 3) build the form const form = document.createElement("form"); form.style.display = "flex"; form.style.flexDirection = "bar"; form.style.gap = "10px"; const options = [ "Zoning", "Transportation", "Schools" ]; let currentValue = ""; // default selection for (const option of options) { const label = document.createElement("label"); label.style.display = "flex"; label.style.alignItems = "center"; label.style.gap = "5px"; label.style.color = "black"; label.style.fontWeight = "400"; label.style.fontFamily = "Century Gothic"; const input = document.createElement("input"); input.type = "checkbox"; input.name = "factors"; input.value = option; input.checked = option === currentValue; input.addEventListener("change", () => { form.value = option; form.dispatchEvent(new CustomEvent("input")); }); label.appendChild(input); label.appendChild(document.createTextNode(" " + option)); form.appendChild(label); } // 4) draw your rectangle (adjust coords/sizes as needed) //makeRect(220, 1260, 325, 390, "rgba(255,255,255,0.9)", "black", 3, "myRect"); // 5) initialize .value and return the form form.value = currentValue; return form; }30:[{"id":"890c6be4df9dd9edc12a09626a5e29a47f9cf31e7b151ffb914a4c12bb476ba3102f22ea954d99a7315e88bda4aaed08afc456af0ca28de2780e44c29453c3c5","href":"https://static.observableusercontent.com/files/890c6be4df9dd9edc12a09626a5e29a47f9cf31e7b151ffb914a4c12bb476ba3102f22ea954d99a7315e88bda4aaed08afc456af0ca28de2780e44c29453c3c5","name":"10-15pluto_import_ver3.geojson","type":"application/geo+json","lastModified":1760991700502.496,"size":17059838},{"id":"9c754cec6e8212fba81e9627b1f0e6a78d67c74df954c44e47e85ad0f06c81b820692e1a973f97883b6e935055e10cbfd9707c0c75ee2cff8d8b729efef2986a","href":"https://static.observableusercontent.com/files/9c754cec6e8212fba81e9627b1f0e6a78d67c74df954c44e47e85ad0f06c81b820692e1a973f97883b6e935055e10cbfd9707c0c75ee2cff8d8b729efef2986a","name":"iso_test_iso.txt","type":"text/plain","lastModified":1760991700502.496,"size":18786},{"id":"37aa12543d6893d1b97f7bad35f81b6c47fb592b98f8cd7569665f5e6d414c556080383d57b9ecbfa2b69aa873d0b7423c6e7eb1d8531579e9a39539f2b4252e","href":"https://static.observableusercontent.com/files/37aa12543d6893d1b97f7bad35f81b6c47fb592b98f8cd7569665f5e6d414c556080383d57b9ecbfa2b69aa873d0b7423c6e7eb1d8531579e9a39539f2b4252e","name":"iso_test_roo.txt","type":"text/plain","lastModified":1760991700502.496,"size":4302},{"id":"affcc12abce885228f28f15064965a67ae46f77ab2ab01cb6e6a424c8edfac42f1ca598bd709d677106c861b79ed4075e9c81080ceef7ce65e4da58c3c97930b","href":"https://static.observableusercontent.com/files/affcc12abce885228f28f15064965a67ae46f77ab2ab01cb6e6a424c8edfac42f1ca598bd709d677106c861b79ed4075e9c81080ceef7ce65e4da58c3c97930b","name":"ghosty.txt","type":"text/plain","lastModified":1760991700502.496,"size":3646812},{"id":"8976bbd5ae3cd050182135b22127b394d3dfd9575c6eafb9793e0f286b797aadd126fdd4e0c6787ddb0073d44d42a6940244d5b981e07c8bd0db3751c0a52792","href":"https://static.observableusercontent.com/files/8976bbd5ae3cd050182135b22127b394d3dfd9575c6eafb9793e0f286b797aadd126fdd4e0c6787ddb0073d44d42a6940244d5b981e07c8bd0db3751c0a52792","name":"commercial.txt","type":"text/plain","lastModified":1760991700502.496,"size":8456},{"id":"bc84dda0a626a0929fa1d3688487381f28ed9b8c5694055be07aad0a1b75d8006ab0fa8cf1836fb48c2c1455097ac2e2123412f0ad716fc99eae3f837db452f5","href":"https://static.observableusercontent.com/files/bc84dda0a626a0929fa1d3688487381f28ed9b8c5694055be07aad0a1b75d8006ab0fa8cf1836fb48c2c1455097ac2e2123412f0ad716fc99eae3f837db452f5","name":"Subway4.txt","type":"text/plain","lastModified":1760991700502.496,"size":4776},{"id":"d3a6afeb38167adb4956c07a32840025840a94c77fb92ca2329a82dc95f53ca15a227d308130153ed7455960473201ac7ac66d0fd77f16e53de4cd2fd9201997","href":"https://static.observableusercontent.com/files/d3a6afeb38167adb4956c07a32840025840a94c77fb92ca2329a82dc95f53ca15a227d308130153ed7455960473201ac7ac66d0fd77f16e53de4cd2fd9201997","name":"busline.txt","type":"text/plain","lastModified":1760991700502.496,"size":38688},{"id":"e43ab92d14b47579998a6914935574926126778ae01dc4a97e77cdad664eacc88caa4006fcabe5ac5e20d0ebfa21b4632734728dce7d3f7188d3116edff04de4","href":"https://static.observableusercontent.com/files/e43ab92d14b47579998a6914935574926126778ae01dc4a97e77cdad664eacc88caa4006fcabe5ac5e20d0ebfa21b4632734728dce7d3f7188d3116edff04de4","name":"school.txt","type":"text/plain","lastModified":1760991700502.496,"size":2476},{"id":"f80bb26255b9a145ba3beb49bc69d23ac6afe1e196dd5be92566a1a0f8e06cfbdb355c1358c6aa1cfaed26fb961871fb5cab91f87d0a825a1ad3c3b5a5d2b621","href":"https://static.observableusercontent.com/files/f80bb26255b9a145ba3beb49bc69d23ac6afe1e196dd5be92566a1a0f8e06cfbdb355c1358c6aa1cfaed26fb961871fb5cab91f87d0a825a1ad3c3b5a5d2b621","name":"residential.txt","type":"text/plain","lastModified":1760991700502.496,"size":10922},{"id":"2c959a77fd3d39f2dde4a01ac46bd86e6795f07d9e00692d7632c63428e27cd6adea9b5ce33996ddd5b4b1c626a81b90e951ccaa007ef19b143db0a2e52211c5","href":"https://static.observableusercontent.com/files/2c959a77fd3d39f2dde4a01ac46bd86e6795f07d9e00692d7632c63428e27cd6adea9b5ce33996ddd5b4b1c626a81b90e951ccaa007ef19b143db0a2e52211c5","name":"SubwayDandB.txt","type":"text/plain","lastModified":1760991700502.496,"size":6154},{"id":"1709544468e9591ebb0e1c731e197e63ce889b060a27509784ebf969123a1f6a5b83ab1b2ae502e79c2e98a98db8e7a13bb499372bf624aeee5a5ea77d6c29c2","href":"https://static.observableusercontent.com/files/1709544468e9591ebb0e1c731e197e63ce889b060a27509784ebf969123a1f6a5b83ab1b2ae502e79c2e98a98db8e7a13bb499372bf624aeee5a5ea77d6c29c2","name":"roo_final@2.txt","type":"text/plain","lastModified":1760991700502.496,"size":166314},{"id":"1709544468e9591ebb0e1c731e197e63ce889b060a27509784ebf969123a1f6a5b83ab1b2ae502e79c2e98a98db8e7a13bb499372bf624aeee5a5ea77d6c29c2","href":"https://static.observableusercontent.com/files/1709544468e9591ebb0e1c731e197e63ce889b060a27509784ebf969123a1f6a5b83ab1b2ae502e79c2e98a98db8e7a13bb499372bf624aeee5a5ea77d6c29c2","name":"roo_final@1.txt","type":"text/plain","lastModified":1760991700502.496,"size":166314},{"id":"240abeaea5d4c95f2afbdb3a31db61d4f3b0a2fda709a9b6cb90e43d8418edf8799acd7e4c78145d2ce45b8b9fb4a06d9a2c072a6017c2ea4896ab04936ffcc7","href":"https://static.observableusercontent.com/files/240abeaea5d4c95f2afbdb3a31db61d4f3b0a2fda709a9b6cb90e43d8418edf8799acd7e4c78145d2ce45b8b9fb4a06d9a2c072a6017c2ea4896ab04936ffcc7","name":"subwaystops@4.txt","type":"text/plain","lastModified":1760991700502.496,"size":432},{"id":"480134bb770f5bac07e9aef7ff1f04c906a81876c3b31db243181f1d1ee9c8e0a5c0570e7867a3fa0089bd12b6619ac49628e5b3974a518369dd15076c2c753c","href":"https://static.observableusercontent.com/files/480134bb770f5bac07e9aef7ff1f04c906a81876c3b31db243181f1d1ee9c8e0a5c0570e7867a3fa0089bd12b6619ac49628e5b3974a518369dd15076c2c753c","name":"parkway@1.txt","type":"text/plain","lastModified":1760991700502.496,"size":6918},{"id":"3249ce2a4f9cc41b9919a6ed768455e11d950c25d6c8df7a0af416977a8cce6540306a03cdbf218c6ad0c302c834c85a37a5ea4c4e0ee3449594de164885a45d","href":"https://static.observableusercontent.com/files/3249ce2a4f9cc41b9919a6ed768455e11d950c25d6c8df7a0af416977a8cce6540306a03cdbf218c6ad0c302c834c85a37a5ea4c4e0ee3449594de164885a45d","name":"busstops@6.txt","type":"text/plain","lastModified":1760991700502.496,"size":1872},{"id":"772d4b8aeaf30c555a2b7a8de0b826abb9412f17a170af06c43ec75ae76ffcc1c28d4854d78cd35d09587e9a6b91f3f4eee2a2ebd44fc93a6b5f42d62ba7eb13","href":"https://static.observableusercontent.com/files/772d4b8aeaf30c555a2b7a8de0b826abb9412f17a170af06c43ec75ae76ffcc1c28d4854d78cd35d09587e9a6b91f3f4eee2a2ebd44fc93a6b5f42d62ba7eb13","name":"city@5.txt","type":"text/plain","lastModified":1760991700502.496,"size":1533221},{"id":"6c8884cfb5957cd42209e7bcaf54d19545e0e2553b73277a9d748204273e07c452649d8c248f895698835826d3c9f9aace8d7cba7fb9233115c49bbbc9874c44","href":"https://static.observableusercontent.com/files/6c8884cfb5957cd42209e7bcaf54d19545e0e2553b73277a9d748204273e07c452649d8c248f895698835826d3c9f9aace8d7cba7fb9233115c49bbbc9874c44","name":"norwood_curbs2@1.txt","type":"text/plain","lastModified":1760991700502.496,"size":411838},{"id":"91ff3fb50c713b180a80f1de8cbb65f11400ef11c20d3ef937427a0e1547600bf1679956c4fca12b631c61cb6f681dfdeed6f8621507e216d92edcc55ea72712","href":"https://static.observableusercontent.com/files/91ff3fb50c713b180a80f1de8cbb65f11400ef11c20d3ef937427a0e1547600bf1679956c4fca12b631c61cb6f681dfdeed6f8621507e216d92edcc55ea72712","name":"tguan_roof2.txt","type":"text/plain","lastModified":1760991700502.496,"size":41048},{"id":"ad202b524cfccf7b52ae8cba96e41c296d8b6d11a729e97e68e055e044aa759db539ffec46280b568ff524f80b8128fac7eb5f4b1a5fa8e350d31b90a55afa7e","href":"https://static.observableusercontent.com/files/ad202b524cfccf7b52ae8cba96e41c296d8b6d11a729e97e68e055e044aa759db539ffec46280b568ff524f80b8128fac7eb5f4b1a5fa8e350d31b90a55afa7e","name":"roofs@5.txt","type":"text/plain","lastModified":1760991700502.496,"size":3332},{"id":"0ca04b5a481ce66f574f8e054a69169d2b88936a5f26d04a05a8250a4aee3b061742c9747d0443a02978251f13ec9ecd6c298a096105650aad6cf6ab0ba1c51b","href":"https://static.observableusercontent.com/files/0ca04b5a481ce66f574f8e054a69169d2b88936a5f26d04a05a8250a4aee3b061742c9747d0443a02978251f13ec9ecd6c298a096105650aad6cf6ab0ba1c51b","name":"land@2.txt","type":"text/plain","lastModified":1760991700502.496,"size":25019}] 2b:{"id":"794414f23c260e82","slug":null,"title":"city vertical extension (backup) - VTX","thumbnail":"efbb3ce236526aee4c6df5919afba27213b95bd8821942ab6b4004657d673d52","access_level":"public","create_time":"$D2025-10-20T20:21:40.502Z","update_time":"$D2025-10-22T16:58:50.154Z","view_time":null,"first_public_time":"$D2025-10-22T16:58:01.174Z","has_unpublished_edits":null,"fork":{"id":"080e3912cbec34d1","slug":null,"title":"Norwood, Bronx - VTX","owner":{"id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"education_2026"},"version":3527,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc9846765345dfe5","login":"vivi-li","name":"Vivi Li","avatar_url":"https://avatars-next.observableusercontent.com/8125409e19c1d9ba71f5152cd1da81fd983724c955e02d5dbca95b1c36815614","tier":null}],"members":[{"type":"team","id":"0db7c8d181c130e4","login":"howerteaching","name":"hower_teaching","avatar_url":"https://avatars-next.observableusercontent.com/c84680807127542e6943c4528de050d301ffcd4bf3ba76bd86d9acdec0397b29","tier":"education_2026","role":"editor"},{"type":"individual","id":"fc9846765345dfe5","login":"vivi-li","name":"Vivi Li","avatar_url":"https://avatars-next.observableusercontent.com/8125409e19c1d9ba71f5152cd1da81fd983724c955e02d5dbca95b1c36815614","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"city vertical extension (backup) - VTX","cells":[{"id":762,"value":"# city vertical extension (backup) - VTX","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3331,"value":"roo_final1 = FileAttachment(\"roo_final@1.txt\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3252,"value":"school = FileAttachment(\"school.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3299,"value":"schools = rhinoGraphics (school)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3253,"value":"residential = FileAttachment(\"residential.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3295,"value":"residentialLines = rhinoGraphics (residential)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3254,"value":"parkway = FileAttachment(\"parkway@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3292,"value":"parkways = rhinoGraphics (parkway)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3255,"value":"land = FileAttachment(\"land@2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3288,"value":"landLines = rhinoGraphics (land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3257,"value":"subway4 = FileAttachment(\"Subway4.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3285,"value":"Subway4 = rhinoGraphics (subway4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3258,"value":"subwaydandb = FileAttachment(\"SubwayDandB.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3277,"value":"DandB = rhinoGraphics (subwaydandb)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3259,"value":"commercial = FileAttachment(\"commercial.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3268,"value":"commercialLines = rhinoGraphics (commercial)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3167,"value":"buslines = FileAttachment(\"busline.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3169,"value":"busline = rhinoGraphics (buslines)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3105,"value":"subwaystops2 = FileAttachment(\"subwaystops@4.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3107,"value":"SubwayStops = rhinoCircles(subwaystops2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3082,"value":"busstopstxt = FileAttachment(\"busstops@6.txt\").tsv({array:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3088,"value":"busstops = rhinoCircles(busstopstxt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3084,"value":"function rhinoCircles(t){\n\n\n let linesData = []\n let rsplit = []\n for(let i = 0; i < t.length; i=i+2){\n\n //pfill, pOpac, sOpac, sWght, stroke,pclass,dash\n var lFill='0',fOpac='0',sOpac='0',sWght='0',stroke='none',lClass='none',lDash='0'\nconsole.log(t[i])\n rsplit = t[i][0].split(',')\n\n linesData.push({xval:Number(rsplit[0]),yval:Number(rsplit[1]),name:'a'+t[i+1][0]})\n\n }\n\n\n return linesData\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2619,"value":"top_roof = FileAttachment(\"roo_final@2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3305,"value":"top_roofs1 = FileAttachment(\"roo_final@2.txt\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3248,"value":"top_roofs = FileAttachment(\"roo_final@2.txt\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2621,"value":"toproo = rhinoGraphics(top_roof)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2623,"value":"troo = addPluto(toproo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2385,"value":"iso_test_iso = FileAttachment(\"iso_test_iso.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"isoiso = rhinoGraphics(iso_test_iso)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2397,"value":"isoisoiso = addPluto(isoiso)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2386,"value":"iso_test_roo = FileAttachment(\"iso_test_roo.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2392,"value":"isoroo = rhinoGraphics(iso_test_roo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"isorooiso = addPluto(isoroo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2103,"value":"curbs = rhinoGraphics(norwood_curbs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2101,"value":"norwood_curbs = FileAttachment(\"norwood_curbs2@1.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1885,"value":"color = d3.scaleQuantize([0, 10], d3.schemeReds[9])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1818,"value":"citytxt = FileAttachment(\"city@5.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"city = rhinoGraphics(citytxt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"function rhinoGraphics(t){\n\n\n let linesData = []\n\n for(let i = 0; i < t.length; i=i+2){\n\n //pfill, pOpac, sOpac, sWght, stroke,pclass,dash\n var lFill='0',fOpac='0',sOpac='0',sWght='0',stroke='none',lClass='none',lDash='0'\n\n\n\n linesData.push({pts:t[i][0],name:'a'+t[i+1][0]})\n\n }\n\n\n return linesData\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1976,"value":"roofs2txt = FileAttachment(\"roofs@5.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1979,"value":"roofs2 = rhinoGraphics(roofs2txt)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1862,"value":"proofs = addPluto(roofs2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1853,"value":"function addPluto(p){\n\n var newlist = []\n var filtered\n var matched\n\n for (let i = 0; i < p.length; i++) {\n for (let n = 0; n < pluto_import.features.length; n++) { \n\n if(p[i].name== 'a'+pluto_import.features[n].properties.bblint){\n matched = pluto_import.features[n].properties\n if(matched.AvailFAR<0){matched.AvailFAR = 0}\n\n newlist.push({pts : p[i].pts, name:'a'+matched.bblint ,bbl : 'a'+matched.bblint, afar:matched.AvailFAR, residFar:matched.ResidFAR, lotarea:matched.LotArea, afloor : matched.AvailFloor, aunits : matched.AvailUnits, addy:matched.Address})\n }\n\n \n }\n }\n\n return newlist\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2055,"value":"pluto_import = FileAttachment(\"10-15pluto_import_ver3.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2121,"value":"tguan_roo = FileAttachment(\"tguan_roof2.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2131,"value":"leftroof = rhinoGraphics(tguan_roo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2123,"value":"bottomleftroofs = addPluto(leftroof)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2837,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2850,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3126,"value":"ghosts = FileAttachment(\"ghosty.txt\").tsv({array:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3131,"value":"spookyghosts = rhinoGraphics(ghosts)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"