Public
Edited
Apr 4
Insert cell
# FIDI Conversion Tool
Insert cell
st3 = FileAttachment("square_test3.txt").tsv({array:true})
Insert cell
square_test = FileAttachment("square_test.txt").tsv({array:true})
Insert cell
clickID
Insert cell
Insert cell
chart = {
//chart width and height
const
width = 5000,
height = 2500
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height])
const g = svg.append("g").attr("id", "paths")



const interactablePolylines = svg
.selectAll("polyline.interactable")
.data(outlines)
.enter()
.append("polyline")
.attr("class", "interactable")
.attr("points", (d) => d.pts)
.style("stroke", "black")
.style("stroke-width", "2px")
.style("fill", "white")
.on("click", function (event, d) {
polyClick(event, d)
bldgClick(event, d)
})

function createText(svg, x, y, fontSize, textContent) {
svg.append("text")
.attr("x", x)
.attr("y", y)
.attr("class", "Header")
.style("font-size", fontSize)
.style("fill", "black")
.text(textContent)
}

function createPolylines(svg, data, classType, strokeWidth, fillColor, clickHandler = null) {
const polylines = svg.selectAll("polyline." + classType)
.data(data)
.enter()
.append("polyline")
.attr("class", classType)
.attr("points", d => d)
.style("stroke", "black")
.style("fill", "white")
.style("stroke-width", strokeWidth)
.style("fill", fillColor);
}
createPolylines(svg, newfidioutlines, "outline", "3px", "white")
createPolylines(svg, detaillinesall, "detail", ".35px", "none")
createPolylines(svg, moneydetaillines_final, "detail", ".35px", "none")
createPolylines(svg, mainoutlines, "main", "3px", "none")
createPolylines(svg, border, "main", "7px", "none")

createText(svg, 975, 100, "75px", "FiDi Before:")
createText(svg, 3500, 100, "75px", "Proposed FiDi:")

