Public
Edited
Oct 28, 2024
1 fork
2024 fall studio 10/10 - import from rhino - edited
viewof phaseButton = Inputs.radio(["Phase 1", "Phase 2", "Phase 3", "Phase 3.5"], {label: "Building Phase", value:"Phase 1"})
viewof materialButton = Inputs.radio(["On", "Off"], {label: "Material Phase", value:"Off"})
chart = {
const width = 800,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [0, -840, width, height]);
var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type
var c = svg.selectAll('circle')
var t = svg.selectAll('text')
//static lines are input here (lines that never change)
function polyline(data, sfill, fillO, sOpac, sW, stroke){
g.enter().append("polyline")
.data(data) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", sfill)
.style("fill-opacity", fillO)
.style('stroke-opacity',sOpac)
.style("stroke-width", sW)
.style("stroke", stroke)
}
var structure = phase_01
var material = [material1Clt,material1Concrete]
var program = [phase1Green,phase1Egress,phase1Lobby,phase1Retail,phase1Studio,phase11bed]
var sData = structureData[0]
if(phaseButton=="Phase 2")
{structure = phase_02
sData = structureData[1]
program = [phase2Green,phase2Egress,phase2Lobby,phase2Retail,phase2Studio,phase21bed,phase2Amendities,phase2Training]
}
if(phaseButton=="Phase 3")
{structure = phase_03
sData = structureData[2]
program = [phase3Green,phase3Egress,phase3Lobby,phase3Subway,phase3Studio,phase31bed,phase3Amendities,phase3Automated,phase32bed,]
}
if(phaseButton=="Phase 3.5")
{structure = phase_035
sData = structureData[2]
//////Change is here! put each set of lines in a list ([]) with the color. colorMap below is no longer needed
program = [[phase325Green,"#BBE9BC"],[phase35Egress,"grey"],[phase3Lobby,"#9678BE"],[phase3Subway,"#FFC3E1"],[phase35Studio,"#B1C6E6"],[phase351bed,"#6F96D0"],[phase35Amendities,"#7753A6"],[phase35Automated,"#8231D2"],[phase352bed,"#4279CB"]]
}
var material = [null]
if (phaseButton == 'Phase 1' && materialButton == 'On')
{ material = [material1Clt, material1Concrete]
}
if (phaseButton == 'Phase 2' && materialButton == 'On')
{ material = [material2Clt, material2Concrete]
}
if (phaseButton == 'Phase 3' && materialButton == 'On')
{ material = [material3Clt]
}
if (phaseButton == 'Phase 3.5' && materialButton == 'On')
{ material = [material35Clt]
}
//const colorMap = ["#BBE9BC", "grey", "#9678BE", "#FFC3E1", "#B1C6E6", "#6F96D0", "#7753A6","#8231D2","#4279CB"];
const colorMap2 = ["orange", "grey"];
//////2nd change here! Put the polyline block in a for loop, make sure the closed curly is at the end of the loop
for (let i = 0; i < program.length; i++) {
g.enter().append("polyline")
.data(program[i][0])
.enter()
.append('polyline')
.attr("points", function(d){return d})
.attr("fill", function(d){return program[i][1]})
.style("fill-opacity", '.3')
.style('stroke-opacity','0')
.style("stroke-width", '0')
.style("stroke", 'black')
}
/*
g.enter().append("polyline")
.data(program)
.enter()
.append('polyline')
.attr("points", function(d){return d})
.attr("fill", (d, i) => colorMap[i % colorMap.length])
.style("fill-opacity", '.3')
.style('stroke-opacity','0')
.style("stroke-width", '0')
.style("stroke", 'black')
*/
g.enter().append("polyline")
.data(material)
.enter()
.append('polyline')
.attr("points", function(d){return d})
.attr("fill", (d, i) => colorMap2[i % colorMap2.length])
.style("fill-opacity", '1')
.style('stroke-opacity','0')
.style("stroke-width", '0')
.style("stroke", 'black')
var yVal=-160
dataText(700,yVal,sData.name)
dataText(700,yVal+20,sData.SecondProgram)
dataText(700,yVal+40,sData.housing)
dataText(700,yVal+60,sData.emCarbon)
dataText(700,yVal+80,sData.structureCLT)
dataText(700,yVal+100,sData.secondaryStr)
function dataText(xVal,yVal,dataTxt){
svg
.append("text")
.attr("x",xVal)
.attr("y",yVal)
.attr("class","pointsText")
.attr('font-weight','regular')
.attr("font-family","helvetica")
.attr("font-size","12px")
.text(dataTxt)
}
t.enter().append('text')
.data(dataNames)
.enter()
.append("text")
.attr("x",690)
.attr("y",function(d,i){return yVal+(i*20)})
.attr("class","pointsText")
.attr('text-anchor','end')
.attr('font-weight','bold')
.attr("font-family","helvetica")
.attr("font-size","12px")
.text(function(d){return d})
g.enter().append("polyline")
.data(structure) //get data to define path
.enter() //there are more data than elements, this selects them
.append('polyline')
.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill-opacity", '1')
.style('stroke-opacity','1')
.style("stroke-width", '.6')
.style("stroke", 'black')
return svg.node();
}
phase_035 = FileAttachment("Test 3.5.txt").tsv({array:true})
material1Concrete = FileAttachment("Material 1 Concrete.txt").tsv({array:true})
material2Clt = FileAttachment("Material 2 CLT.txt").tsv({array:true})
material2Concrete = FileAttachment("Material 2 Concrete.txt").tsv({array:true})
material3Clt = FileAttachment("Material 3 CLT@1.txt").tsv({array:true})
material35Clt = FileAttachment("Material 3.5 CLT.txt").tsv({array:true})
phase351bed = FileAttachment("Phase 3.5 1bed.txt").tsv({array:true})
phase325Green = FileAttachment("Phase 3@2.5 Green.txt").tsv({array:true})
phase352bed = FileAttachment("Phase 3.5 2bed.txt").tsv({array:true})
phase35Amendities = FileAttachment("Phase 3.5 Amendities.txt").tsv({array:true})
phase35Egress = FileAttachment("Phase 3.5 Egress.txt").tsv({array:true})
phase35Studio = FileAttachment("Phase 3.5 Studio.txt").tsv({array:true})
phase35Automated = FileAttachment("Phase 3.5 automated.txt").tsv({array:true})
phase3Subway = FileAttachment("Phase 3 Subway.txt").tsv({array:true})
phase3Automated = FileAttachment("Phase 3 automated.txt").tsv({array:true})
phase32bed = FileAttachment("Phase 3 2bed@1.txt").tsv({array:true})
phase31bed = FileAttachment("Phase 3 1bed@3.txt").tsv({array:true})
phase3Studio = FileAttachment("Phase 3 studio@1.txt").tsv({array:true})
phase3Amendities = FileAttachment("Phase 3 Amendities@2.txt").tsv({array:true})
phase3Lobby = FileAttachment("Phase 3 lobby@1.txt").tsv({array:true})
phase3Egress = FileAttachment("Phase 3 Egress@1.txt").tsv({array:true})
phase2Training = FileAttachment("Phase 2 Training.txt").tsv({array:true})
phase21bed = FileAttachment("Phase 2 1bed.txt").tsv({array:true})
phase2Studio = FileAttachment("Phase 2 Studio@1.txt").tsv({array:true})
phase2Lobby = FileAttachment("Phase 2 lobby.txt").tsv({array:true})
phase2Amendities = FileAttachment("Phase 2 Amendities.txt").tsv({array:true})
phase3Green = FileAttachment("Phase 3 Green@1.txt").tsv({array:true})
phase2Retail = FileAttachment("Phase 2 retail.txt").tsv({array:true})
phase2Green = FileAttachment("Phase 2 Green.txt").tsv({array:true})
phase2Egress = FileAttachment("Phase 2 Egress.txt").tsv({array:true})
phase1Lobby = FileAttachment("Phase 1 lobby.txt").tsv({array:true})
phase1Retail = FileAttachment("Phase 1 retail.txt").tsv({array:true})
phase11bed = FileAttachment("Phase 1 1bed@2.txt").text()
phase1Studio = FileAttachment("Phase 1 Studio@2.txt").tsv({array:true})
phase1Egress = FileAttachment("Phase 1 Egress.txt").tsv({array:true})
strcutureDataLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS_xSI6R1cIL2X49n3-X4A4ePdzi66xpPHUi1ENUhO2J2tHgYYn69xtJ3_IX0970NEWZv1d1xI6Ln0X/pub?output=csv"
phase_01 = FileAttachment("Test 1@3.txt").tsv({array:true})
phase_02 = FileAttachment("Test 2@2.txt").tsv({array:true})
phase_03 = FileAttachment("Test 3@2.txt").tsv({array:true})
phase1Green = FileAttachment("Phase 1 Green@5.txt").tsv({array:true})
structureData = d3.csv(strcutureDataLink,d3.autoType)
dataNames = Object.values(structureData[4]);
dataNames
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.
