2023 fall studio 9/7 Morgans Fork
chart = {
const width = 500,
height = 500;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var g = svg.append("g").attr("id", "paths");
var p = svg.selectAll("polyline") //d3 geopath
.data(outlines)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d.pts})//required attributes
.style("stroke","black")//style
.style("stroke-width","4px")
.style("fill","rgb(255,0,0)")
.on("mouseover",polyHover)
.on("mouseout",polyHoverout)
function polyHover(event,d) {
//console.log("Hello")
d3.select(this).style("fill", "purple")
svg
.append("text")
.attr("x", "100")
.attr("y","100")
.attr("class", "hoverText")
.text(d.Sq)
svg
.append("text")
.attr("x", "100")
.attr("y","20")
.attr("class", "hoverText")
.text(d.occ)
//.text("I love Case")
}
function polyHoverout() {
svg.selectAll("text.hoverText").remove()
d3.select(this).style("fill", "red")
}
return svg.node();
}
st3 = FileAttachment("square_test3.txt").tsv({array:true})
square_test = FileAttachment("square_test.txt").tsv({array:true})
outlines = {
var list = lines_test_morgan1
var spreadshet= buildinglist
var cleanLines = []
for (let i = 0; i < list.length-1; i=i+2) {
var id = list[i+1][0]
var idNum = Number(id)
var squareFt
var occupancy
var materials
for (let k = 0; k < spreadshet.length; k++) {
if(idNum =spreadshet[k].Address){
console.log("match!!!!!!!")
squareFt = spreadshet[k].Sq
occupancy = spreadshet[k].Occ
materials = spreadshet[k].Material
}
}
//cleanLines.push({pts:st3[i],id:st3[i+1][0]})
cleanLines.push({pts:list[i],id:idNum, Sq:squareFt,occ:occupancy,mat:materials})//add feture to our final list of object
}
return cleanLines
}
lines_test_morgan1 = FileAttachment("lines_test_morgan@1.txt").tsv({array:true})
buildingList_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vReljlcGoKtjsa_2mEiFK0FpZeEbVmG31BQFmcVc_6M_fyqZchydTD_hyc-Jz8DXEtFKqV5w8UHnGRe/pub?output=csv"
buildinglist = d3.csv(buildingList_link,d3.autoType)
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.
