Public
Edited
Feb 8, 2024
2 forks
houseDwg = {
const width = 800,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
////////this is the body of the code/////////
if(houseButton=="On"){
var p = svg.selectAll("polyline")
.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')
}
///////above is the body of the code///////////
return svg.node();
}
houseData = FileAttachment("house.txt").tsv({array:true})
housedetails = FileAttachment("houseDetails.txt").tsv({array:true})
chimneyDwg = {
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(chimney)
.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(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')
///////above is the body of the code///////////
return svg.node();
}
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})
roofDwg = {
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(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();
}
roof = FileAttachment("roof.txt").tsv({array:true})
roofdetails = FileAttachment("roofDetails.txt").tsv({array:true})
houseButton
houseBoolean = {
var houseCheck = houseDwg
if(houseButton=="Off"){houseCheck=" "}
return houseCheck
}
roofBoolean = {
var roofCheck = roofDwg
if(roofButton=="Off"){roofCheck=" "}
return roofCheck
}
chimneyBoolean = {
var chimneyCheck = chimneyDwg
if(chimneyButton=="Off"){chimneyCheck=" "}
return chimneyCheck
}
dashboard =
html`
<div class='dashboardOuter' style='height:800px;width:800px'>
<div class='house' style='position:absolute;width:800px;top:0px;left:0px'>
${dashBoardGraphics}
</div>
<div class='house' style='position:absolute;width:800px;top:0px;left:0px'>
${houseDwg}
</div>
<div class='roof' style='position:absolute;width:800px;top:0px;left:0px'>
${roofBoolean}
</div>
<div class='chimney' style='position:absolute;width:800px;top:0px;left:0px'>
${chimneyBoolean}
</div>
<div class='text' style='position:absolute;top:620px;left:60px;font-family:helvetica;font-size:12px'>
${md`**House Dashboard**`}
${viewof houseButton}
${viewof roofButton}
${viewof chimneyButton}
</div>
</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.
