Bips Dashboard - mirror / Fleet Hower

Public

Edited

Jun 15, 2023

viewof constructionType = Inputs.select(["Steel Frame","Wood Frame","Mass","Metal Building"], {label: "Construction Type"})

viewof constructionType2 = Inputs.select(["Steel Frame","Wood Frame","Mass","Metal Building"], {label: "Construction Type"})

viewof infiltrationRate = Inputs.range([1, 1], {step: 1, label: "Infiltration Rate"})

viewof infiltrationRate3 = Inputs.range([1, 1], {step: 1, label: "Infiltration Rate"})

viewof locations = Inputs.select(["office","circulations","atrium"], {label: "Locations"})

viewof grossFloorArea = Inputs.range([0, 255], {step: 1, label: "Gross Floor Area"})

viewof hvac = Inputs.select(["Ideal Air","VAV All Air","Radiant w/ DOAS"], {label: "HVAC System Type"})

viewof hvac2 = Inputs.select(["Ideal Air","VAV All Air","Radiant w/ DOAS"], {label: "HVAC System Type"})

viewof heatRecoveryEfficiency = Inputs.range([0, 100], {step: 5, label: "Heat Recovery Efficiency"})

viewof heatRecoveryEfficiency2 = Inputs.range([0, 100], {step: 5, label: "Heat Recovery Efficiency"})

viewof economizer = Inputs.radio(["Yes", "No"], {label: "Economizer", value:"Yes"})

viewof economizer2 = Inputs.radio(["Yes", "No"], {label: "Economizer", value:"Yes"})

viewof ventilation = Inputs.select(["Min Outdoor Air","5X Min","10X Min","VOC Biofilter","Full Biofilter"], {label: "Ventilation Type"})

viewof ventilation2 = Inputs.select(["Min Outdoor Air","5X Min","10X Min","VOC Biofilter","Full Biofilter"], {label: "Ventilation Type"})

viewof bioType = Inputs.select(["1 Hot Humid","2 Hot Dry","3 Marine","4 Mixed Humid","5 Mixed Dry","6 Cold","7 Very Cold","8 Subarctic"], {label: "Climate Zone"})

viewof bioType2 = Inputs.select(["1 Hot Humid","2 Hot Dry","3 Marine","4 Mixed Humid","5 Mixed Dry","6 Cold","7 Very Cold","8 Subarctic"], {label: "Climate Zone"})

viewof climateZone = Inputs.select(["1 Hot Humid","2 Hot Dry","3 Marine","4 Mixed Humid","5 Mixed Dry","6 Cold","7 Very Cold","8 Subarctic"], {label: "Climate Zone"})

viewof climateZone2 = Inputs.select(["1 Hot Humid","2 Hot Dry","3 Marine","4 Mixed Humid","5 Mixed Dry","6 Cold","7 Very Cold","8 Subarctic"], {label: "Climate Zone"})

viewof tempSet = Inputs.range([0, 100], {step: 1, label: "Temperature Setpoint"})

viewof bioPower = Inputs.range([0, 100], {step: 1, label: "Biofilter Power"})

viewof metabolicRate = Inputs.range([1, 4], {step: 1, label: "Metabolic Rate"})

viewof metabolicRate2 = Inputs.range([1, 4], {step: 1, label: "Metabolic Rate"})

viewof occSched = Inputs.radio(["Typical", "Sparse","Dense"], {label: "Occupancy Schedule"})

viewof program = Inputs.select(["Office","Hotel","Apartment","Hospital"], {label: "Program"})

viewof program2 = Inputs.select(["Office","Hotel","Apartment","Hospital"], {label: "Program"})

viewof actLvl = Inputs.range([0, 100], {step: 1, label: "Activity Level (Mets)"})

viewof wwRatio = Inputs.range([0, 1], {step: .05, label: "Window to Wall Ratio"})

