Public
Edited
Sep 14, 2023
1 fork
2023 Fall Studio 9/14 -Lower Manhattan Work&Transportation
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","0.3px")
.style("fill","rgb(204,238,255)")
.on("mouseover",polyHover)
.on("mouseout",polyHoverOut)
p.enter().append("polyline") //use this line after the first polyline is added
.data(wt2)
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr("points", function(d) {return d})//required attributes
.style("stroke","black")//style
.style("stroke-width","0.1px")
.style("fill","none")
function polyHover(event,d){
d3.select(this).style("fill","red")
svg
.append("text")
.attr("x","350")
.attr("y","350")
.attr("class","hoverText")
.text(d.Address)
.style ("font-size", "5px")
svg
.append("text")
.attr("x","350")
.attr("y","360")
.attr("class","hoverText")
.text(d.BuildingType)
.style ("font-size", "5px")
svg
.append("text")
.attr("x","350")
.attr("y","370")
.attr("class","hoverText")
.text(d.Workersnumber)
.style ("font-size", "5px")
}
function polyHoverOut(){
d3.select(this).style("fill","rgb(204,238,255)")
svg.selectAll("text.hoverText").remove()
}
return svg.node();
}
wt2 = FileAttachment("WT2.txt").tsv({array:true})
test = FileAttachment("Test.txt").tsv({array:true})
hhhh = FileAttachment("hhhh.txt").tsv({array:true})
outlines = {
var list = test
var spreadsheet = 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 Address
var BuildingType
var Workersnumber
for (let k = 0; k < spreadsheet.length; k++) {
if(idNum==spreadsheet[k].Key){
//console.log("match!!!!!!!")
Address = spreadsheet[k].Address
BuildingType = spreadsheet[k].BuildingType
Workersnumber = spreadsheet[k].Workersnumber
}
}
//cleanLines.push({pts:st3[i],id:st3[i+1][0]})
cleanLines.push({pts:list[i],id:idNum,Address:Address,BuildingType:BuildingType,Workersnumber:Workersnumber})
}
return cleanLines
}
buildingList_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSDGd3cSjB7r7uIinAXf89rCPJK6WxXRy0OXM77w_JXFjzn_J90-2lHtyptVzZ2MjY7EeYknaUa5rqq/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.
