building a dashboard March 28 / Fleet Hower

Public

Edited

Mar 28, 2024

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

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

data[0].material

chimneyCombined = {

var allData = []

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

//for each line in my chimney array, combine it with the data from spreadsheet, add that to allData

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

}

return allData

}

combinedData22 = {

var combined = []

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

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

}

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(chimneyCombined)

.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('image')

.attr('xlink:href','https://api.time.com/wp-content/uploads/2019/08/twa-hotel-queens-new-york.jpg')

.attr('class','spotImage')

.attr('x', '210')

.attr('y','570')

.attr('width', 200)

.attr('height', 100)

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

svg

.append("text")

.attr('x','160')

.attr('y','570')

.attr('class','chimneyText')

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

.style('font-size','10px')

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

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

.text(d.data.material)

svg

.append("text")

.attr('x','130')

.attr('y','590')

.attr('class','chimneyText')

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

.style('font-size','10px')

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

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

.text(d.data.age)

svg

.append("text")

.attr('x','170')

.attr('y','610')

.attr('class','chimneyText')

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

.style('font-size','10px')

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

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

.text(d.data.fabricator)

svg

.append("line")

.attr('class','hoverLine')

.attr('x1','100')

.attr('y1','580')

.attr('x2','100')

.attr('y2','250')

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

.style('stroke','black')

svg

.append("line")

.attr('class','hoverLine')

.attr('x1','100')

.attr('y1','250')

.attr('x2','500')

.attr('y2','250')

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

.style('stroke','black')

svg

.append("polyline")

.attr('class','hoverLine')

.attr('points','50,50 50,100 100,100')

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

.style('fill','none')

.style('stroke','black')

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

}

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

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

d3.selectAll('line.hoverLine').remove()

d3.selectAll('polyline.hoverLine').remove()

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

}

svg

.append("text")

.attr('x','100')

.attr('y','570')

//.attr('class','chimneyText')

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

.style('font-size','10px')

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

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

.text('Material: ')

svg

.append("text")

.attr('x','100')

.attr('y','590')

//.attr('class','chimneyText')

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

.style('font-size','10px')

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

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

.text('Age: ')

svg

.append("text")

.attr('x','100')

.attr('y','610')

//.attr('class','chimneyText')

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

.style('font-size','10px')

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

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

.text('Fabricator: ')

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>

${viewof materials}

</div>

${co2Calculator}

${co2Totals}

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

${viewof brickRange2}

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

${brickMiles}

</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"})

viewof brickRange = Inputs.range([1500, 2200], {step: 1, label: "Bricks in Chimney",value:1850})

viewof brickRange2 = Inputs.radio([1500, 1700,1900,2100,2300], {label: "Chimney Materials",value:"On"})

houseButton

brickMiles = brickRange2 *Number(chimneyCombined[0].data.distance)

Number(chimneyCombined[0].data.distance)

rf = import('https://cdn.skypack.dev/ml-random-forest@2.1.0?min')

trainingSet = formattedData.map((d) => d.slice(0, 7));

trainingSetconcrete = formattedDataconcrete.map((d) => d.slice(0, 7));

predictions = formattedData.map((d) => d[7])

predictionsconcrete = formattedDataconcrete.map((d) => d[7])

options = ({

seed: 3,

maxFeatures: 7,

replacement: false,

nEstimators: 100

})

regression = new rf.RandomForestRegression(options)

a = await regression.train(trainingSet, predictions);

aconcrete = await regression.train(trainingSetconcrete, predictionsconcrete);

resultwood = a, regression.predict([[numericData[0],numericData[1],numericData[2],numericData[3],100,140,110]]);

resultconcrete = a, regression.predict([[numericDataconcrete[0],numericDataconcrete[1],numericDataconcrete[2],numericDataconcrete[3],100,140,110]]);

