base map - Colin's Copy
d3 = require("d3@6")
chart = {
const width = 960,
height = 800;
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);//any path that comes from qgis
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");
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", '1.5')
.style("stroke", "rgb(200,128,0)")
g.selectAll("path4") //d3 geopath
.data(parks.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(0,128,0)")
.style("fill-opacity", ".7")
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", '.3')
.style("stroke", "rgb(0,0,0)")
g.selectAll("path5") //d3 geopath
.data(water.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(15,94,156)")
.style("fill-opacity", ".5")
var c = svg.selectAll("circle") //d3 geopath
.data(personal_spots)
.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',6)
.attr('fill','rgb(255,192,203)')
.style('fill-opacity','.8')
.style("stroke-opacity",'1')
.style("stroke-width",'1.5')
.style("stroke","black")
.on('mouseover', spotDescription)
.on('mouseout', removespotdescription)
function spotDescription(event,d){
console.log(d)
svg
.append('text')
.attr('x','400')
.attr('y','500')
.attr('class','spot_position')
.text(d.description)
.attr('font-family','Raleway')
.attr('font-size','12px')
.style ('fill','black')
.style('font-weight','bold')
svg
.append('text')
.attr('x','400')
.attr('y','470')
.attr('class','spot_position')
.text(d.name)
.attr('font-size','32px')
.style('font-family','Raleway')
.style('fill','black')
.style('font-weight','bold')
svg
.append("line")
.attr ('x1', projection([d.long,d.lat])[0])
.attr ('y1', projection([d.long,d.lat])[1])
.attr ('x2', '400')
.attr ('y2', projection([d.long,d.lat])[1])
.attr ('class','remline')
.style("stroke-width", '.4')
.style("stroke", "rgb(0,0,0)")
.style('stroke-dasharray', '4')
svg
.append("line")
.attr ('x1', '400')
.attr ('y1', '500')
.attr ('x2', '400')
.attr ('y2', projection([d.long,d.lat])[1])
.attr ('class','remline')
.style("stroke-width", '.4')
.style("stroke", "rgb(0,0,0)")
.style('stroke-dasharray', '4')
}
function removespotdescription(){
d3.selectAll("text.spot_position").remove()
d3.selectAll("line.remline").remove()
}
svg
.append("text")
.attr("x","90")
.attr("y","150")
.style("font-family","Raleway")
.style('font-size','22px')
.style('font-weight','bold') //use fill to change the style of the font
.text('Choppin it up in Chelsea')
svg
.append("text")
.attr("x","90")
.attr("y","190")
.style("font-family","Raleway")
.style('font-size','17px')
.style('font-weight','light') //use fill to change the style of the font
.text('My Favorite Places')
svg
.append("line")
.attr ('x1', '90')
.attr ('y1', '160')
.attr ('x2', '330')
.attr ('y2', '160')
.style("stroke-width", '.4')
.style("stroke", "rgb(0,0,0)")
svg
.append("line")
.attr ('x1', '90')
.attr ('y1', '200')
.attr ('x2', '230')
.attr ('y2', '200')
.style("stroke-width", '.4')
.style("stroke", "rgb(80,80,80)")
return svg.node();
}
parks = FileAttachment("Parks.geojson").json()
bldgs = FileAttachment("Buildings.geojson").json()
water = FileAttachment("water outline.geojson").json()
bbox = FileAttachment("bounding box.geojson").json()
subLns = FileAttachment("Subways.geojson").json()
personal_spots_link = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRzYx__N941aYl4J32-uUYE4CYUNevUTou1i9-u4jBgGRJksAKe8WtYs8CPIXlonKMiSwWBp3A8cutC/pub?output=csv'
personal_spots = d3.csv(personal_spots_link,d3.autoType)
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.
