Guild House -combined / John Xu's Workspace

houseDwg = {

const width = 800,

height = 800;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

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

.data(redBase)

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

.append("polyline")

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

.style('fill','brown')

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

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

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

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

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

.data(roofBase)

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

.append("polyline")

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

.style('fill','darkred')

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

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

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

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

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

.data(groundColor)

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

.append("polyline")

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

.style('fill','dimgray')

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

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

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

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

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

.data(colorDetails2)

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

.append("polyline")

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

.style('fill','sienna')

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

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

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

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

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

.data(details02)

.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','.5')

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

svg.insert('rect', ':first-child')

.attr('x', 45)

.attr('y', 250)

.attr('width', 180)

.attr('height', 100)

.style('fill', 'none')

.style('stroke', 'lightgrey')

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

//////////////////////////////////add windows below///////////////////////////////

if (stonebutton === "Off") {

//timberCheck = " ";

}

if (stonebutton === "On") {

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

.data(bluestonecombined)

.enter()

.append("polyline")

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

.attr('class', 'stoneText')

.style('fill', 'darkred')

.style('fill-opacity', '1')

.style('stroke', 'black')

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

.on('mouseover', stoneData)

.on('mouseout', stoneDataOut);

}

function stoneData(event, d) {

svg.selectAll('polyline.stoneText').style('fill', 'lightslategrey')

svg.append('image')

.attr('xlink:href','https://i.postimg.cc/tJpdsJjn/Screenshot-2024-02-28-232220.png')

.attr('class','spotImage')

.attr('x', '97')

.attr('y','450')

.attr('width', 120)

.attr('height', 120)

svg

.append("text")

.attr('x', '100')

.attr('y', '260')

.attr('class', 'stoneText')

.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', '105')

.attr('y', '280')

.attr('class', 'stoneText')

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

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

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

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

.text(d.data.Location);

svg

.append("text")

.attr('x', '80')

.attr('y', '300')

.attr('class', 'stoneText')

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

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

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

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

.text(d.data.Use);

svg

.append("text")

.attr('x', '115')

.attr('y', '320')

.attr('class', 'stoneText')

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

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

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

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

.text(d.data.Fabricator);

svg

.append("text")

.attr('x', '80')

.attr('y', '340')

.attr('class', 'stoneText')

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

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

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

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

.text(d.data.Age);

}

function stoneDataOut() {

d3.selectAll('text.stoneText').remove();;

svg.selectAll('polyline.stoneText').style('fill', 'darkred')

svg.selectAll('image.spotImage').remove();

}

svg

.append("text")

.attr('x','50')

.attr('y','260')

//.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','50')

.attr('y','280')

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

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

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

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

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

.text('Location: ')

svg

.append("text")

.attr('x','50')

.attr('y','300')

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

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

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

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

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

.text('Use: ')

svg

.append("text")

.attr('x','50')

.attr('y','320')

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

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

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

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

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

.text('Fabricator: ')

svg

.append("text")

.attr('x','50')

.attr('y','340')

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

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

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

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

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

.text('Age: ')

///////////////////////

if (windowbutton === "Off") {

// windowsCheck = " ";

}

if (windowbutton === "On") {

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

.data(glasscombined)

.enter()

.append("polyline")

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

.attr('class', 'windowColor')

.style('fill', 'lightblue')

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

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

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

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

.on('mouseover', windowData)

.on('mouseout', windowDataOut)

//.style('fill', 'lightblue')

}

function windowData(event, d) {

svg.selectAll('polyline.windowColor').style('fill', 'white ')

svg.append('image')

.attr('xlink:href','https://i.postimg.cc/pdSX9FYp/Screenshot-2024-02-28-231957.png')

.attr('class','spotImage3')

.attr('x', '97')

.attr('y','450')

.attr('width', 120)

.attr('height', 120)

svg

.append("text")

.attr('x', '100')

.attr('y', '260')

.attr('class', 'windowText')

.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', '105')

.attr('y', '280')

.attr('class', 'windowText')

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

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

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

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

.text(d.data.Location);

svg

.append("text")

.attr('x', '80')

.attr('y', '300')

.attr('class', 'windowText')

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

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

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

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

.text(d.data.Use);

svg

.append("text")

.attr('x', '115')

.attr('y', '320')

.attr('class', 'windowText')

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

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

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

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

.text(d.data.Fabricator);

svg

.append("text")

.attr('x', '80')

.attr('y', '340')

.attr('class', 'windowText')

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

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

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

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

.text(d.data.Age);

}

function windowDataOut() {

d3.selectAll('text.windowText').remove();

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

svg.selectAll('polyline.windowColor').style('fill', 'lightblue')

svg.selectAll('image.spotImage3').remove();

}

///////////////////////////////////////////////

if (timberbutton === "Off") {

//timberCheck = " ";

}

if (timberbutton === "On") {

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

.data(timbercombined)

.enter()

.append("polyline")

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

.attr('class', 'timberText')

.style('fill', 'white')

.style('fill-opacity', '1')

.style('stroke', 'black')

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

.on('mouseover', timberData)

.on('mouseout', timberDataOut);

}

function timberData(event, d) {

svg.selectAll('polyline.timberText').style('fill', 'black')

svg.append('image')

.attr('xlink:href','https://i.postimg.cc/gcTqYSZW/Screenshot-2024-02-28-232028.png')

.attr('class','spotImage2')

.attr('x', '97')

.attr('y','450')

.attr('width', 120)

.attr('height', 120)

svg

.append("text")

.attr('x', '100')

.attr('y', '260')

.attr('class', 'timberText')

.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', '105')

.attr('y', '280')

.attr('class', 'timberText')

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

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

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

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

.text(d.data.Location);

svg

.append("text")

.attr('x', '80')

.attr('y', '300')

.attr('class', 'timberText')

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

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

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

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

.text(d.data.Use);

svg

.append("text")

.attr('x', '115')

.attr('y', '320')

.attr('class', 'timberText')

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

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

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

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

.text(d.data.Fabricator);

svg

.append("text")

.attr('x', '80')

.attr('y', '340')

.attr('class', 'timberText')

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

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

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

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

.text(d.data.Age);

}

function timberDataOut() {

d3.selectAll('text.timberText').remove();;

svg.selectAll('image.spotImage2').remove();

}

//////////////////////////

return svg.node();

}