co2Totals = html`

${md`**Predicted Wood CO2** **Predicted Concrete CO2**`}

${`${Math.round(resultwood[0],1)} ${Math.round(resultconcrete[0],1)}`}

${md`**Predicted Wood CO2** ${Math.round(resultwood[0],1)}`}

${Math.round(resultwood[0],1)}

${md`**Predicted Conrete CO2**`}

${Math.round(resultconcrete[0],1)}

</div>

viewof endofLife

viewof endofLife = Inputs.select(["Landfill","Downcycle","Recycle","Re-Manufacture","Reuse"], {label: "End of Life"})

viewof endofLifewood = Inputs.select(["Landfill","Downcycle","Recycle","Re-Manufacture","Reuse"], {label: "End of Life"})

viewof pctRecovered = Inputs.select(["0","50","100"], {label: "Percent Recovered",value:"50"})

viewof pctRecoveredwood = Inputs.select(["0","50","100"], {label: "Percent Recovered",value:"50"})

viewof dist = Inputs.range([0, 1000], {step: 1, label: "Distance Traveled"})

viewof distwood = Inputs.range([0, 1000], {step: 1, label: "Distance Traveled"})

viewof quant = Inputs.range([100, 1000], {step: 1, label: "Quantity"})

viewof quantwood = Inputs.range([100, 1000], {step: 1, label: "Quantity"})

viewof set = Inputs.button("Set Data")

viewof setwood = Inputs.button("Set Data")

viewof materials = Inputs.radio(["Wood", "Concrete"], {label: "Materials",value:"Wood"})

co2Calculator = {

var characteristics

if(materials=="Wood"){characteristics=woodCharateristics}

if(materials=="Concrete"){characteristics=concreteCharateristics}

return characteristics

}

woodCharateristics = html`

${md`**Wood CO2 Calculator**`}

${viewof endofLife}

${viewof pctRecovered}

${viewof dist}

${viewof quant}

${viewof set}

</div>

concreteCharateristics = html`

${md`**Concrete CO2 Calculator**`}

${viewof endofLifewood}

${viewof pctRecoveredwood}

${viewof distwood}

${viewof quantwood}

${viewof setwood}

</div>

numericData = {

var data =[]

var eol

var rcvrd

var distance

var quantity

if(viewof endofLife.value=="Landfill"){eol = 1}

if(viewof endofLife.value=="Downcycle"){eol = 2}

if(viewof endofLife.value=="Recycle"){eol = 3}

if(viewof endofLife.value=="Re-Manufacture"){eol = 4}

if(viewof endofLife.value=="Reuse"){eol = 5}

if(viewof pctRecovered.value=="0"){rcvrd = 1}

if(viewof pctRecovered.value=="50"){rcvrd = 2}

if(viewof pctRecovered.value=="100"){rcvrd = 3}

distance = viewof dist.value

quantity = viewof quant.value

data.push(eol)

data.push(rcvrd)

data.push(distance)

data.push(quantity)

data.push(set)

return data

}

numericDataconcrete = {

var data =[]

var eol

var rcvrd

var distance

var quantity

if(viewof endofLifewood.value=="Landfill"){eol = 1}

if(viewof endofLifewood.value=="Downcycle"){eol = 2}

if(viewof endofLifewood.value=="Recycle"){eol = 3}

if(viewof endofLifewood.value=="Re-Manufacture"){eol = 4}

if(viewof endofLifewood.value=="Reuse"){eol = 5}

if(viewof pctRecoveredwood.value=="0"){rcvrd = 1}

if(viewof pctRecoveredwood.value=="50"){rcvrd = 2}

if(viewof pctRecoveredwood.value=="100"){rcvrd = 3}

distance = viewof distwood.value

quantity = viewof quantwood.value

data.push(eol)

data.push(rcvrd)

data.push(distance)

data.push(quantity)

data.push(setwood)

return data

}

a, regression.featureImportance()

a, regression.toJSON()

Type Table, then Shift-Enter. Ctrl-space for more options.

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