//POLYHOVERIN FOR TEXT DATA
function polyClick(event, d) {
svg.selectAll("tspan.bldgText").remove()

const text = svg
.append("text")
.attr("x", 300) // Set the fixed x position
.attr("y", 1600) // Set the fixed y position
.style("stroke", "black")
.style("font-size", "45px")
.style("stroke-width", "1px")
.style("fill", "black")
.attr("class", "hoverText")

// Split your text into lines and create a <tspan> element for each line.
const bldgText = [
"Address: " + d.ADDY,
"Total Embodied Energy: " + d.TEE,
"Building Type: " + d.TYPE,
"Number of Housing Units: " + d.HU,
"Number of Workers: " + d.NOW,
"Number of Residents: " + d.NOR
]

bldgText.forEach((line, i) => {
text.append("tspan")
.attr("x", 200) // Set the fixed x position
.attr("y", 1600 + i * 70) // Adjust Space (y) position for each line
.attr("class", "bldgText") // Assign the class to the <tspan> element
.text(line)
})

const text2 = svg
.append("text")
.attr("x", 300) // Set the fixed x position
.attr("y", 1600) // Set the fixed y position
.style("stroke", "black")
.style("font-size", "45px")
.style("stroke-width", "1px")
.style("fill", "black")
.attr("class", "hoverText")

// Split your text into lines and create a <tspan> element for each line.
const bldgTextProposed = [
"Address: " + d.ADDY,
"NEW Total Embodied Energy: " + d.NEE,
"NEW Building Type: " + d.NBT,
"NEW Number of Housing Units: " + d.NHU,
"NEW Number of Residents: " + d.NR
]

bldgTextProposed.forEach((line, i) => {
text.append("tspan")
.attr("x", 2400) // Set the fixed x position
.attr("y", 1600 + i * 70) // Adjust Space (y) position for each line
.attr("class", "bldgText") // Assign the class to the <tspan> element
.text(line)
})
}
//POLYHOVERIN FOR BUILDING LINES
function bldgClick(event, d) {
svg.selectAll("text.finesText").remove()
svg.selectAll("polyline.planLines").remove()
svg.selectAll("polyline.hoverBLDG").remove()
svg.selectAll("polyline.hoverBLDG2").remove()
console.log('bldg hover')
var p = svg.selectAll("outlines")

//125 Broad Street Data
if(d.Address =='125BS'){
mutable clickID = 2
createPolylines(svg, bs13, "hoverBLDG", "2px", "none")
createPolylines(svg, bs0, "hoverBLDG", ".25px", "none")
createPolylines(svg, bs115opf, "hoverBLDG2", "2px", "none")
createPolylines(svg, bs115dpf, "hoverBLDG2", ".25px", "none")
}

//115 Broad Street Data
if(d.Address =='115BS'){

mutable clickID = 3
createPolylines(svg, bs12, "hoverBLDG", "2px", "none")
createPolylines(svg, detail115bs, "hoverBLDG", ".25px", "none")
createPolylines(svg, actuallyo, "hoverBLDG2", "2px", "none")
createPolylines(svg, actuallyd, "hoverBLDG2", ".25px", "none")

}
//85 Broad Street Data
if(d.Address =='85BS'){
mutable clickID = 6
createPolylines(svg, bs14, "hoverBLDG", "2px", "none")
createPolylines(svg, detail85bs, "hoverBLDG", ".25px", "none")
createPolylines(svg, bs85opf, "hoverBLDG2", "2px", "none")
createPolylines(svg, bs85dpf, "hoverBLDG2", ".25px", "none")
}

//55 Water Street Data
if(d.Address =='55WS'){

mutable clickID = 1
createPolylines(svg, wsopf, "hoverBLDG2", "2px", "none")
createPolylines(svg, wsdpf, "hoverBLDG2", ".25px", "none")
createPolylines(svg, ws11, "hoverBLDG", "2px", "none")
createPolylines(svg, detail55ws, "hoverBLDG", ".25px", "none")
}
//7 Hanover Square Data

if(d.Address =='7HS'){

mutable clickID = 4
createPolylines(svg, hs11, "hoverBLDG", "2px", "none")
createPolylines(svg, detail7hs, "hoverBLDG", ".25px", "none")
createPolylines(svg, bs125opf, "hoverBLDG2", "2px", "none")
createPolylines(svg, bs125dpf, "hoverBLDG2", ".25px", "none")

}

//1 Water Street Data
if(d.Address =='1WS'){

mutable clickID = 10
createPolylines(svg, ws1, "hoverBLDG", "2px", "none")
createPolylines(svg, detail1ws, "hoverBLDG", ".25px", "none")
createPolylines(svg, ws1opf, "hoverBLDG2", "2px", "none")
createPolylines(svg, ws1dpf, "hoverBLDG2", ".25px", "none")
}
//48 Beaver Street Dataed
if(d.Address =='48BS'){

mutable clickID = 8
createPolylines(svg, bs1, "hoverBLDG", "2px", "none")
createPolylines(svg, detail48bs, "hoverBLDG", ".25px", "none")
createPolylines(svg, bs48opf, "hoverBLDG2", "2px", "none")
createPolylines(svg, bs48dpf, "hoverBLDG2", ".25px", "none")
}

//75 Broad Street Data
if(d.Address =='75BS'){
mutable clickID = 7
createPolylines(svg, bs11, "hoverBLDG", "2px", "none")
createPolylines(svg, detail75bs, "hoverBLDG", ".25px", "none")
createPolylines(svg, bs125actualopf, "hoverBLDG2", "2px", "none")
createPolylines(svg, bs125actualdpf, "hoverBLDG2", ".25px", "none")
}
//1 Coestine Slip Data

if(d.Address =='1CS'){

mutable clickID = 5
createPolylines(svg, cs1, "hoverBLDG", "2px", "none")
createPolylines(svg, detail1cs, "hoverBLDG", ".25px", "none")

}

//1 Hanover Square Data
if(d.Address =='1HS'){

mutable clickID = 9
createPolylines(svg, hs1, "hoverBLDG", "2px", "none")
createPolylines(svg, detail1hs, "hoverBLDG", ".25px", "none")
createPolylines(svg, please1hsd, "hoverBLDG2", ".25px", "none")
createPolylines(svg, please1hso, "hoverBLDG2", "2px", "none")
}
}
return svg.node()
}
Insert cell
border = FileAttachment("border.txt").tsv({array:true})
Insert cell
mutable clickID = 0
Insert cell
EmbodiedEnergyPerPersonOverTime = {

var returnvalue = chartB//this is the apple chart
if(clickID==1){returnvalue = chart55A}
if(clickID==2){returnvalue = chart125A}
if(clickID==3){returnvalue = chart115A}
if(clickID==4){returnvalue = chart7HSA}
if(clickID==5){returnvalue = chart1CSA}
if(clickID==6){returnvalue = chart85BSA}
if(clickID==7){returnvalue = chart75BSA}
if(clickID==8){returnvalue = chart48BSA}
if(clickID==9){returnvalue = chart1HSA}
if(clickID==10){returnvalue = chart1WSA}
return returnvalue

}
Insert cell
CarbonSavings = {

var returnvalue = chartB//this is the apple chart
if(clickID==1){returnvalue = chart5W5C}
if(clickID==2){returnvalue = chart125C}
if(clickID==3){returnvalue = chart115C}
if(clickID==4){returnvalue = chart7HSC}
if(clickID==5){returnvalue = chart1CSC}
if(clickID==6){returnvalue = chart85BSC}
if(clickID==7){returnvalue = chart75BSC}
if(clickID==8){returnvalue = charrt48BSC}
if(clickID==9){returnvalue = chart1HSC}
if(clickID==10){returnvalue = chart1WSC}
return returnvalue
}
Insert cell
CostPerSqF= {

var returnvalue = chartB//this is the apple chart
if(clickID==1){returnvalue = chart55WSD}
if(clickID==2){returnvalue = chart125BSD}
if(clickID==3){returnvalue = chart115BSD}
if(clickID==4){returnvalue = chart7HSD}
if(clickID==5){returnvalue = chart1CSD}
if(clickID==6){returnvalue = chart85BSD}
if(clickID==7){returnvalue = chart75BSD}
if(clickID==8){returnvalue = charrt48BSC}
if(clickID==9){returnvalue = chart1HSD}
if(clickID==10){returnvalue = chart1WSD}
return returnvalue
}
Insert cell
energyrating = FileAttachment("EnergyRating.txt").tsv({array:true})
Insert cell
fillplease = FileAttachment("fillplease.txt").tsv({array:true})
Insert cell
planOutline = FileAttachment("plan outline.txt").tsv({array:true})
Insert cell
plandetail = FileAttachment("plandetail.txt").tsv({array:true})
Insert cell
newStaticData = FileAttachment("new static data.txt").tsv({array:true})
Insert cell
fill = FileAttachment("fill.txt").tsv({array:true})
Insert cell
planoutlines = {

var list = pleaseworkomg

var spreadsheet2 = ESRdata

var cleanLines = []


for (let i = 0; i < list.length-1; i=i+2) {
var id = list[i+1][0]
var idNum = Number(id)

//spreadsheet variables
var Address
var COLOR
var ESR
//looping through spreadsheet
for (let k = 0; k < spreadsheet2.length;k++) {
if(id==spreadsheet2[k].Address){
console.log("match!!!!!!")
Address=spreadsheet2[k].Address
COLOR=spreadsheet2[k].COLOR
ESR=spreadsheet2[k].ESR
}
}
//tying spreadsheet data to var
cleanLines.push({pts:list[i], Address:Address, COLOR:COLOR, ESR:ESR})//add features to our final list of objects
}


return cleanLines

}



