building a dashboard Feb 08 part 02 / Fleet Hower

Public

Edited

Feb 8, 2024

dataLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQmfjVZA295CMX1TJZvbd4Y1QIj7V8ldeMxHUv41fcAyb6bfwn2iOakJJ0j0O-zmcXzAsrcKeZBGY2L/pub?output=csv'

data = d3.csv(dataLink,d3.autoType())

combinedData = {

var combined = []

for (let i = 0; i < chimney.length; i++) {

combined.push({geo:chimney[i],data:data[0]})

}

return combined

}

houseDwg = {

const width = 800,

height = 800;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

////////this is the body of the code/////////

var p = svg.selectAll("polyline")////declare variable p one time

if(houseButton=="On"){

p.enter().append("polyline")//add svg to variable p

.data(houseData)

.enter() //there are more data than elements, this selects them

.append("polyline")

.attr('points',function(d){return d})

.style('fill','none')

//.style('fill-opacity','.5')

.style('stroke','rgb(0,0,0)')

.style('stroke-width','2')

//.style('stroke-dasharray','6,3')

p.enter().append("polyline")

.data(housedetails)

.enter() //there are more data than elements, this selects them

.append("polyline")

.attr('points',function(d){return d})

.style('fill','none')

//.style('fill-opacity','.5')

.style('stroke','rgb(0,0,0)')

.style('stroke-width','1')

.style('stroke-dasharray','6,3')

}

if(chimneyButton=="On"){

p.enter().append("polyline")//this is the closed outline

.data(combinedData)

.enter() //there are more data than elements, this selects them

.append("polyline")

.attr('points',function(d){return d.geo})

.style('fill','white')

//.style('fill-opacity','.5')

.style('stroke','rgb(0,0,0)')

.style('stroke-width','2')

.on('mouseover',chimneyData)

.on('mouseout',chimneyDataOut)

function chimneyData(event,d){

//these are the guts of the function, things in here will happen when you roll over the chimney

svg

.append("text")

.attr('x','100')

.attr('y','400')

.attr('class','chimneyText')

.style('font-family','helvetica')

.style('font-size','1em')

.style('font-weight','bold')

.style("fill", "rgb(0,0,0)")

.text('Nacho House')

console.log(d.data.material)

svg

.append("text")

.attr('x','100')

.attr('y','500')

.attr('class','chimneyText')

.style('font-family','helvetica')

.style('font-size','1em')

.style('font-weight','bold')

.style("fill", "rgb(0,0,0)")

.text(d.data.material)

d3.select(this).style('fill','cyan')

}

function chimneyDataOut(){//this happens when you mouse off the chimney

d3.selectAll('text.chimneyText').remove()

d3.select(this).style('fill','white')

}

p.enter().append("polyline")//these are the chimney details

.data(chimneydetails)

.enter() //there are more data than elements, this selects them

.append("polyline")

.attr('points',function(d){return d})

.style('fill','none')

//.style('fill-opacity','.5')

.style('stroke','rgb(0,0,0)')

.style('stroke-width','1')

.style('stroke-dasharray','6,3')

}

if(roofButton=="On"){

p.enter().append("polyline")

.data(roof)

.enter() //there are more data than elements, this selects them

.append("polyline")

.attr('points',function(d){return d})

.style('fill','none')

//.style('fill-opacity','.5')

.style('stroke','rgb(0,0,0)')

.style('stroke-width','2')

//.style('stroke-dasharray','6,3')

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','none')

//.style('fill-opacity','.5')

.style('stroke','rgb(0,0,0)')

.style('stroke-width','1')

.style('stroke-dasharray','6,3')

}

///////above is the body of the code///////////

return svg.node();

}

houseData = FileAttachment("house.txt").tsv({array:true})

housedetails = FileAttachment("houseDetails.txt").tsv({array:true})

chimney = FileAttachment("chimney.txt").tsv({array:true})

chimneydetails = FileAttachment("chimneyDetails.txt").tsv({array:true})

dashBoardGraphics = {

const width = 800,

height = 800;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height]);

////////this is the body of the code/////////

var p = svg.selectAll("polyline")

.data(dashboard_graphics)

.enter() //there are more data than elements, this selects them

.append("polyline")

.attr('points',function(d){return d})

.style('fill','black')

//.style('fill-opacity','.5')

.style('stroke','rgb(0,0,0)')

.style('stroke-width','2')

//.style('stroke-dasharray','6,3')

p.enter().append("polyline")

.data(smoke)

.enter() //there are more data than elements, this selects them

.append("polyline")

.attr('points',function(d){return d})

.style('fill','none')

//.style('fill-opacity','.5')

.style('stroke','rgb(0,0,0)')

.style('stroke-width','1')

.style('stroke-dasharray','6,3')

///////above is the body of the code///////////

return svg.node();

}

smoke = FileAttachment("smoke.txt").tsv({array:true})

dashboard_graphics = FileAttachment("dashboard_graphics.txt").tsv({array:true})

roof = FileAttachment("roof.txt").tsv({array:true})

roofdetails = FileAttachment("roofDetails.txt").tsv({array:true})

houseButton

dashboard =

html`

${dashBoardGraphics}

</div>

${//houseDwg}

</div>

${md`**House Dashboard**`}

${viewof houseButton}

${viewof roofButton}

${viewof chimneyButton}

</div>

viewof houseButton = Inputs.radio(["On", "Off"], {label: "House Materials",value:"On"})

viewof roofButton = Inputs.radio(["On", "Off"], {label: "Roof Materials",value:"On"})

viewof chimneyButton = Inputs.radio(["On", "Off"], {label: "Chimney Materials",value:"On"})

houseButton

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