Transportation Key Points
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 projection = d3
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.5px")
.style("fill","lightblue")
.on("mouseover",polyHover)
.on("mouseout",polyHoverOut)
p.enter().append("polyline") //d3 geopath
.data(BuildingLines)
.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","purple")
.style("stroke-width","0.5px")
.style("fill","blue")
function polyHover(event,d){
//console.log("hello studious students")
d3.select(this).style("fill","darkblue")
svg
.append("text")
.attr("x","30")
.attr("y","400")
.attr("class","hoverText")
.text(d.Type)
//.text("I love CASE")
svg
.append("text")
.attr("x","30")
.attr("y","420")
.attr("class","hoverText")
.text(d.Name)
svg
.append("text")
.attr("x","30")
.attr("y","440")
.attr("class","hoverText")
.text(d.Location)
svg
.append("text")
.attr("x","30")
.attr("y","460")
.attr("class","hoverText")
.text(d.Accessible)
}
function polyHoverOut(){
d3.select(this).style("fill","lightblue")
svg.selectAll("text.hoverText").remove()
}
return svg.node();
}
outlines = {
var list = transport_lines
var spreadsheet = transportationList
var cleanLines = []
for (let i = 0; i < list.length-1; i=i+2) {
var id = list[i+1][0]
var idNum = Number(id)
var ty
var na
var loc
var acc
for (let k = 0; k < spreadsheet.length; k++) {
if(idNum==spreadsheet[k].ID){
//console.log("match!")
ty = spreadsheet[k].Type
na = spreadsheet[k].Name
loc = spreadsheet[k].Location
acc = spreadsheet[k].Accessible
}
}
cleanLines.push({pts:list[i],id:idNum,Type:ty,Name:na,Location:loc,Accessible:acc})//add features to final list of objects
}
return cleanLines
}
transportation_line = FileAttachment("Transportation_Line.txt").tsv({array:true})
transportation_link = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQcKsMFXAuDtoIo3slBWGhIElSl6R8K59rCyvVdoJZ8GjM-fO5TCY7ZRYON7EIh3nJq6e9zoDzx_tVD/pub?output=csv"
transportationList = d3.csv(transportation_link,d3.autoType)
transport_lines = FileAttachment("Transport_Lines.txt").tsv({array:true})
BuildingLines = FileAttachment("Building_Lines.txt").tsv({array:true})
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.
