base map - interactive map work
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 g = svg.append("g").attr("id", "paths");
//i'm not using the boundary lines, so I'm going to comment them out
/*
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", path1) //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(0,0,0)")
*/
g.selectAll("path2") //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", '.75')
.style("stroke", "rgb(0,0,0)")
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(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(subSts.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','black')
.style('fill-opacity','1')
.on('mouseover', growDot)
.on('mouseout', shrinkDot)
.on('click' , subClick )
function growDot(){
d3.select(this).attr('r', '5')
}
function shrinkDot(){
d3.select(this).attr('r', '3')
}
var newSubways = [] //list to hold new subway lines
var clickCoords = [] //list to record the start point of our line
var startPtData = []
var latlong = []
var subwayBudget = 3
writeSubwayBudget()
function subClick(event, d){
//console.log('click')
if (clickCoords.length == 1){
var startPoint = [latlong[0][0], latlong[0][1]]
var endPoint = [d.geometry.coordinates[0], d.geometry.coordinates[1]]
var subLength = turf.distance(startPoint, endPoint, {units: 'miles'})
//console.log(round(subLength, 3))
//console.log('ending at ' + d.properties.name)
//console.log('going from ' + startPtData[0].properties.name)
//connect the point in clickCoords to the current click
newSubways.push({x1: clickCoords[0][0], y1: clickCoords[0][1], x2: path1.centroid(d)[0], y2: path1.centroid(d)[1], length: subLength}) //create object w/newSubways
newSubLines() //function that draws new subway lines
subwayBudget = subwayBudget-subLength
writeSubwayBudget()
clickCoords = []
latlong = []
startPtData = []
}else{
//add current click point to clickCoords
clickCoords.push([path1.centroid(d)[0],path1.centroid(d)[1]])
latlong.push([d.geometry.coordinates[0], d.geometry.coordinates[1]])
startPtData.push(d)
}
console.log(clickCoords)
}
function newSubLines(){
//console.log('im in the function!')
var ln = svg.selectAll("line") //d3 geopath
.data(newSubways) //get data to define path
.enter() //there are more data than elements, this selects them
.append("line") //appends path to data
.attr('class','newSubwaysClass')
.attr('x1', function(d) {return d.x1})
.attr('y1', function(d) {return d.y1})
.attr('x2', function(d) {return d.x2})
.attr('y2', function(d) {return d.y2})
.style('stroke-opacity','1')
.style("stroke-width", '.5')
.style('stroke', 'gray')
}
function writeSubwayBudget(){
d3.selectAll('text.budget').remove()
svg
.append('text')
.attr('class', 'budget')
.attr('x', '800')
.attr('y', '800')
.attr('font-size', '2em')
.attr('font-family', 'Helvetica')
.text(round(subwayBudget,3))
}
return svg.node();
}
subSts = FileAttachment("sub_stops.geojson").json()
bldgs = FileAttachment("bldgs.geojson").json()
bbox = FileAttachment("site_boundary.geojson").json()
subLns = FileAttachment("subway_lines.geojson").json()
boundary = FileAttachment("nyc_boundary.geojson").json()
turf = require("@turf/turf@5")
round = (n, places) => {
if (!places) return Math.round(n);
const d = 10 ** places;
return Math.round(n * d) / d;
}
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.
