Notebooks 2.0 is here.
2023 Fall Studio 9/25 -Lower Manhattan Work & Transportation Plan
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.1px")
.style("fill",fillColor)
.on("mouseover",polyHover)
.on("mouseout",polyHoverOut)
function fillColor(d,i){
var color = "rgb(255,165,0)"
if(d.Transportation=="4, 5"){color="rgb(0,102,51)"}
if(d.Transportation=="2, 3"){color="blue"}
if(d.Transportation=="1"){color="rgb(180,0,0)"}
if(d.Transportation=="J, Z"){color="rgb(139,69,19)"}
if(d.Transportation=="FERRY"){color="pink"}
if(d.Transportation=="R, W"){color="rgb(255,255,0)"}
return color
}
//p.enter().append("polyline") //use this line after the first polyline is added
//.data(detail)
// .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","grey")//style
//.style("stroke-width","1px")
// .style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(baselines)
.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")
p.enter().append("polyline") //use this line after the first polyline is added
.data(red1)
.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","red")//style
.style("stroke-width","1.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(blue)
.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","blue")//style
.style("stroke-width","1.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(darkgreen)
.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","rgb(0,102,51)")//style
.style("stroke-width","1.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(yellow)
.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","yellow")//style
.style("stroke-width","1.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(darkred)
.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","rgb(180,0,0)")//style
.style("stroke-width","1.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(brown)
.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","rgb(139,69,19)")//style
.style("stroke-width","1.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(buscyan)
.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","rgb(128,255,255)")//style
.style("stroke-width","0.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(busgreen)
.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","rgb(153,255,102)")//style
.style("stroke-width","0.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(buspink)
.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","rgb(255,204,204)")//style
.style("stroke-width","0.5px")
.style("fill","none")
p.enter().append("polyline") //use this line after the first polyline is added
.data(outlined)
.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","white")//style
.style("stroke-width","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","355")
.attr("class","hoverText")
.text(d.BuildingType)
.style ("font-size", "5px")
svg
.append("text")
.attr("x","350")
.attr("y","360")
.attr("class","hoverText")
.text(d.Workersnumber)
.style ("font-size", "5px")
svg
.append("text")
.attr("x","350")
.attr("y","365")
.attr("class","hoverText")
.text(d.Transportation)
.style ("font-size", "5px")
svg
.append("text")
.attr("x","350")
.attr("y","370")
.attr("class","hoverText")
.text(d.Availability)
.style ("font-size", "5px")
svg
.append("text")
.attr("x","350")
.attr("y","375")
.attr("class","hoverText")
.text(d.TotalYearlyRidership2021)
.style ("font-size", "5px")
svg
.append("text")
.attr("x","350")
.attr("y","380")
.attr("class","hoverText")
.text(d.AvgWeekdayRidership2021)
.style ("font-size", "5px")
}
function polyHoverOut(){
d3.select(this).style("fill",fillColor)
svg.selectAll("text.hoverText").remove()
}
return svg.node();
}
brown = FileAttachment("brown.txt").tsv({array:true})
outlined = FileAttachment("outlined.txt").tsv({array:true})
outline = FileAttachment("outline.txt").tsv({array:true})
buscyan = FileAttachment("buscyan.txt").tsv({array:true})
busgreen = FileAttachment("busgreen.txt").tsv({array:true})
buspink = FileAttachment("buspink.txt").tsv({array:true})
darkred = FileAttachment("darkred.txt").tsv({array:true})
yellow = FileAttachment("yellow.txt").tsv({array:true})
darkgreen = FileAttachment("darkgreen.txt").tsv({array:true})
blue = FileAttachment("blue.txt").tsv({array:true})
baselines = FileAttachment("Baseline.txt").tsv({array:true})
red1 = FileAttachment("Red@1.txt").tsv({array:true})
detail = FileAttachment("detail.txt").tsv({array:true})
outlines = {
var list = outline
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
var Transportation
var Availability
var TotalYearlyRidership2021
var AvgWeekdayRidership2021
var PublicTransportnumber
var Bikednumber
var Walkednumber
var Drovenumber
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
Transportation = spreadsheet[k].Transportation
Availability = spreadsheet[k].Availability
TotalYearlyRidership2021 = spreadsheet[k].TotalYearlyRidership2021
AvgWeekdayRidership2021 = spreadsheet[k].AvgWeekdayRidership2021
PublicTransportnumber = spreadsheet[k].PublicTransportnumber
Bikednumber = spreadsheet[k].Bikednumber
Walkednumber = spreadsheet[k].Walkednumber
Drovenumber = spreadsheet[k].Drovenumber
}
}
//cleanLines.push({pts:st3[i],id:st3[i+1][0]})
cleanLines.push({pts:list[i],id:idNum,Address:Address,BuildingType:BuildingType,Workersnumber:Workersnumber,Transportation: Transportation,Availability:Availability,TotalYearlyRidership2021:TotalYearlyRidership2021,AvgWeekdayRidership2021:AvgWeekdayRidership2021,PublicTransportnumber:PublicTransportnumber,Bikednumber:Bikednumber,Walkednumber:Walkednumber,Drovenumber:Drovenumber})
}
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.