GHdwg = {

const width = 800,

height = 800;

const padding = 20; // Padding around the content

const viewBoxWidth = width + 2 * padding;

const viewBoxHeight = height + 2 * padding;

const imageHeight = 500; // Desired height for all images

const images = [

'https://i.postimg.cc/VvmxjfjC/100.png',

'https://i.postimg.cc/5tzTTYgz/75.png',

'https://i.postimg.cc/Qd2nQNDd/50.png',

'https://i.postimg.cc/6QxY7HV7/25.png'

];

let currentImageIndex = 0;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, viewBoxWidth, viewBoxHeight]);

const image = svg.append('image')

.attr('xlink:href', images[currentImageIndex])

.attr('x', viewBoxWidth - 915) // Adjusted x position for top-right alignment

.attr('y', 130)

.attr('width', 700)

.attr('height', imageHeight)

.on('click', () => {

currentImageIndex = (currentImageIndex + 1) % images.length;

image.attr('xlink:href', images[currentImageIndex]);

});

return svg.node();

};

glassinfoLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSuZjsYgES7LADiA4oF7MCk0j4AyzuWqnZCxUgcqxM7yAxORrbD5DOoZiTEjEFNeSGCevZqUq_4Idki/pub?output=csv"

glassinfo=d3.csv(glassinfoLink,d3.autoType())

glasscombined ={

var allData = [];

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

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

allData.push({ geo: windows02[i], data: glassinfo[0] });

}

return allData;

};

groundColor = FileAttachment("ground color.txt").tsv({array:true})

