Untitled / Cooper Myers's Workspace

Public

Edited

Feb 21, 2024

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

}

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(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', '.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.txt").tsv({array:true})

brickLinework = FileAttachment("Brick Linework.txt").tsv({array:true})

dashboard =

html`

${buildingDWG}

</div>

${md`**Brick Calculator**`}

${viewof brickRange}

${md`**Total Brick Miles**`}

${brickMiles}

</div>

${md`**Guild House**`}

${viewof brickbutton}

</div>

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(brickbutton=="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.

Learn more