dashboard =
html`
<div class='dashbaordOuter' style='height:800px;width800px'>
<div class='house' style='position:absolute;width:800px;top:0px;left:0px'>
${outlineDwg}
</div>
<div class='house' style='position:absolute;width:800px;top:0px;left:0px'>
${houseDwg}
</div>
<div class='text' style='position:absolute;top:120px;left:100px;font-family:helvetica;font-size:20px'>
${md`**Barbie's Dream House**`}
${viewof houseButton}
${viewof roofButton}
${viewof chimneyButton}
</div>
</div>
`
houseDwg = {
const width = 800,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
///// below is the body of the code
var p = svg.selectAll("polyline")
if (houseButton=="On"){
p.enter().append("polyline")
.data(houseData)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','pink')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','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','pink')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','1')
}
if (roofButton=="On"){
p.enter().append("polyline")
.data(roofData)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('fill','lavenderblush')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','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','pink')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','1')
}
//////////////////////////////////////////////////////////chimney starts////////////////////////////////////////////////////
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','snow')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','3')
.on('mouseover',chimneyText)
.on('mouseout',chimneyTextOut)
function chimneyText(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','chimneyWords')
.attr('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill", "rgb(100,100,100)")
.text('THE Chimney')
svg
.append("text")
.attr('x','200')
.attr('y','450')
.attr('class','chimneyWords')
.attr('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','normal')
.style("fill", "rgb(100,100,100)")
.text(d.data.material)
svg
.append("text")
.attr('x','200')
.attr('y','475')
.attr('class','chimneyWords')
.attr('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','normal')
.style("fill", "rgb(100,100,100)")
.text(d.data.age)
svg
.append("text")
.attr('x','200')
.attr('y','500')
.attr('class','chimneyWords')
.attr('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','normal')
.style("fill", "rgb(100,100,100)")
.text(d.data.origin)
svg
.append("polyline")
.attr('class','hoverLine')
.attr('points','200,375 550,300')
.style('stroke-width','1')
.style('stroke','black')
d3.select(this).style('fill','deeppink')
}
function chimneyTextOut(event,d){
d3.selectAll('text.chimneyWords').remove()
d3.selectAll('polyline.hoverLine').remove()
d3.select(this).style('fill','white')
svg
.append("text")
.attr('x','100')
.attr('y','450')
//.attr('class','chimneyWords')
.attr('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill", "rgb(100,100,100)")
.text('Material: ')
svg
.append("text")
.attr('x','100')
.attr('y','475')
//.attr('class','chimneyWords')
.attr('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill", "rgb(100,100,100)")
.text('Age: ')
svg
.append("text")
.attr('x','100')
.attr('y','500')
//.attr('class','chimneyWords')
.attr('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill", "rgb(100,100,100)")
.text('Origin: ')
}
//end of the guts of the function
p.enter().append("polyline")//this is 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','pink')
.style('fill-opacity','1')
.style('stroke','black')
.style('stroke-width','1')
}
//////////////////////////////////////////////////////////chimney ends////////////////////////////////////////////////////
///// above is the body of the code
return svg.node();
}
houseButton
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"})
dataLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vT0r3SoqnYv_R4ZlqFfr3wmeMZfRV9JrdLnj3NjQcmp9wRd1Rf1tt1JFOGeqX2mK4CMP3e0wXLBeNXk/pub?output=csv'
data = d3.csv(dataLink,d3.autoType())
data[0].fabricator
chimneyCombined ={
var allData = []
for (let i = 0; i < chimneyData.length; i++) {
//for each line in my chimney array, combine it with the data from spreadsheet, and add that to allData
allData.push({geo:chimneyData[i],data:data[2]})
}
return allData
}
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.
