base map - cornell summer 2023 - 07/20 - in class
d3 = require("d3@6")
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width-100, height-100]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], bbox);
var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);
var path4 = d3.geoPath().projection(projection);
var path5 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
/////////// LINES = bounding box
g.selectAll("path1") //d3 geopath
.data(bbox.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path1) //The d attribute defines a path to be drawn, only applies to appended elements
.style("stroke", "none")
.style('fill-opacity','.25')
.style("fill", "rgb(237, 125, 58)")
/////////// LINES = borough boundaries
g.selectAll("path2") //d3 geopath
.data(boundary.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path1) //The d attribute defines a path to be drawn, only applies to appended elements
.style("stroke", "none")
.style('fill-opacity','1')
.style("fill", "rgb(240,240,240)")
/////////// LINES = building outlines
g.selectAll("path3") //d3 geopath
.data(bldgs.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(255,255,255)")
.style("fill-opacity", ".25")
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", "rgb(255,255,255)")
/////////// LINES = street centerlines
g.selectAll("path4") //d3 geopath
.data(stLns.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '1.25')
.style("stroke", "rgb(220,220,220)")
/////////// LINES = subway lines
g.selectAll("path5") //d3 geopath
.data(subLns.features) //get data to define path
.enter() //there are more data than elements, this selects them
.append("path") //appends path to data
.attr('class','outlines')
.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "none")
.style('stroke-opacity','1')
.style("stroke-width", '2')
.style("stroke", "rgb(200,200,200)")
svg.append("rect")
.attr("class","icon")
.attr("x","830")
.attr("y","770")
.attr("rx","5")
.attr("ry","5")
.attr("width","50")
.attr("height","50")
.style("fill","rgb(31, 1, 185)")
.style("fill-opacity",".75")
.style("stroke","white")
.style("stroke-width","3")
.on("mouseover",droneHover)
.on("mouseout",droneRemove)
function droneHover(i,d){
console.log("hello")
var route = svg.selectAll("polyline")
.data(droneRoute)
.enter()
.append("polyline")
.attr("class","dLine")
.attr("points",function(d){return d})
.style("stroke","rgb(31, 1, 185)")
.style("stroke-opacity",".5")
.style("stroke-width","1px")
.style("fill","none")
}
function droneRemove(){
svg.selectAll("polyline.dLine").remove()
}
var c = svg.selectAll("circle") //d3 geopath
/////////// DOTS = Chinese spots
c.enter().append("circle") //after the first use of a circle, use this method to add more
.data(chineseSpot)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return projection([d.long,d.lat])[0]})
.attr("cy", function(d) {return projection([d.long,d.lat])[1]})
.attr('r',10)
.attr('fill','white')
.style('stroke','rgb(237, 125, 58)')
.style('stroke-width','1px')
.on("mouseover",foodHover)
.on("mouseout",foodRemove)
function foodHover(i,d){
svg.append("rect")
.attr("class","textbox")
.attr("x","310")
.attr("y","610")
.attr("rx","5")
.attr("ry","5")
.attr("width","225")
.attr("height","100")
.style("fill","rgb(255,255,255)")
.style("fill-opacity",".75")
.style("stroke","rgb(255,255,255)")
.style("stroke-width", '2')
//restaurant name
svg.append("text")
.attr("class","fText")
.attr("x","325")
.attr("y","635")
.style("text-anchor","start")
.style("font-family","Lucida Sans")
.style("font-size","1em")
.style("font-weight","bold")
.style("fill","rgb(237, 125, 58)")
.style("fill-opacity",".5")
.text(d.name)
//restaurant description
svg.append("text")
.attr("class","fText")
.attr("x","325")
.attr("y","660")
.style("text-anchor","start")
.style("font-family","Lucida Sans")
.style("font-size",".5em")
.style("font-weight","light")
.style("fill","rgb(237, 125, 58)")
.style("fill-opacity",".5")
.text(d.description)
//dividing line
svg.append("line")
.attr("class","fLine")
.attr("x1",320)
.attr("y1",645)
.attr("x2",520)
.attr("y2",645)
.style("stroke","rgb(237, 125, 58)")
.style("stroke-width","1px")
.style("stroke-opacity",".5")
//restaurant price
svg.append("text")
.attr("class","fText")
.attr("x","520")
.attr("y","700")
.style("text-anchor","end")
.style("font-family","Lucida Sans")
.style("font-size",".5em")
.style("font-weight","bolder")
.style("fill","rgb(237, 125, 58)")
.style("fill-opacity",".5")
.text(d.price)
//restaurant cuisine
svg.append("text")
.attr("class","fText")
.attr("x","325")
.attr("y","700")
.style("text-anchor","start")
.style("font-family","Lucida Sans")
.style("font-size",".5em")
.style("font-weight","bolder")
.style("fill","rgb(237, 125, 58)")
.style("fill-opacity",".5")
.text(d.cuisine)
var wrap = svg.selectAll("text.fText")
.each(function(d,i){wrap_text(d3.select(this),200)});
svg.append("line")
.attr("class","fLine")
.attr("x1",projection([d.long,d.lat])[0])
.attr("y1",projection([d.long,d.lat])[1])
.attr("x2",100)
.attr("y2",projection([d.long,d.lat])[1])
.style("stroke","rgb(237, 125, 58)")
.style("stroke-width","2px")
.style("stroke-dasharray","2")
.style("stroke-opacity",".5")
svg.append("line")
.attr("class","fLine")
.attr("x1",100)
.attr("y1",projection([d.long,d.lat])[1])
.attr("x2",100)
.attr("y2",630)
.style("stroke","rgb(237, 125, 58)")
.style("stroke-width","2px")
.style("stroke-dasharray","2")
.style("stroke-opacity",".5")
svg.append("line")
.attr("class","fLine")
.attr("x1",100)
.attr("y1",630)
.attr("x2",300)
.attr("y2",630)
.style("stroke","rgb(237, 125, 58)")
.style("stroke-width","2px")
.style("stroke-dasharray","2")
.style("stroke-opacity",".5")
}
function foodRemove(){
svg.selectAll("text.fText").remove()
svg.selectAll("line.fLine").remove()
svg.selectAll("rect.textbox").remove()
}
/////////// DOTS = ATM locations
c.enter().append("circle") //after the first use of a circle, use this method to add more
.data(atmLoc)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return projection([d.long,d.lat])[0]})
.attr("cy", function(d) {return projection([d.long,d.lat])[1]})
.attr('r',4)
.attr('fill','rgb(31, 1, 185)')
.style('fill-opacity','.75')
.style('stroke','rgb(255,255,255)')
.style('stroke-width','1')
svg.append("text")
.attr("x","100")
.attr("y","750")
.style("text-anchor","start")
.style("font-family","Lucida Sans")
.style("font-size","2em")
.style("font-weight","bold")
.style("fill","white")
.text("ATM Drones Service Map")
svg.append("text")
.attr("x","100")
.attr("y","770")
.style("text-anchor","start")
.style("font-family","Lucida Sans")
.style("font-size","1em")
.style("font-weight","normal")
.style("fill","white")
.text("for cash-only restaurants")
var p = svg.selectAll("polyline")
.data(foodSpotwIcon)
.enter()
.append("polyline")
.attr("points",function(d){return d.icon})
.style("stroke","none")
.style("fill","rgb(237, 125, 58)")
.attr("transform",function(d){return "translate("+projection([d.long,d.lat])[0]+" "+projection([d.long,d.lat])[1]+")"})
.on("mouseover",atmRoutes)
.on("mouseout",atmRoutesRemove)
function atmRoutes(i,d){
if(d.name=="Fong On"){
p.enter().append("polyline")
.data(test)
.enter()
.append("polyline")
.attr("points",function(d){return d})
.attr("class","atmRoutes")
.style("stroke","rgb(237, 125, 58)")
.style("fill","none")
}
}
function atmRoutesRemove(){
svg.selectAll("polyline.atmRoutes").remove()
}
//function (d){return "translate"}
//.attr("transform","translate(50 100)")
// var p = svg.selectAll("polyline")
// .data(randomCrv)
// .enter()
// .append("polyline")
// .attr("points",function(d){return d})
// .style("stroke","black")
// .style("stroke-width","2px")
// .style("fill","black")
return svg.node();
}
subLns = FileAttachment("nyc_subway.geojson").json()
bldgs = FileAttachment("bldgs@1.geojson").json()
bbox = FileAttachment("site_boundary@3.geojson").json()
stLns = FileAttachment("nyc_street@1.geojson").json()
boundary = FileAttachment("nyc_boundary@1.geojson").json()
chineseSpotLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTgGHeZUd-zZ1u8HnEf7lqiu2U5UPk9Dyjamt_gl63Se4iL7b9uh33LZ2-J3ZzXUl_RgdEbYLta6EeM/pub?output=csv"
atmLocLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQV62foaNJv0Elt9kYd9IdtSPrudKGkymRQ8J2kH294DxLu1ASiCTU6cJrOvaWOAquQjFCGZgHAFgEX/pub?output=csv"
atmLoc = d3.csv(atmLocLink,d3.autoType)
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
droneRoute = FileAttachment("drone_route@2.txt").tsv({array:true})
chineseSpot = d3.csv(chineseSpotLink,d3.autoType)
foodicon = FileAttachment("foodIcon@4.txt").tsv({array:true})
foodSpotwIcon = {
var combinedData = []
for (let i = 0; i < chineseSpot.length; i++) {
combinedData.push({name:chineseSpot[i].name,lat:chineseSpot[i].lat,long:chineseSpot[i].long,description:chineseSpot[i].description,icon:foodicon})
}
return combinedData
}
test = FileAttachment("test.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.
