Public
Edited
Feb 15, 2024
dataLink = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRHxliHh3-sdkcQTo7sRadHoPdX6wiPB0R2DTqI3AlgUGAfnWgEk4iGcBlMe8-PgirNdP686IbFqy-S/pub?output=csv'
data = d3.csv(dataLink,d3.autoType())
data[0].Fabricator
windowCombined = {
var allData = []
for (let i = 0; i <window1.length; i++){
allData.push({geo:window1[i],data:data[0]})
}
return allData
}
houseDwg = {
const width = 800,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var p = svg.selectAll("polyline")
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-width','.3')
.attr('stroke-opacity','1')
.style('stroke','black')
}
if (windowButton=="on"){
svg
.append('text')
.attr('x','40')
.attr('y','450')
//.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text('Part: ')
svg
.append('text')
.attr('x','40')
.attr('y','500')
//.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text('Material: ')
svg
.append('text')
.attr('x','40')
.attr('y','550')
//.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text('Time: ')
svg
.append('text')
.attr('x','40')
.attr('y','600')
// .attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text('Origin: ')
svg
.append('text')
.attr('x','40')
.attr('y','650')
//.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text('Fabricator: ')
p.enter().append("polyline")
.data(windowCombined)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d.geo})
.style('fill','none')
.style('fill-opacity','.5')
.style('stroke-width','.5')
.attr('stroke-opacity', '1')
.style('stroke','black')
.on('mouseover',windowData)
.on('mouseout',windowDataOut)
function windowData(event,d){
svg
.append('line')
.attr('class','hoverLine')
.attr('x1','50')
.attr('y1','560')
.attr('x2','150')
.attr('y2','560')
.style('stroke-width','.5')
.style('stroke','black')
.style('stroke', 'magenta')
.style('stroke-dasharray','4,4,4,4')
// svg
// .append('text')
// .attr('x','75')
// .attr('y','500')
// .attr('class','windowText')
//.style("font-family","Helvetica")
// .style('fill','magenta')
// .style('text-anchor','middle')
// .text('Guild House')
svg
.append('text')
.attr('x','110')
.attr('y','450')
.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text(d.data.Part)
svg
.append('text')
.attr('x','110')
.attr('y','500')
.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text(d.data.Material)
svg
.append('text')
.attr('x','110')
.attr('y','550')
.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text(d.data.Time)
svg
.append('text')
.attr('x','110')
.attr('y','600')
.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text(d.data.Origin)
svg
.append('text')
.attr('x','170')
.attr('y','650')
.attr('class','windowText')
.style("font-family","Helvetica")
.style('font-size','.85em')
.style('font-weight', 'bold')
.style('fill','magenta')
.style('text-anchor','middle')
.text(d.data.Fabricator)
d3.select(this).style('fill','cyan')
}
function windowDataOut(){
d3.selectAll('text.windowText').remove()
d3.selectAll('line.hoverLine').remove()
d3.select(this).style('fill','white')
}
}
if (baseButton=="on"){
p.enter().append("polyline")
.data(base)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('stroke-width','.3')
.attr('stroke-opacity','1')
.style('stroke','black')
//.style('stroke-dasharray','4,4,4,4')
.style('fill','none')
}
if (detailButton=="on"){
p.enter().append("polyline")
.data(detail)
.enter() //there are more data than elements, this selects them
.append("polyline")
.attr('points',function(d){return d})
.style('stroke-width','.1')
.attr('stroke-opacity','1')
.style('stroke','black')
//.style('stroke-dasharray','4,4,4,4')
.style('fill','none')
}
return svg.node();
}
outline = FileAttachment("Outline.txt").tsv({array:true})
roof = FileAttachment("Roof@1.txt").tsv({array:true})
base = FileAttachment("Base.txt").tsv({array:true})
detail = FileAttachment("Detail.txt").tsv({array:true})
window1 = FileAttachment("Window@1.txt").tsv({array:true})
details = FileAttachment("Details.txt").tsv({array:true})
glass = FileAttachment("Glass.txt").tsv({array:true})
dashboardGraphics = {
const width = 1000,
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var p = svg.selectAll('polyline')
.data(flowerDashboard)
.enter()
.append('polyline')
.attr('class','shoe')
.attr('points',function(d){return d})
.style('fill', 'plum')
.style('stroke', 'black')
.style("stroke-width", '.3')
return svg.node();
}
dashboard =
html`
<div class='dashboardOuter' style='height:800px;width:800px'>
<div class='dashboardGraphics' 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;top:650px;left:150px;font-family:helvetica;font-size:14px;color:magenta;'>
${md`**Window Miles Calculator**`}
${viewof windowRange}
${md`**Total Window Miles:**`}
${windowMiles}
</div>
<div class='text' style='position:absolute;top:40px;left:550px;font-family:helvetica;font-size:26px;color:magenta;'>
${md`*House Dashboard*`}
${viewof roofButton}
${viewof windowButton}
${viewof baseButton}
${viewof detailButton}
</div>
</div>
`
viewof roofButton = Inputs.radio(["on", "off"], {label: "Roof Materials"})
viewof windowButton = Inputs.radio(["on", "off"], {label: "Window Materials"})
viewof baseButton = Inputs.radio(["on", "off"], {label: "Base Materials"})
viewof detailButton = Inputs.radio(["on", "off"], {label: "Detail Materials"})
roofButton
windowButton
baseButton
detailButton
viewof windowRange = Inputs.range([1500, 2200], {step: 1, label: "Number of Windows",value:1850})
windowRange + 1000
windowMiles = windowRange *Number(windowCombined[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.
