Maps and Chartjunk for @nprapps
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("fill", "none")
.attr("stroke", "currentColor");
applyPencilFilterTextures(svg);
const outline = svg.append("path")
.attr("fill","mintcream");
const feature = svg.append("path")
.attr("stroke-width", "3px")
.attr("fill","white")
function render() {
outline.attr("d", path(sphere));
feature.attr("d", path(land));
}
return svg
.call(zoom(projection).on("zoom.render end.render", render))
.call(render)
.node();
}
sphere = ({type: "Sphere"})
land = {
let topology = world;
topology = topojson.presimplify(topology);
topology = topojson.simplify(topology, minArea);
return topojson.feature(topology, topology.objects.land);
}
world = FileAttachment("land-110m.json").json()
d3 = require("d3@6")
import {zoom} from "@d3/versor-zooming"
import {geoCurvePath} from "@d3/context-to-curve"
projection = d3.geoOrthographic().precision(0.1);
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.
