base map - cornell 2023
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], boundingboxjan21);
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 g = svg.append("g").attr("id", "paths");
g.selectAll("bbox") //d3 geopath
.data(boundingboxjan21.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("fill", "rgb(49,50,49)")
.style('stroke-opacity','0')
.style("stroke-width", '0')
.style("stroke", "none")
g.selectAll("path1") //d3 geopath
.data(Openspace.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", "pink")
.style('stroke-opacity','1')
.style("stroke-width", '.15')
.style("stroke", "rgb(255,255,255)")
g.selectAll("path2") //d3 geopath
.data(footprint.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", '.50')
.style("stroke", "rgb(238,62,150)")
g.selectAll("path3") //d3 geopath
.data(subway.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(240,240,240)")
.style("fill-opacity", ".1")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(255,255,255)")
var c = svg.selectAll("circle") //d3 geopath
.data(afterschool.features)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',5)
.attr('fill','rgb(71,200,245)')
.style('fill-opacity','40')
var c = svg.selectAll("circle") //d3 geopath
.data(wifi.features)
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
.attr("cx", function(d) {return path1.centroid(d)[0]})
.attr("cy", function(d) {return path1.centroid(d)[1]})
.attr('r',3)
.attr('fill','rgb(255,205,52)')
.style('fill-opacity','1')
var t = svg.selectAll("text") //d3 geopath
.data(afterschool.features)
.enter() //there are more data than elements, this selects them
.append("text") //appends path to data
.attr("x", function(d) {return path1.centroid(d)[0]})
.attr("y", function(d) {return path1.centroid(d)[1]})
.style("font-family","helvetica")
.style("font-weight","600")
.style("font-size","5px")
.style('fill','rgb(0,153,205)')
.style("text-anchor","middle")
.text(function(d) {return d.properties.name})
var wrap = svg.selectAll("text.dText")
.each(function(d, i) { wrap_text(d3.select(this), 150) });
c.enter().append("circle")//
.data(schooldata)
.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',8)
.attr('fill','rgb(0,153,205)')
.style('fill-opacity','1')
.on("mouseover", schoolover)
.on("mouseout", schoolremove)
function schoolover(i,d) {
console.log(d.name)
svg .append("text")
.attr("class","dText")
.attr("x","80")
.attr("y","200")
.style("font-family","helvetica")
.style("font-weight","600")
.style("font-size","8px")
.style("text-anchor","start")
.style('fill','rgb(238,62,150)')
.text(d.name)
svg .append("text")
.attr("class","dText")
.attr("x","200")
.attr("y","210")
.style("font-family","helvetica")
.style("font-weight","600")
.style("font-size","5px")
.style('fill','rgb(238,62,150)')
.style("text-anchor","start")
.text(d.about)
var wrap = svg.selectAll("text.dText")
.each(function(d, i) { wrap_text(d3
.select(this), 100) });
svg.append("line")
.attr("x1","200")
.attr("y1","210")
.attr("x2",projection([d.long,d.lat])[0])
.attr("y2",projection([d.long,d.lat])[1])
.stroke("stroke","black")
.stroke("width","2px")
}
function schoolremove() {
svg.selectAll("text.dText").remove()
}
svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr('r',30)
.attr('fill','white')
.style('fill-opacity','1')
.on("mouseover", Showroute)
.on("mouseout", Routeremove)
function Showroute(i,d){
var p = svg.selectAll("polyline")
.data(lineCon)
.enter()
.append("polyline")
.attr("class","rline")
.attr("points",function(d){return d})
.style("stroke","rgb(73,194,198)")
.style("stroke-width","2px")
.style("fill","none")
p.enter().append("polyline")
.data(lineRun)
.enter()
.append("polyline")
.attr("class","rline")
.attr("points",function(d){return d})
.style("stroke","rgb(255,205,52)")
.style("stroke-width","2px")
.style("fill","none")
p.enter().append("polyline")
.data(bookicon)
.enter()
.append("polyline")
.attr("class","rline")
.attr("points",function(d){return d.icon})
.style("stroke","rgb(203, 195, 227)")
.style("stroke-width","2px")
.style("fill","none")
.attr("transform", function(d){return'translate('+projection([d.longitude,d.lat])[0]+" "+projection([d.longitude,d.lat])[1]+")"})
}
function Routeremove(){
svg.selectAll("polyline.rline").remove()
}
var p = svg.selectAll("polyline")
.data(drone)
.enter()
.append("polyline")
.attr("class","rline")
.attr("points",function(d){return d})
.style("stroke","rgb(73,194,198)")
.style("stroke-width","1px")
.style("fill","none")
return svg.node();
}
curveThing = FileAttachment("curve thing.txt").tsv({array:true})
lineConnect2 = FileAttachment("Line Connect2.geojson").json()
library2 = FileAttachment("library@2.geojson").json()
boundingboxjan21 = FileAttachment("boundingboxjan2.geojson").json()
afterschool = FileAttachment("Afterschool.geojson").json()
bbox = FileAttachment("boundingnyc.geojson").json()
bldgs = FileAttachment("bldgs.geojson").json()
Openspace = FileAttachment("openspace@1.geojson").json()
footprint = FileAttachment("footprint.geojson").json()
wifi = FileAttachment("hotspot.geojson").json()
subway = FileAttachment("subwaylines.geojson").json()
bbox2 = FileAttachment("box.geojson").json()
subLns = FileAttachment("subway_lines.geojson").json()
schoollink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRzPspmeM3Zx0KIFpslVzyX_B0hqTdsXPMkcgH9kVEunFejgrL9eHhe34jL_S-DPOKPOYkEceoNuVdD/pub?output=csv"
schooldata = d3.csv(schoollink,d3.autoType)
import { wrap_text, wrap_text_nchar } from "@ben-tanen/svg-text-and-tspan-word-wrapping"
boundingboxjan2 = FileAttachment("boundingboxjan@2.geojson").json()
lineC = FileAttachment("line c.txt").tsv({array:true})
lineCon = FileAttachment("line con.txt").tsv({array:true})
lineRun = FileAttachment("line run.txt").tsv({array:true})
drone = FileAttachment("drone.txt").tsv({array:true})
book = FileAttachment("Book.txt").tsv({array:true})
book1 = FileAttachment("Book@1.txt").tsv({array:true})
bookicon = {
var combinedData = []
for (let i = 0 ; i <schooldata.length; i++) {
combinedData.push({name:schooldata[i].name,lat:schooldata[i].lat,long:schooldata[i].long,about:schooldata[i].about,icon:book1})
}
return combinedData
}
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.
