Published
Edited
Jul 26, 2022
City Scale Delivery Mapping
d3 = require("d3@6")
chart = {
const width = 1000,
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [20, 20, width-40, height-40]);
// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width, height], BBox)
//Background
svg
.append('rect')
.attr('fill', "rgb(84,84,84)")
.attr('x', 0)
.attr('y', 0)
.attr('width', 1000)
.attr('height', 1000)
//Title
svg
.append('text')
.attr('x', '50')
.attr('y', '60')
.attr('font-family','Janson Text LT Std')
.style('font-size','12pt')
.style("font-weight","bold")
.style("fill","rgb(255,255,255)")
.text('NYC DELIVERY DRONE MAPPING')
//Legend_Line
svg
.append('text')
.attr('x', '85')
.attr('y', '100')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text('Link to Nearest Drone Basement')
svg
.append('line')
.attr('class','legend')
.attr('x1',50)
.attr('y1',96)
.attr('x2',80)
.attr('y2',96)
.style('stroke-opacity','1')
.style("stroke-width", '1')
.style("stroke", "rgb(255,255,255)")
.attr('stroke-dasharray',"3 3")
//Legend_Drone Basement
svg
.append('text')
.attr('x', '85')
.attr('y', '125')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text('Drone Basement')
svg
.append('line')
.attr('class','legend')
.attr('x1',56)
.attr('y1',121)
.attr('x2',74)
.attr('y2',121)
.style('stroke-opacity','1')
.style("stroke-width", '3')
.style("stroke", "rgb(255,255,255)")
svg
.append('line')
.attr('class','legend')
.attr('x1',65)
.attr('y1',112)
.attr('x2',65)
.attr('y2',130)
.style('stroke-opacity','1')
.style("stroke-width", '3')
.style("stroke", "rgb(255,255,255)")
//Legend_Post Office
svg
.append('text')
.attr('x', '85')
.attr('y', '150')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text('Post Office Location')
svg
.append('circle')
.attr('cx', '65')
.attr('cy', '146')
.attr('r',8)
.attr('fill','rgb(235,171,144)')
.style('fill-opacity','0.3')
//Legend_Pharmacy
svg
.append('text')
.attr('x', '85')
.attr('y', '175')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text('Pharmacy Location')
svg
.append('circle')
.attr('cx', '65')
.attr('cy', '171')
.attr('r',8)
.attr('fill','rgb(205,214,200)')
.style('fill-opacity','0.3')
//Mapping
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 path6 = d3.geoPath().projection(projection);
var g = svg.append("g").attr("id", "paths");
g.selectAll("path1") //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", 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", '.5')
.style("stroke", "rgb(220,220,220)")
//Layer_Street
g.selectAll("path2") //d3 geopath
.data(StreetLine.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", '.15')
.style("stroke", "rgb(220,220,220)")
//Layer_Connection
g.selectAll("path3") //d3 geopath
.data(Connection.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('stroke-opacity','1')
.style("stroke-width", '0.85')
.style("stroke", "rgb(255,255,255)")
.attr('stroke-dasharray',"3 3")
.on('mouseover',ConnectionMouse)
.on('mouseout',ConnectionMouseOut)
function ConnectionMouse(event,d){
d3.select(this).style("stroke-width", '1.5')
.attr('stroke-dasharray',"3 0")}
function ConnectionMouseOut(event,d){
d3.select(this).style("stroke-width", '0.85')
.attr('stroke-dasharray',"3 3")}
//Layer_Drone Base
g.selectAll("path4") //d3 geopath
.data(DroneBase_poly.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('stroke-opacity','1')
.style("stroke-width", '0')
.style("stroke", "rgb(255,255,255)")
.on('mouseover',DbMouse)
.on('mouseout',DbMouseOut)
function DbMouse(event,d){
d3.select(this).style("stroke-width", '3')}
function DbMouseOut(event,d){
d3.select(this).style("stroke-width", '0')}
svg
.append('text')
.attr('x', '450')
.attr('y', '123')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Columbia Basement')
svg
.append('text')
.attr('x', '643')
.attr('y', '118')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Harlem Basement')
svg
.append('text')
.attr('x', '235')
.attr('y', '260')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('UpperWest Manhattan')
svg
.append('text')
.attr('x', '265')
.attr('y', '276')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Basement')
svg
.append('text')
.attr('x', '395')
.attr('y', '300')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('UpperEest Manhattan')
svg
.append('text')
.attr('x', '425')
.attr('y', '316')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Basement')
svg
.append('text')
.attr('x', '170')
.attr('y', '430')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Midtown Manhattan')
svg
.append('text')
.attr('x', '195')
.attr('y', '446')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Basement')
svg
.append('text')
.attr('x', '105')
.attr('y', '755')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Lower Manhattan')
svg
.append('text')
.attr('x', '125')
.attr('y', '771')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Basement')
svg
.append('text')
.attr('x', '355')
.attr('y', '730')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('LowerEest Manhattan')
svg
.append('text')
.attr('x', '385')
.attr('y', '746')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Basement')
svg
.append('text')
.attr('x', '325')
.attr('y', '895')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('DownTown Brooklyn')
svg
.append('text')
.attr('x', '350')
.attr('y', '911')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Basement')
svg
.append('text')
.attr('x', '640')
.attr('y', '920')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Central Brooklyn')
svg
.append('text')
.attr('x', '657')
.attr('y', '936')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Basement')
svg
.append('text')
.attr('x', '615')
.attr('y', '650')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Newtown Creek')
svg
.append('text')
.attr('x', '629')
.attr('y', '666')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Basement')
svg
.append('text')
.attr('x', '800')
.attr('y', '610')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('Queens Basement')
svg
.append('text')
.attr('x', '775')
.attr('y', '370')
.attr('font-family','Janson Text LT Std')
.style('font-size','8pt')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.style("fill-opacity","0.9")
.text('SunnySide Basement')
//Layer_Pharmacy & PostOffice
g.selectAll("path5") //d3 geopath
.data(PharmCircle.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(205,214,200)")
.style("fill-opacity", ".3")
.on('mouseover',PharmCir)
.on('mouseout',PharmCirOut)
function PharmCir(event,d){
d3.select(this).style("fill-opacity", ".6")}
function PharmCirOut(event,d){
d3.select(this).style("fill-opacity", ".3")}
g.selectAll("path6") //d3 geopath
.data(PostCircle.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(235,171,144)")
.style("fill-opacity", ".3")
.on('mouseover',PostCir)
.on('mouseout',PostCirOut)
function PostCir(event,d){
d3.select(this).style("fill-opacity", ".6")}
function PostCirOut(event,d){
d3.select(this).style("fill-opacity", ".3")}
var c = svg.selectAll("circle") //d3 geopath
.data(Pharm.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',2)
.attr('fill','rgb(255,255,255)')
.style('fill-opacity','1')
.on('mouseover',Pharmouse)
.on('mouseout',PharmouseOut)
function Pharmouse(event,d){
d3.select(this).attr('r',5)
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 220)
.attr('font-family','Janson Text LT Std')
.style('font-size','10pt')
.attr('text-anchor','front')
.style("font-weight","bold")
.style("fill","rgb(255,255,255)")
.text("Pharmacy Information")
svg
.append('line')
.attr('class','review')
.attr('x1',50)
.attr('y1',225)
.attr('x2',194)
.attr('y2',225)
.style('stroke-opacity','1')
.style("stroke-width", '2')
.style("stroke", "rgb(255,255,255)")
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 240)
.attr('font-family','Janson Text LT Std')
.style('font-size','6pt')
.attr('text-anchor','front')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text("Name : "+d.properties.sitename)
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 254)
.attr('font-family','Janson Text LT Std')
.style('font-size','6pt')
.attr('text-anchor','front')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text("Address : "+d.properties.address)
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 268)
.attr('font-family','Janson Text LT Std')
.style('font-size','6pt')
.attr('text-anchor','front')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text("Open : "+d.properties.days_hours)
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 282)
.attr('font-family','Janson Text LT Std')
.style('font-size','6pt')
.attr('text-anchor','front')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text("Phone : "+d.properties.phonenum)}
function PharmouseOut(event,d){
d3.select(this).attr('r',2)
d3.selectAll('text.review').remove()
d3.selectAll('line.review').remove()}
c.enter().append('circle')
.data(Post.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',2)
.attr('fill','rgb(255,255,255)')
.style('fill-opacity','1')
.on('mouseover',Postmouse)
.on('mouseout',PostmouseOut)
function Postmouse(event,d){
d3.select(this).attr('r',5)
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 220)
.attr('font-family','Janson Text LT Std')
.style('font-size','10pt')
.attr('text-anchor','front')
.style("font-weight","bold")
.style("fill","rgb(255,255,255)")
.text("Post Office Information")
svg
.append('line')
.attr('class','review')
.attr('x1',50)
.attr('y1',225)
.attr('x2',202)
.attr('y2',225)
.style('stroke-opacity','1')
.style("stroke-width", '2')
.style("stroke", "rgb(255,255,255)")
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 240)
.attr('font-family','Janson Text LT Std')
.style('font-size','6pt')
.attr('text-anchor','front')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text("Name : "+d.properties.name)
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 254)
.attr('font-family','Janson Text LT Std')
.style('font-size','6pt')
.attr('text-anchor','front')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text("Address : "+d.properties.housenum +" "+d.properties.streetname)
svg
.append("text") //appends path to data
.attr('class','review')
.attr("x", 50)
.attr("y", 268)
.attr('font-family','Janson Text LT Std')
.style('font-size','6pt')
.attr('text-anchor','front')
.style("font-weight","roman")
.style("fill","rgb(255,255,255)")
.text("Zip Code : "+d.properties.zip)}
function PostmouseOut(event,d){
d3.select(this).attr('r',2)
d3.selectAll('text.review').remove()
d3.selectAll('line.review').remove()}
return svg.node();
}
BBox = FileAttachment("Bounding Box.geojson").json()
StreetLine = FileAttachment("Street Line_S.geojson").json()
Boundary = FileAttachment("Borough Boundary.geojson").json()
Connection = FileAttachment("Connection.geojson").json()
DroneBase_poly = FileAttachment("Drone Base_Poly.geojson").json()
Pharm = FileAttachment("Pharmacy.geojson").json()
Post = FileAttachment("Post Office.geojson").json()
PharmCircle = FileAttachment("Pharm Circle.geojson").json()
PostCircle = FileAttachment("Post Circle.geojson").json()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.