viewof wwRatio2 = Inputs.range([0, 1], {step: .05, label: "Window to Wall Ratio"})

btn = DOM.download(serialize(textOb), "userSettings", "Save Inputs")

viewof clicks = Inputs.button("Click me")

textOb

viewof infiltrationRate.value

viewof clicks2 = Inputs.button("Set Inputs")

viewof mirror = Inputs.button("Mirror Data")

clicks2

viewof name = Inputs.text({placeholder: "File Name"})

name

name1 = []

name1[name1.length-1]

{

if(clicks2>0){

textOb.run

//name.run

name1.push(constructionType)

//name1.length=0

//clicks2.value=0

console.log("click")

}

return textOb[1].value

}

btn2=DOM.download(serialize(textOb))

function set(input, value) {

input.value = value;

input.dispatchEvent(new Event("input", {bubbles: true}));

}

mirror

mirrorData={

if(mirror>0){

set(viewof ventilation2,ventilation)

set(viewof climateZone2,climateZone)

set(viewof program2,program)

set(viewof constructionType2,constructionType)

set(viewof hvac2,hvac)

set(viewof metabolicRate2,metabolicRate)

set(viewof heatRecoveryEfficiency2,heatRecoveryEfficiency)

set(viewof infiltrationRate2,infiltrationRate)

set(viewof wwRatio2,wwRatio)

set(viewof economizer2,economizer)

//console.log("hellllo")

set(viewof mirror,0)

}

//mirror

//return mirror

//return [{name:"set",value:mirror}]

}

