Public
Edited
Nov 11, 2022
1 star
Insert cell
Insert cell
Insert cell
rivers = FileAttachment("ne_50m_rivers_lake_centerlines.json").json()
Insert cell
Insert cell
Object.keys(rivers.features[0].properties)
Insert cell
Insert cell
scaleRankExtents = d3.extent(rivers.features, (d) => d.properties.scalerank)
Insert cell
Insert cell
srScale = d3.scaleLinear().domain(scaleRankExtents).range([1, 0])
Insert cell
Insert cell
d3.range(1, 13).map((d) => d3.interpolateBlues(srScale(d)))
Insert cell
Insert cell
Insert cell
d3 = require("d3", "d3-geo", "d3-geo-projection", "d3-geo-polygon")
Insert cell
Insert cell
projection = d3
.geoWinkel3()
.rotate([lonRotation, latRotation])
.scale(scale)
.translate([width / 2, height / 2])
Insert cell
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
Insert cell
// Many map projections are 2:1 aspect ratio, conforming to the longitude:latitude ratio.
// This is just a best guess, as an appropriate value would depend on the specific projection used.
height = width / 2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
map = {
//svg container
const svg = d3.create("svg").attr("width", width).attr("height", height);

//background rect
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", bgColor);

//There is a special geojson data type called "Sphere" which is often used to fill in the whole planet regardless of projected shape.
//So it's good as a background!
svg
.append("path")
.datum({ type: "Sphere" })
.attr("d", path)
.attr("fill", earthColor);

//add SVG group to keep things neat
svg
.append("g")
//standard data join
.selectAll(".rivers")
.data(rivers.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", (d) => d3.interpolateBlues(srScale(d.properties.scalerank)))
.attr(
"stroke-width",
(d) =>
maxRiverThickness * srScale(d.properties.scalerank) + minRiverThickness
)
.attr("fill", "none")
.attr("class", "rivers");

return svg.node();
}
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