Public
Edited
Feb 6, 2023
Insert cell
# base map - Feb 01 2023
Insert cell
d3 = require("d3@6")
Insert cell
chart = {
const width = 1000,
height = 1000;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width- 50, height- 50]);

// Use Mercator projection
var projection = d3
.geoMercator()
.fitSize([width - 100, height - 100], wb_adm0_boundary_lines_10m_lowres);

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("path3") //d3 geopath
.data(wb_coastlines_10m_lowres.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", "black")
.style("fill-opacity", "1")
.style('stroke-opacity','0.5')
.style("stroke-width", '0.5')
.style("stroke", "rgb(0,0,0)")

var cir = svg.selectAll("circle") //d3 geopath
.data(mmap) //get data to define path
.enter() //there are more data than elements, this selects them
.append("circle") //appends path to data
//.attr('class','outlines')
.attr("r", "3") //The d attribute defines a path to be drawn, only applies to appended elements
.attr("cx", function(d) {return projection([d.Long,d.Lat])[0]})
.attr("cy", function(d) {return projection([d.Long,d.Lat])[1]})
.style("fill", "magenta")
.style("fill-opacity", "1")
.style('stroke-opacity','1')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")


return svg.node();
}
Insert cell
wb_adm0_boundary_lines_10m_lowres = FileAttachment("WB_Adm0_boundary_lines_10m_lowres.geojson").json()
Insert cell
usa_outline = FileAttachment("usa_outline.geojson").json()
Insert cell
bbox = FileAttachment("usa_boundary.geojson").json()
Insert cell
boundary = FileAttachment("usa_outline.geojson").json()
Insert cell
Insert cell
mmap = d3.csv(mmapLink,d3.autoType())
Insert cell
wb_coastlines_10m_lowres = FileAttachment("WB_Coastlines_10m_lowres.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