rivers = FileAttachment("ne_50m_rivers_lake_centerlines.json").json()
Object.keys(rivers.features[0].properties)
scaleRankExtents = d3.extent(rivers.features, (d) => d.properties.scalerank)
srScale = d3.scaleLinear().domain(scaleRankExtents).range([1, 0])
d3.range(1, 13).map((d) => d3.interpolateBlues(srScale(d)))
d3 = require("d3", "d3-geo", "d3-geo-projection", "d3-geo-polygon")
projection = d3
.geoWinkel3()
.rotate([lonRotation, latRotation])
.scale(scale)
.translate([width / 2, height / 2])
path = d3.geoPath().projection(projection)
// 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
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();
}
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.
