Public
Edited
Dec 20, 2023
Insert cell
# Financial District food Map
Insert cell
chart = {
const width = 400,
height = 475;
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","red")//style
.style("stroke-width",".5px")
.style("fill","blue")
.on("mouseover",polyHover)
.on("mouseout",polyHoverOut)
function polyHover(event,d){
console.log("hello studious students")
d3.select(this).style("fill","purple")
svg
.append("text")
.attr("x","235")
.attr("y","40")
.attr("class","hoverText")
.style("font-size", "10px")
.attr("color", "blue")
.text(d.Name)

svg
.append("text")
.attr("x","235")
.attr("y","50")
.attr("class","hoverText")
.style("font-size","10px")
.attr("color","blue")
.text(d.Category)
//.text("I love CASE 😀")

}
p.enter().append("polyline") //after we draw our first polyline, use this line
.data(finacial_district_foodmap_roads)
.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",".5px")
.style("fill","none")
p.enter().append("polyline") //after we draw our first polyline, use this line
.data(finacial_district_foodmap_buildingdet)
.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","gray")//style
.style("stroke-width",".3px")
.style("fill","none")
p.enter().append("polyline") //after we draw our first polyline, use this line
.data(finacial_distict_foodmap_parks)
.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","green")//style
.style("stroke-width",".3px")
.style("fill","none")
function polyHoverOut(event, d) {
d3.select(this).style("fill","blue")
svg.selectAll("text.hoverText").remove()
}

// Return the SVG node
return svg.node();
}
Insert cell
finacial_district_foodmap_buildingdet = FileAttachment("Finacial_District_Foodmap_Buildingdet.txt").tsv({array:true})
Insert cell

outlines = {

var list = finacial_district_foodmap_foodstops
var spreadsheet = buildingList
var cleanLines = []
for (let i = 0; i < list.length-1; i=i+2){
var id = list[i+1][0]

var Name
var Category

for (let k = 0; k < spreadsheet.length; k++) {
if(id==spreadsheet[k].Address){
console.log("match!!!!!!!")
Name = spreadsheet[k].Name
Category = spreadsheet[k].Category
}
}
cleanLines.push({pts:list[i],id:id, Name:Name, Category:Category, })//add features to our final list of objects
}
return cleanLines
}
Insert cell
finacial_district_foodmap_foodstops = FileAttachment("Finacial_District_Foodmap_Foodstops.txt").tsv({array:true})
Insert cell
finacial_district_foodmap_roads = FileAttachment("Finacial_District_Foodmap_roads.txt").tsv({array:true})
Insert cell
finacial_distict_foodmap_parks = FileAttachment("Finacial_Distict_Foodmap_Parks.txt").tsv({array:true})
Insert cell
Insert cell
buildingList = d3.csv(buildingList_link,d3.autoType)
Insert cell
finacial_district_foodmap_foodspaces = FileAttachment("Finacial_District_Foodmap_FoodSpaces.txt").tsv({array:true})
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