Public
Edited
Feb 22, 2024
1 fork
Insert cell
Insert cell
Insert cell
data = d3.csv(datalink,d3.autoType())
Insert cell
data[1].fabricator
Insert cell
stonecombined = {
let alldata = []
for (let i = 0; i < stone.length; i++) {
alldata.push({geo: stone[i], data: data[1]})
}
return alldata
}
Insert cell
coppercombined = {
let alldata = []
for (let i = 0; i < copper.length; i++) {
alldata.push({geo: copper[i], data: data[0]})
}
return alldata
}
Insert cell
slatecombined = {
let alldata = []
for (let i = 0; i < slate.length; i++) {
alldata.push({geo: slate[i], data: data[2]})
}
return alldata
}
Insert cell
mainoutline = FileAttachment("Mainoutline.txt").tsv({array:true})
Insert cell
maininside = FileAttachment("Maininside.txt").tsv({array:true})
Insert cell
stone = FileAttachment("Stone.txt").tsv({array:true})
Insert cell
stoneinside = FileAttachment("Stoneinside.txt").tsv({array:true})
Insert cell
copper = FileAttachment("copper.txt").tsv({array:true})
Insert cell
copperinside = FileAttachment("copperinside.txt").tsv({array:true})
Insert cell
slate = FileAttachment("slate.txt").tsv({array:true})
Insert cell
slateinside = FileAttachment("slateinside.txt").tsv({array:true})
Insert cell
Guildhouse = {
const width = 1920,
height = 1080;

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

var p = svg.selectAll("polyline")

///////////////////////////////////////////////
if(guildbutton =="on"){
p.enter().append("polyline")
.data(mainoutline)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','none')
.style('stroke','black')
.style('stroke-width','.75')
}
///////////////////////////////////////////////
if(guildbutton =="on"){
p.enter().append("polyline")
.data(maininside)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','none')
.style('stroke','black')
.style('stroke-width','.25')
}
/////////////////////////////////////////////////
if(stonebutton =="on"){
p.enter().append("polyline")
.data(stoneinside)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','none')
.style('stroke','black')
.style('stroke-width','.75')
}
/////////////////////////////////////////////////
if (stonebutton=="on"){
p.enter().append("polyline")
.data(stonecombined)
.enter()
.append("polyline")
.attr('points',function(d){return d.geo})
.style('fill','none')
.style('stroke','black')
.style('stroke-width','.1')
.on('mouseover',stonedata)
.on('mouseout',stonedataout)
}
/////////////////////////////////////////////////
if(copperbutton =="on"){
p.enter().append("polyline")
.data(copperinside)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','none')
.style('stroke','black')
.style('stroke-width','.25')
}
/////////////////////////////////////////////////
if (copperbutton=="on"){
p.enter().append("polyline")
.data(coppercombined)
.enter()
.append("polyline")
.attr('points',function(d){return d.geo})
.style('fill','none')
.style('stroke','black')
.style('stroke-width','.1')
.on('mouseover',copperdata)
.on('mouseout',copperdataout)
}
/////////////////////////////////////////////////
if(slatebutton =="on"){
p.enter().append("polyline")
.data(slateinside)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','none')
.style('stroke','black')
.style('stroke-width','.25')
}
/////////////////////////////////////////////////
if(slatebutton =="on"){
p.enter().append("polyline")
.data(slateoutline)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','none')
.style('stroke','black')
.style('stroke-width','.75')
}
/////////////////////////////////////////////////
svg
.append("text")
.attr('x','50')
.attr('y','800')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text('part:')
svg
.append("text")
.attr('x','50')
.attr('y','825')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text('Material:')
svg
.append("text")
.attr('x','50')
.attr('y','850')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text('part:')
svg
.append("text")
.attr('x','50')
.attr('y','875')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text('age:')
svg
.append("text")
.attr('x','50')
.attr('y','900')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text('origin:')
svg
.append("text")
.attr('x','50')
.attr('y','925')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text('fabricator:')
/////////////////////////////////////////////////
function stonedata(event,d){

svg
.append("text")
.attr('x','130')
.attr('y','800')
.attr('class','stonetext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.part)
svg
.append("text")
.attr('x','130')
.attr('y','825')
.attr('class','stonetext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.materials)

svg
.append("text")
.attr('x','130')
.attr('y','850')
.attr('class','stonetext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.part)
svg
.append("text")
.attr('x','130')
.attr('y','875')
.attr('class','stonetext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.age)
svg
.append("text")
.attr('x','130')
.attr('y','900')
.attr('class','stonetext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.origin)
svg
.append("text")
.attr('x','150')
.attr('y','925')
.attr('class','stonetext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.fabricator)

svg
.append("text")
.attr('x','175')
.attr('y','950')
.attr('class','stonetext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.transportation)
d3.select(this).style('fill','brown')
}

function stonedataout(){
d3.selectAll('text.stonetext').remove()
d3.selectAll('line.hoverline').remove()
d3.select(this).style('fill','white')
}
/////////////////////////////////////////////////
function copperdata(event,d){

svg
.append("text")
.attr('x','130')
.attr('y','800')
.attr('class','coppertext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.part)
svg
.append("text")
.attr('x','130')
.attr('y','825')
.attr('class','coppertext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.materials)
svg
.append("text")
.attr('x','130')
.attr('y','850')
.attr('class','coppertext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.part)

svg
.append("text")
.attr('x','130')
.attr('y','875')
.attr('class','coppertext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.age)
svg
.append("text")
.attr('x','130')
.attr('y','900')
.attr('class','coppertext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.origin)
svg
.append("text")
.attr('x','150')
.attr('y','925')
.attr('class','coppertext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.fabricator)

svg
.append("text")
.attr('x','175')
.attr('y','950')
.attr('class','coppertext')
.style('font-family','helvetica')
.style('font-size','1em')
.style('font-weight','bold')
.style("fill","rgb(0,0,0)")
.text(d.data.transportation)
d3.select(this).style('fill','turqouise')
}

function copperdataout(){
d3.selectAll('text.coppertext').remove()
d3.selectAll('line.hoverline').remove()
d3.select(this).style('fill','white')
}
/////////////////////////////////////////////////
return svg.node();
}
Insert cell
bstoneoutline = {
const width = 1920,
height = 1080;

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

var p = svg.selectAll("polyline")

///////////////////////////////////////////////
p.enter().append("polyline")
.data(stone)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','brown')
.style('stroke','black')
.style('stroke-width','.25')

/////////////////////////////////////////////////
return svg.node();
}
Insert cell
gcopperoutline = {
const width = 1920,
height = 1080;

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

var p = svg.selectAll("polyline")

///////////////////////////////////////////////
p.enter().append("polyline")
.data(copper)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','turquoise')
.style('stroke','black')
.style('stroke-width','.25')

/////////////////////////////////////////////////
return svg.node();
}
Insert cell
slateoutline = {
const width = 1920,
height = 1080;

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

var p = svg.selectAll("polyline")

///////////////////////////////////////////////
p.enter().append("polyline")
.data(slate)
.enter()
.append("polyline")
.attr('points',function(d){return d})
.style('fill','red')
.style('stroke','black')
.style('stroke-width','.25')
/////////////////////////////////////////////////
return svg.node();
}
Insert cell
viewof copperbutton = Inputs.radio(["on", "Off"], {label: "Copper", value:"on"})
Insert cell
viewof stonebutton = Inputs.radio(["on", "Off"], {label: "Brownstone", value:"on"})
Insert cell
viewof slatebutton = Inputs.radio(["on", "Off"], {label: "Slate", value:"on"})
Insert cell
viewof guildbutton = Inputs.radio(["on", "Off"], {label: "Guild House", value:"on"})
Insert cell
dashboard =
html`
<div class='dashboard' style='height:760px;width:1350px'>

<div class='guildhouse' style='position:absolute;width:1000px;top:0px;left:0px'>
${Guildhouse}

</div>


<div class='text' style='position:absolute;top:500px;left60px;font-family:helvetica;font-size:18px'>
${md`**Guild House Dashboard**`}
${viewof guildbutton}
${viewof copperbutton}
${viewof slatebutton}
${viewof stonebutton}
</div>


</div>
`
Insert cell

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.
Learn more