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`
<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='text' style='position:absolute;width:300px;top:50px;left:45px;font-family:helvetica;font-size:12px'>
${md`**Brick Miles Calculator**`}
${viewof brickRange2}
${md`**Total Brick Miles:**`}
${brickMiles}
</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"})
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)
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.