colorDetails2 = FileAttachment("color details 2.txt").tsv({array:true})

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

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

redBase = FileAttachment("red base.txt").tsv({array:true})

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

dashgroundRec = FileAttachment("dashground rec.txt").tsv({array:true})

dashboardgraphics = {

const width = 800,

height = 800;

const svg = d3.create("svg")

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

var p = svg.selectAll("polyline")

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

.data(dbgraphics)

.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")//add svg to variable p

.data(rects)

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

.append("polyline")

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

.style('fill','grey(16)')

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

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

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

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

return svg.node();

}

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

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

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

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

dashboard = html`

${dashboardgraphics}

</div>

${md`**GUILD HOUSE**`}

</div>

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

</div>

${viewof materials}

</div>

${co2Calculator}

${co2Totals}

</div>

${GHdwg}

</div>

`;

timberbutton

windowbutton

stonebutton

calculation = timberData2+timberData3+timberData4

timberData2 = {

var allTimberData = []

if(range1<400){allTimberData.push(30)}

if(range1>400){allTimberData.push(725)}

return allTimberData

}

timberData3 = {

var allTimberData = []

if(range2<400){allTimberData.push(118)}

if(range2>400){allTimberData.push(498)}

return allTimberData

}

timberData4 = {

var allTimberData = []

if(range3<400){allTimberData.push(90)}

if(range3>400){allTimberData.push(640)}

return allTimberData

}

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

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

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

viewof stonebutton = Inputs.radio(["On", "Off"], {label: "Bluestone",value:"On"})

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

brownstonedata = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRGcatKnf0Nh6BNOmM-MWdzjB8XODuytQzRwsmSDCPK_6qz9QMujK6MHbj1dwQAWw-HYxvGQpHxnd-x/pub?output=csv"

brownstoneinfo=d3.csv(brownstonedata,d3.autoType())

bluestonecombined ={

var allData = [];

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

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

allData.push({ geo: brownstone[i], data: brownstoneinfo[0] });

}

return allData;

};

viewof windowbutton = Inputs.radio(["On", "Off"], {label: "Glass",value:"On"})

viewof timberbutton = Inputs.radio(["On", "Off"], {label: "Timber",value:"On"})

timberbutton

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

timberdata = d3.csv(timberinfo,d3.autoType())

timberinfo = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSuoSAb-b5NRGCP8ATZMGAwWJEdvnpN7iXYg4mA64Ku4VvK498u7dt-cnxeJZl1dxDb1wESV6Kbk_VT/pub?output=csv"

timbercombined ={

var allData = [];

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

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

allData.push({ geo: timberdwg[i], data: timberdata[0] });

}

return allData;

};

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

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

trainingSet1 = formattedData1.map((d) => d.slice(0, 5));

trainingSet2 = formattedData2.map((d) => d.slice(0, 5));

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

predictions1 = formattedData1.map((d) => d[5])

predictions2 = formattedData2.map((d) => d[5])

options = ({

seed: 3,

maxFeatures: 5,

replacement: false,

nEstimators: 100

})

regression = new rf.RandomForestRegression(options)

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

a1 = await regression.train(trainingSet1, predictions1);

a2 = await regression.train(trainingSet2, predictions2);

result = a, regression.predict([[numericData[0],numericData[1],numericData[2],125,numericData[3]]]);

result1 = a1, regression.predict([[numericData1[0],numericData1[1],numericData1[2],125,numericData1[3]]]);

result2 = a2, regression.predict([[numericData2[0],numericData2[1],numericData2[2],125,numericData2[3]]]);

viewof materials = Inputs.radio(["Glass", "Wood", "Brick"], {

label: "Materials",

value: "Glass",

style: {

"font-family": "Gill Sans Extrabold, sans-serif",

"font-size": "16px"

}

})

