Public
Edited
Feb 15, 2024
1 fork
dataLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQmiZ0499job9q3alICmKBtWPSVzPGXH2opKi9FcMw4DlwOXmt7nSsUDVbxSNwVN2kzxZ1P0FyK0hfe/pub?output=csv'
data = d3.csv(dataLink,d3.autoType())
data[0]
brickCombined = {
var allData = []
for (let i = 0; i < brickOutline.length; i++) {
//for each line in my brick array, combine it with the data from spreadsheet, add that to allData
allData.push({geo:brickOutline[i],data:data[0]})
}
return allData
}
buildingOutline = FileAttachment("Building Outline@2.txt").tsv({array:true})
buildingDetails = FileAttachment("Building Details@1.txt").tsv({array:true})
windowDetails = FileAttachment("Window Details@1.txt").tsv({array:true})
buildingDWG = {
const width = 1920,
height = 1080;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var p = svg.selectAll("polyline")
p.enter().append("polyline")
.data(borderOutline2)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','white')
.style('stroke', 'black')
.style('stroke-width', '6')
.style('fill-opacity','1')
if(buildingbutton=="On"){
p.enter().append("polyline")
.data(buildingOutline)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','white')
.style('stroke', 'black')
.style('stroke-width', '2')
.style('fill-opacity','.25')
p.enter().append("polyline")
.data(buildingDetails)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','red')
.style('stroke', 'black')
.style('stroke-width', '.5')
}
if(roofbutton=="On"){
p.enter().append("polyline")
.data(roofOutline)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','white')
.style('stroke', 'black')
.style('stroke-width', '2')
.style('fill-opacity','.25')
p.enter().append("polyline")
.data(roofDetails)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','red')
.style('stroke', 'black')
.style('stroke-width', '.5')
}
if(windowbutton=="On"){
p.enter().append("polyline")
.data(windowOutlines)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','white')
.style('stroke', 'black')
.style('stroke-width', '1')
.style('fill-opacity','1')
p.enter().append("polyline")
.data(windowDetails)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('stroke', 'black')
.style('stroke-width', '.5')
.style('stroke', '.5')
}
if(brickbutton=="On"){
p.enter().append("polyline")
.data(brickCombined)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('class', "brickoutlinescombined")
.attr('points',function(d){return d.geo})
.style('fill','white')
.style('stroke', 'black')
.style('stroke-width', '0')
.style('fill-opacity','.5')
.on('mouseover',brickData)
.on('mouseout',brickDataOut)
p.enter().append("polyline")
.data(brickLinework)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','none')
.style('stroke', 'black')
.style('stroke-width', '.5')
.style('fill-opacity','.25')
function brickData(event,d){
//things in here will happen when you roll over brick
d3.selectAll("polyline.brickoutlinescombined").style('fill','red')
svg
.append("text")
.attr('x','540')
.attr('y','500')
.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','regular')
.style("fill", "rgb(0,0,0)")
.text(d.data.Material)
svg
.append("text")
.attr('x','540')
.attr('y','540')
.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','regular')
.style("fill", "rgb(0,0,0)")
.text(d.data.Age)
svg
.append("text")
.attr('x','540')
.attr('y','580')
.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','regular')
.style("fill", "rgb(0,0,0)")
.text(d.data.Part)
svg
.append("text")
.attr('x','540')
.attr('y','620')
.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','regular')
.style("fill", "rgb(0,0,0)")
.text(d.data.Origin)
svg
.append("text")
.attr('x','540')
.attr('y','660')
.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','regular')
.style("fill", "rgb(0,0,0)")
.text(d.data.Company)
svg
.append("text")
.attr('x','540')
.attr('y','700')
.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','regular')
.style("fill", "rgb(0,0,0)")
.text(d.data.Method)
svg
.append("text")
.attr('x','540')
.attr('y','740')
.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','regular')
.style("fill", "rgb(0,0,0)")
.text(d.data.Time)
svg
.append("line")
.attr('class','hoverLine')
.attr('x1','610')
.attr('y1','490')
.attr('x2','875')
.attr('y2','490')
.style('stroke-width','.5')
.style('stroke','black')
}
function brickDataOut(){
d3.selectAll('text.brickText').remove()
d3.selectAll("polyline.brickoutlinescombined").style('fill','white')
d3.selectAll('line.hoverLine').remove()
}
svg
.append("text")
.attr('x','410')
.attr('y','580')
//.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Part:')
svg
.append("text")
.attr('x','410')
.attr('y','540')
//.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Age:')
svg
.append("text")
.attr('x','410')
.attr('y','500')
//.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Material:')
svg
.append("text")
.attr('x','410')
.attr('y','620')
//.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Origin:')
svg
.append("text")
.attr('x','410')
.attr('y','660')
//.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Company:')
svg
.append("text")
.attr('x','410')
.attr('y','700')
//.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Method:')
svg
.append("text")
.attr('x','410')
.attr('y','740')
//.attr('class','brickText')
.style('font-family','helvetica')
.style('font-size','1.5em')
.style('font-weight','bold')
.style("fill", "rgb(0,0,0)")
.text('Time:')
}
return svg.node();
}
borderOutline2 = FileAttachment("Border Outline@2.txt").tsv({array:true})
brickOutline = FileAttachment("Brick Outline@2.txt").tsv({array:true})
roofDetails = FileAttachment("Roof Details@1.txt").tsv({array:true})
roofOutline = FileAttachment("Roof Outline@2.txt").tsv({array:true})
windowOutlines = FileAttachment("Window Outlines@3.txt").tsv({array:true})
brickLinework = FileAttachment("Brick Linework@1.txt").tsv({array:true})
dashboard =
html`
<div class='dashboardOuter' style='height:1920px;width:1080px'>
<div class='house' style='position:absolute;width:1080px;top:0px;left:0px'>
${buildingDWG}
</div>
<div class='text' style='position:absolute;top:450px;left:25px;font-family:helvetica;font-size:12px'>
${md`**Brick Calculator**`}
${viewof brickRange}
${md`**Total Brick Miles**`}
${brickMiles}
</div>
<div class='text' style='position:absolute;top:25px;left:25px;font-family:helvetica;font-size:12px'>
${md`**Guild House**`}
${viewof buildingbutton}
${viewof roofbutton}
${viewof windowbutton}
${viewof brickbutton}
</div>
</div>
`
viewof buildingbutton = Inputs.radio(["On", "Off"], {label: "Building Materials"})
viewof roofbutton = Inputs.radio(["On", "Off"], {label: "Roof Materials"})
viewof windowbutton = Inputs.radio(["On", "Off"], {label: "Window Materials"})
viewof brickbutton = Inputs.radio(["On", "Off"], {label: "Brick Materials"})
viewof brickRange = Inputs.range([150000, 165000], {step: 1, label: "Bricks in Building",value: 156000})
buildingboolean = {
var buildingcheck = buildingDWG
if(buildingbutton=="Off"){buildingcheck=" "}
return buildingcheck
}
brickRange
brickCombined[0].data.Distance
Number(brickCombined[0].data.Distance)
brickMiles = brickRange *Number(brickCombined[0].data.Distance)
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.
