Published
Edited
Jul 14, 2022
Fork of base map
1 fork
Insert cell
# Assignment7_Base Map
Insert cell
d3 = require("d3@6")
Insert cell
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width-140, height-105]);

// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], bbox);
var path0 = d3.geoPath().projection(projection);
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");
//i'm not using the boundary lines, so I'm going to comment them out
g.selectAll("path0") //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", path0) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(181,222,225)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.4')
.style("stroke-width", '.0')
.style("stroke", "rgb(0,0,0)")

g.selectAll("path1") //d3 geopath
.data(land.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(255,255,255)")
.style("fill-opacity", "1")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path2") //d3 geopath
.data(park.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", "rgb(215,245,189)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.4')
.style("stroke-width", '.0')
.style("stroke", "rgb(0,0,0)")

g.selectAll("path3") //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", path3) //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')
.style("stroke", "rgb(89,135,149)")

g.selectAll("path4") //d3 geopath
.data(Block.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", path4) //The d attribute defines a path to be drawn, only applies to appended elements
.style("fill", "rgb(240,240,240)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")


var c = svg.selectAll("circle") //d3 geopath
.data(sub_stat.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(89,135,149)')
.style('fill-opacity','1')




return svg.node();
}
Insert cell
land = FileAttachment("Land.geojson").json()
Insert cell
SubLns = FileAttachment("Subway.geojson").json()
Insert cell
Block = FileAttachment("Block Boundary@1.geojson").json()
Insert cell
subSts = FileAttachment("sub_stops.geojson").json()
Insert cell
bldgs = FileAttachment("bldgs.geojson").json()
Insert cell
subLns = FileAttachment("subway_lines.geojson").json()
Insert cell
boundary = FileAttachment("nyc_boundary.geojson").json()
Insert cell
bbox = FileAttachment("Bbox.geojson").json()
Insert cell
park = FileAttachment("Park.geojson").json()
Insert cell
sub_stat = FileAttachment("Sub_Stop.geojson").json()
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