co2Calculator = {

var characteristics

if(materials=="Glass"){characteristics=glassCharateristics}

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

if(materials=="Brick"){characteristics=brickCharateristics}

return html`<div style='position: absolute; width:300px;top: -175px; left: -15px; font-family: Gill Sans; font-size: 18px;'>${characteristics}</div>`

}

glassCharateristics = html`

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

${viewof endofLife}

${viewof pctRecovered}

${viewof dist}

${viewof quant}

${viewof set}

</div>

`

woodCharateristics = html`

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

${viewof endofLife1}

${viewof pctRecovered1}

${viewof dist1}

${viewof quant1}

${viewof set1}

</div>

`

brickCharateristics = html`

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

${viewof endofLife2}

${viewof pctRecovered2}

${viewof dist2}

${viewof quant2}

${viewof set2}

</div>

`

co2Totals = html`

${md`**Predicted Glass CO2(lbs):** ${Math.round(result[0],1)}<br>**Predicted Wood CO2(lbs):** ${Math.round(result1[0],1)}<br>**Predicted Brick CO2(lbs):** ${Math.round(result2[0],1)}`}

</div>

`

numericData = {

var data =[]

var eol

var rcvrd

var distance

var quantity

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

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

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

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

data.push(rcvrd)

data.push(distance)

data.push(eol)

data.push(set)

return data

}

numericData1 = {

var data =[]

var eol

var rcvrd

var distance

var quantity

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

if(viewof endofLife1.value=="Recycle"){eol = 2}

if(viewof endofLife1.value=="Reuse"){eol = 3}

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

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

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

distance = viewof dist1.value

quantity = viewof quant1.value

data.push(quantity)

data.push(rcvrd)

data.push(distance)

data.push(eol)

data.push(set1)

return data

}

numericData2 = {

var data =[]

var eol

var rcvrd

var distance

var quantity

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

if(viewof endofLife2.value=="Recycle"){eol = 2}

if(viewof endofLife2.value=="Reuse"){eol = 3}

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

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

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

distance = viewof dist2.value

quantity = viewof quant2.value

data.push(quantity)

data.push(rcvrd)

data.push(distance)

data.push(eol)

data.push(set2)

return data

}

a, regression.featureImportance()

a, regression.toJSON()

fullDataSet = {

return glassSystemsProtyptingSheet1

}

fullDataSet1 = {

return woodSystemsProtyptingSheet1

}

fullDataSet2 = {

return brickSystemsProtyptingSheet1

}

formattedData = {

var fullSet = []

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

var currentLine = [Number(fullDataSet[i].col1),Number(fullDataSet[i].col2),Number(fullDataSet[i].col3),Number(fullDataSet[i].col4),Number(fullDataSet[i].col5),Number(fullDataSet[i].result)]

fullSet.push(currentLine)

}

return fullSet

}

formattedData1 = {

var fullSet = []

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

var currentLine = [Number(fullDataSet1[i].col1),Number(fullDataSet1[i].col2),Number(fullDataSet1[i].col3),Number(fullDataSet1[i].col4),Number(fullDataSet1[i].col5),Number(fullDataSet1[i].result)]

fullSet.push(currentLine)

}

return fullSet

}

formattedData2 = {

var fullSet = []

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

var currentLine = [Number(fullDataSet2[i].col1),Number(fullDataSet2[i].col2),Number(fullDataSet2[i].col3),Number(fullDataSet2[i].col4),Number(fullDataSet2[i].col5),Number(fullDataSet2[i].result)]

fullSet.push(currentLine)

}

return fullSet

}

viewof endofLife = Inputs.select([null].concat("Landfill","Recycle","Reuse"), {label: "End of Life"})

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

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

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

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

viewof endofLife1 = Inputs.select([null].concat("Landfill","Recycle","Reuse"), {label: "End of Life"})

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

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

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

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

viewof endofLife2 = Inputs.select([null].concat("Landfill","Recycle","Reuse"), {label: "End of Life"})

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

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

viewof quant2 = Inputs.range([5000, 50000], {step: 1, label: "Quantity"})

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

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

One platform to build and deploy the best data apps