chart = {
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()
}