Insert cell
pleaseworkomg = FileAttachment("pleaseworkomg.txt").tsv({array:true})
Insert cell
ESRdata = d3.csv(ESR_Link,d3.autoType)
Insert cell
Insert cell
outlines = {

var list = buildingoutlines
var spreadsheet = buildingList
var cleanLines = []
for (let i = 0; i < list.length-1; i=i+2) {
var id = list[i+1][0]
var idNum = String(id) //use this line if your ids are words
//idNum = Number(id) use this line if your ids are numbers

//spreadsheet variables
var Address
var ADDY
var ECS
var MEU
var TEE
var EESQ
var TYPE
var BUILTDATE
var FLOORS
var HU
var GSQFT
var LSQFT
var NOW
var TEC
var NEE
var NBT
var NHU
var NR
var NOR
//looping through spreadsheet
for (let k = 0; k < spreadsheet.length;k++) {
if(idNum==spreadsheet[k].Address){
console.log("match!!!!!!")
Address=spreadsheet[k].Address
ADDY=spreadsheet[k].ADDY
MEU=spreadsheet[k].MEU
ECS=spreadsheet[k].ECS
TEE=spreadsheet[k].TEE
EESQ=spreadsheet[k].EESQ
TYPE=spreadsheet[k].TYPE
BUILTDATE=spreadsheet[k].BUILTDATE
FLOORS=spreadsheet[k].FLOORS
HU=spreadsheet[k].HU
GSQFT=spreadsheet[k].GSQFT
LSQFT=spreadsheet[k].LSQFT
NOW=spreadsheet[k].NOW
TEC=spreadsheet[k].TEC
NEE=spreadsheet[k].NEE
NBT=spreadsheet[k].NBT
NHU=spreadsheet[k].NHU
NR=spreadsheet[k].NR
NOR=spreadsheet[k].NOR
}
}
//tying spreadsheet data to var
cleanLines.push({pts:list[i], Address:idNum, ADDY:ADDY, MEU:MEU, ECS:ECS,TEE:TEE, EESQ:EESQ, TYPE:TYPE, BUILTDATE:BUILTDATE, FLOORS:FLOORS, HU:HU, GSQFT:GSQFT, LSQFT:LSQFT, NOW:NOW, TEC:TEC, NEE:NEE,NBT:NBT,NHU:NHU, NR:NR, NOR:NOR})//add features to our final list of objects
}


return cleanLines
}
Insert cell
Insert cell
buildingList = d3.csv(buildingList_link,d3.autoType)
Insert cell
buildingoutlines = FileAttachment("buildingoutlines.txt").tsv({array:true})
Insert cell
mainoutlines = FileAttachment("mainoutlines.txt").tsv({array:true})
Insert cell
moneyshot_detail_lines = FileAttachment("moneyshot_detail_lines.txt").tsv({array:true})
Insert cell
hs1 = FileAttachment("1HS1.txt").tsv({array:true})
Insert cell
hs01 = FileAttachment("1HS0.txt").tsv({array:true})
Insert cell
bs04 = FileAttachment("75BS0.txt").tsv({array:true})
Insert cell
cs0 = FileAttachment("1CS0.txt").tsv({array:true})
Insert cell
cs1 = FileAttachment("1CS1.txt").tsv({array:true})
Insert cell
bs1 = FileAttachment("48BS1.txt").tsv({array:true})
Insert cell
ws0 = FileAttachment("1WS0.txt").tsv({array:true})
Insert cell
hs0 = FileAttachment("7HS0.txt").tsv({array:true})
Insert cell
bs03 = FileAttachment("48BS0.txt").tsv({array:true})
Insert cell
ws01 = FileAttachment("55WS0@1.txt").tsv({array:true})
Insert cell
bs02 = FileAttachment("85bs0.txt").tsv({array:true})
Insert cell
bs01 = FileAttachment("115BS0.txt").tsv({array:true})
Insert cell
bs0 = FileAttachment("125BS0.txt").tsv({array:true})
Insert cell
bs11 = FileAttachment("75BS1.txt").tsv({array:true})
Insert cell
ws1 = FileAttachment("1WS1.txt").tsv({array:true})
Insert cell
newfidioutlines = FileAttachment("newfidioutlines.txt").tsv({array:true})
Insert cell
bs12 = FileAttachment("115BS1.txt").tsv({array:true})
Insert cell
bs13 = FileAttachment("125BS1.txt").tsv({array:true})
Insert cell
ws11 = FileAttachment("55WS1.txt").tsv({array:true})
Insert cell
hs11 = FileAttachment("7HS1.txt").tsv({array:true})
Insert cell
bs14 = FileAttachment("85BS1.txt").tsv({array:true})
Insert cell
eletric = FileAttachment("eletric.txt").tsv({array:true})
Insert cell
gas = FileAttachment("gas.txt").tsv({array:true})
Insert cell
detail115bs = FileAttachment("detail115BS.txt").tsv({array:true})
Insert cell
detail125bs = FileAttachment("detail125BS.txt").tsv({array:true})
Insert cell
detail1cs = FileAttachment("detail1CS.txt").tsv({array:true})
Insert cell
detail1hs = FileAttachment("detail1HS.txt").tsv({array:true})
Insert cell
detail1ws = FileAttachment("detail1WS.txt").tsv({array:true})
Insert cell
detail48bs = FileAttachment("detail48BS.txt").tsv({array:true})
Insert cell
detail55ws = FileAttachment("detail55WS.txt").tsv({array:true})
Insert cell
detail75bs = FileAttachment("detail75BS.txt").tsv({array:true})
Insert cell
detail7hs = FileAttachment("detail7HS.txt").tsv({array:true})
Insert cell
detail85bs = FileAttachment("detail85BS.txt").tsv({array:true})
Insert cell
moneydetaillines_final = FileAttachment("moneydetaillines_final.txt").tsv({array:true})
Insert cell
staticdatafinal1 = FileAttachment("staticdatafinal@1.txt").tsv({array:true})
Insert cell
Insert cell
FiftyFiveWSEOT = d3.csv(FiftyFiveWSEOT_Link,d3.autoType)
Insert cell
detaillinesall = FileAttachment("detaillinesALL.txt").tsv({array:true})
Insert cell
wsdpf = FileAttachment("55WSdPF.txt").tsv({array:true})
Insert cell
wsopf = FileAttachment("55WSOPF.txt").tsv({array:true})
Insert cell
import {apple as chartB} from "@fleeth/test_import"
Insert cell
import {WaterStreet55A as chart55A} from "@victoria-webb-ws/55waterchart"
Insert cell
import {CarbonSavings as chart5W5C} from "@victoria-webb-ws/55waterchart"
Insert cell
import {BroadStreet125A as chart125A} from "0ab67f300d95c466"
Insert cell
import {BroadStreet125B as chart125B} from "0ab67f300d95c466"
Insert cell
import {BroadStreet125C as chart125C} from "0ab67f300d95c466"
Insert cell
import {BroadStreet115A as chart115A} from "d1cd04f741a89175"
Insert cell
import {BroadStreet115C as chart115C} from "d1cd04f741a89175"
Insert cell
import {BroadStreet115B as chart115B} from "d1cd04f741a89175"
Insert cell
import {HanoverS7A as chart7HSA} from "5813ff3714ccfecc"
Insert cell
import {HanoverS7B as chart7HSB} from "5813ff3714ccfecc"
Insert cell
import {HanoverS7C as chart7HSC} from "5813ff3714ccfecc"
Insert cell
import {CoentiesS1A as chart1CSA} from "c76c94f3f23f4317"
Insert cell
import {CoentiesS1B} from "c76c94f3f23f4317"
Insert cell
import {CoentiesS1C as chart1CSC} from "c76c94f3f23f4317"
Insert cell
import {BroadS85A as chart85BSA} from "4bfe1e68218b8abd"
Insert cell
import {BroadS85B as chart85BSB} from "4bfe1e68218b8abd"
Insert cell
import {BroadS85C as chart85BSC} from "4bfe1e68218b8abd"
Insert cell
import {BroadS75A as chart75BSA} from "579d198b19e6ffa6"
Insert cell
import {BroadS75B as chart75BSB} from "579d198b19e6ffa6"
Insert cell
import {BroadS75C as chart75BSC} from "579d198b19e6ffa6"
Insert cell
import {BeaverS48A as chart48BSA} from "09573031de7bd9ca"
Insert cell
import {BeaverS48B as chart48BSB} from "09573031de7bd9ca"
Insert cell
import {BeaverS48C as charrt48BSC} from "09573031de7bd9ca"
Insert cell
import {HanoverS1A as chart1HSA} from "0a9bb254d05298af"
Insert cell
import {HanoverS1B as chart1HSB} from "0a9bb254d05298af"
Insert cell
import {HanoverS1C as chart1HSC} from "0a9bb254d05298af"
Insert cell
import {WilliamS1A as chart1WSA} from "ca19fd86da675f7f"
Insert cell
import {WilliamS1B as chart1WSB} from "ca19fd86da675f7f"
Insert cell
import {WilliamS1C as chart1WSC} from "ca19fd86da675f7f"
Insert cell
electric2 = FileAttachment("electric2.txt").tsv({array:true})
Insert cell
gas2 = FileAttachment("gas2.txt").tsv({array:true})
Insert cell
gass = FileAttachment("gass.txt").tsv({array:true})
Insert cell
import {CostPerSQF as chart55WSD} from "@victoria-webb-ws/55waterchart"
Insert cell
import {BroadStreet125CPSQF as chart125BSD} from "0ab67f300d95c466"
Insert cell
import {CostperSQFT as chart115BSD} from "d1cd04f741a89175"
Insert cell
import {HanoverS7CPSQF as chart7HSD} from "5813ff3714ccfecc"
Insert cell
import {CostperSQF as chart1CSD} from "c76c94f3f23f4317"
Insert cell
import {CostperSQF as chart85BSD} from "4bfe1e68218b8abd"
Insert cell
import {CostperSQFT as chart75BSD} from "579d198b19e6ffa6"
Insert cell
import {CostperSQFT as chart48BSD} from "09573031de7bd9ca"
Insert cell
import {CostperSQFT as chart1HSD} from "0a9bb254d05298af"
Insert cell
import {csotpersqft as chart1WSD} from "ca19fd86da675f7f"
Insert cell
bs115dpf = FileAttachment("bs115dPF@1.txt").tsv({array:true})
Insert cell
bs115opf = FileAttachment("bs115oPF.txt").tsv({array:true})
Insert cell
bs125dpf = FileAttachment("bs125dPF.txt").tsv({array:true})
Insert cell
bs125opf = FileAttachment("bs125oPF.txt").tsv({array:true})
Insert cell
actuallyo = FileAttachment("115actuallyo.txt").tsv({array:true})
Insert cell
actuallyd = FileAttachment("115actuallyd.txt").tsv({array:true})
Insert cell
bs85opf = FileAttachment("bs85oPF.txt").tsv({array:true})
Insert cell
bs85dpf = FileAttachment("bs85dPF.txt").tsv({array:true})
Insert cell
bs125actualdpf = FileAttachment("bs125ACTUALdPF.txt").tsv({array:true})
Insert cell
bs125actualopf = FileAttachment("bs125ACTUALoPF.txt").tsv({array:true})
Insert cell
ws1dpf = FileAttachment("WS1dPF.txt").tsv({array:true})
Insert cell
ws1opf = FileAttachment("WS1oPF.txt").tsv({array:true})
Insert cell
bs48dpf = FileAttachment("BS48dPF.txt").tsv({array:true})
Insert cell
bs48opf = FileAttachment("BS48oPF.txt").tsv({array:true})
Insert cell
please1hsd = FileAttachment("please1HSd.txt").tsv({array:true})
Insert cell
please1hso = FileAttachment("please1HSo.txt").tsv({array:true})
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more