dashboard = html`<div class='dashboardOuter' style='height:800px;width:1200px'>

Project Name: AERA New York</br>

</div>

<h3 > Model Inputs</h3>

</div>

<h3>Scenario 01</h3>

${viewof ventilation}

${viewof climateZone}

${viewof program}

${viewof constructionType}

${viewof hvac}

${viewof metabolicRate}

${viewof heatRecoveryEfficiency}

${viewof wwRatio}

${viewof economizer}

</div>

<h3>Scenario Comparison</h3>

</div>

<p>Predicted CO2 (ppm) </p>

${pie1}

</div>

<h3>${predictedC02}</h3>

</div>

<h3>${predictedC022}</h3>

</div>

<p>Predicted Avg VOC (ppb)<br></br> </p>

${pie2}

</div>

<h3>${predictedVOC}</h3>

</div>

<h3>${predictedVOC2}</h3>

</div>

<p>Predicted EUI (kwh/m2/yr)<br></br> </p>

${pie3}

</div>

<h3>${predictedbuilding}</h3>

</div>

<h3>${predictedbuilding2}</h3>

</div>

<p>Predicted Required Greenwall (m2)<br></br> </p>

${pie4}

</div>

<h3>${predictedbalanc}</h3>

</div>

<h3>${predictedbalanc2}</h3>

</div>

<h3>Scenario 02</h3>

${viewof ventilation2}

${viewof climateZone2}

${viewof program2}

${viewof constructionType2}

${viewof hvac2}

${viewof metabolicRate2}

${viewof heatRecoveryEfficiency2}

${viewof wwRatio2}

${viewof economizer2}

</div>

${viewof clicks2}

</div>

${viewof mirror}

</div>

${btn}

</div>

${mirrorData}

</div>

/*function serialize (data) {

let s = JSON.stringify(data);

return new Blob([s], {type: "application/json"})

}*/

viewof infiltrationRate2 = Inputs.range([0, 255], {step: 1, label: "Infiltration Rate2"})

function serialize1 (data){

console.log("hello")

textOb

//serialize(data)

//return jkd

}

import {serialize} from "@palewire/saving-json"

button = (data, filename = 'data.csv') => {

if (!data) throw new Error('Array of data required as first argument');

let downloadData;

if (filename.includes('.csv')) {

downloadData = new Blob([d3.csvFormat(data)], { type: "text/csv" });

} else {

downloadData = new Blob([JSON.stringify(data, null, 2)], {

type: "application/json"

});

}

const size = (downloadData.size / 1024).toFixed(0);

const button = DOM.download(

downloadData,

filename,

`Download ${filename} (~${size} KB)`

);

return button;

}

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

fullDataSet2 = FileAttachment("500 - Sheet2@1.csv").csv()

fullDataSetLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRGRmIZo9WvAJkCNnD2ynimU3toPf5lzEtDiPLxwCykXw9egytsl12Vl9gko_1MYl-vyC-L51i23Y8N/pub?gid=1942421266&single=true&output=csv'

fullDataSet = d3.csv(fullDataSetLink, d3.autoType)

trainingSetFormatted = formattedData.map((d) => d.slice(0, 10));

avgVOCtraining = formattedData.map((d) => d[12])

predictionsFormatted = formattedData.map((d) => d[13])

regression = new rf.RandomForestRegression(options)

regressionVOC = new rf.RandomForestRegression(options)

a = await regression.train(trainingSetFormatted, predictionsFormatted);

VOCtrained2 = await regressionVOC.train(trainingSetFormatted, avgVOCtraining);

result = a, regression.predict(trainingSetFormatted);

regressionFormald = new rf.RandomForestRegression(options)

buildingtraining = formattedData.map((d) => d[14])

buildingTrain = await regressionFormald.train(trainingSetFormatted, buildingtraining);

building = buildingTrain, regressionFormald.predict(userInputs);

building2 = buildingTrain, regressionFormald.predict(userInputs2);

predictedbuilding = round(building,0)

predictedbuilding2 = round(building2,0)

regressionBenzene = new rf.RandomForestRegression(options)

balanctraining = formattedData.map((d) => d[15])

balancTrain = await regressionBenzene.train(trainingSetFormatted, balanctraining);

balanc = balancTrain, regressionBenzene.predict(userInputs);

balanc2 = balancTrain, regressionBenzene.predict(userInputs2);

predictedbalanc = round(balanc,0)

predictedbalanc2 = round(balanc2,0)

//resultVOC = VOCtrained, regression.predict(trainingSetFormatted);

co2 = a, regression.predict(userInputs);

co22 = a, regression.predict(userInputs2);

predictedC02 = round(co2,0)

predictedC022 = round(co22,0)

resultVOC = VOCtrained2, regressionVOC.predict(userInputs);

resultVOC2 = VOCtrained2, regressionVOC.predict(userInputs2);

predictedVOC = round(resultVOC,0)

predictedVOC2 = round(resultVOC2,0)

round = (n, places) => {

if (!places) return Math.round(n);

const d = 10 ** places;

return Math.round(n * d) / d;

}

Plot.plot({

aspectRatio: 1,

x: {label: "Age (years)"},

y: {

grid: true,

label: "← Women · Men →",

labelAnchor: "center",

tickFormat: Math.abs

marks: [

Plot.dot(

co2result,

Plot.stackY({

x: (d) => d.output,

y: (d) => d.value === "prediction" ? 1 : -1,

fill: "gender",

title: "full_name"

})

Plot.ruleY([0])

]

})

co2result = [

{output:"Predicted CO2", prediction:'1', fill:"red",value:predictedC022},

{output:"Predicted CO2", prediction:'2', fill:"blue",value:predictedC02}

]

build = [

{output:"Predicted AVG CO2", prediction:'1', fill:"red",value:predictedbuilding2},

{output:"Predicted AVG CO2", prediction:'2', fill:"blue",value:predictedbuilding}

]

avgvocresult = [

{output:"Predicted AVG CO2", prediction:'1', fill:"red",value:predictedVOC2},

{output:"Predicted AVG CO2", prediction:'2', fill:"blue",value:predictedVOC}

]

balance = [

{output:"Predicted AVG CO2", prediction:'1', fill:"red",value:predictedbalanc2},

{output:"Predicted AVG CO2", prediction:'2', fill:"blue",value:predictedbalanc}

]

plot1 = Plot.barX(co2result, {x: "value", y: "prediction", fill:"fill"}).plot()

plot2 = Plot.barX(avgvocresult, {x: "value", y: "prediction", fill:"fill"}).plot()

pie1 = PieChart(co2result, {

value: d => d.value,

//colors:d => d.fill,

width: 400,

height: 500

})

pie2 = PieChart(avgvocresult, {

value: d => d.value,

//colors:d => d.fill,

width: 400,

height: 500

})

pie3 = PieChart(build, {

value: d => d.value,

//colors:d => d.fill,

width: 400,

height: 500

})

pie4 = PieChart(balance, {

value: d => d.value,

//colors:d => d.fill,

width: 400,

height: 500

})

// Released under the ISC license.

// https://observablehq.com/@d3/pie-chart

function PieChart(data, {

name = ([x]) => x, // given d in data, returns the (ordinal) label

value = ([, y]) => y, // given d in data, returns the (quantitative) value

title, // given d in data, returns the title text

width = 640, // outer width, in pixels

height = 400, // outer height, in pixels

innerRadius = 0, // inner radius of pie, in pixels (non-zero for donut)

outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels

labelRadius = (innerRadius * 0.2 + outerRadius * 0.8), // center radius of labels

format = ",", // a format specifier for values (in the label)

names, // array of names (the domain of the color scale)

colors, // array of colors for names

stroke = innerRadius > 0 ? "none" : "black", // stroke separating widths

strokeWidth = 1, // width of stroke separating wedges

strokeLinejoin = "round", // line join of stroke separating wedges

padAngle = stroke === "none" ? 1 / outerRadius : 0, // angular separation between wedges

} = {}) {

// Compute values.

const N = d3.map(data, name);

const V = d3.map(data, value);

const I = d3.range(N.length).filter(i => !isNaN(V[i]));

// Unique the names.

if (names === undefined) names = N;

names = new d3.InternSet(names);

// Chose a default color scheme based on cardinality.

if (colors === undefined) colors = d3.schemeSpectral[names.size];

if (colors === undefined) colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), names.size);

// Construct scales.

const color = d3.scaleOrdinal(names, colors);

// Compute titles.

if (title === undefined) {

const formatValue = d3.format(format);

title = i => `${N[i]}\n${formatValue(V[i])}`;

} else {

const O = d3.map(data, d => d);

const T = title;

title = i => T(O[i], i, data);

}

// Construct arcs.

const arcs = d3.pie().padAngle(padAngle).sort(null).value(i => V[i])(I);

const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);

const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [(-width / 2)-5, -height / 2, width+50, height])

.attr("style", "max-width: 100%; height: auto; height: intrinsic;");

svg.append("g")

.attr("stroke", stroke)

//.attr("stroke-width", strokeWidth)

.attr("stroke-width", '2')

.attr("stroke-linejoin", strokeLinejoin)

.selectAll("path")

.data(arcs)

.join("path")

//.attr("fill", d => color(N[d.data]))

.attr("fill", 'rgba(230,230,230)')

.attr("d", arc)

.append("title")

//.text(d => title(d.data));

svg.append("g")

.attr("font-family", "sans-serif")

.attr("font-size", 10)

.attr("text-anchor", "middle")

.selectAll("text")

.data(arcs)

.join("text")

.attr("transform", d => `translate(${arcLabel.centroid(d)})`)

.selectAll("tspan")

.data(d => {

const lines = `${title(d.data)}`.split(/\n/);

return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 1);

})

.join("tspan")

.attr("x", 0)

.attr("y", (_, i) => `${i * 1.1}em`)

.attr("font-weight", (_, i) => i ? null : "bold")

//.text(d => d);

return Object.assign(svg.node(), {scales: {color}});

}

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