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")
.attr("stroke","#808080")
.attr("filter", "url(#pencilTexture)");
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"})
world = FileAttachment("land-110m.json").json()
topojson = require("topojson@3")
d3 = require("d3@6")
import {zoom} from "@d3/versor-zooming"
import {geoCurvePath} from "@d3/context-to-curve"
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.
