Maps and Chartjunk for @nprapps
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width , height])
.attr("fill", "none")
.attr("stroke", "currentColor");
// Bring in the filters
applyPencilFilterTextures(svg);
const outline = svg.append("path")
.attr("fill","white")
.attr("id","earth")
const grid = svg.append("path")
.attr("stroke-width","0.5px")
.attr("stroke","#eee")
.attr("filter", "url(#pencilTexture4");
const feature = svg.append("path")
.attr("stroke-width", "3px")
.attr("fill","#eeeeee")
.attr("filter", "url(#pencilTexture3");
const linebox = svg.append("g").attr("id","lineBox");
const lines = linebox.selectAll(".lines")
.data(linesRaw.features.reverse())
.join("path")
.attr("class",d => `lines ${d.properties.class}`)
.attr("stroke","#0789ad");
function render() {
grid.attr("d", path(graticule));
outline.attr("d", path(sphere));
feature.attr("d", path(land));
lines.attr("d", d => path2(d))
}
let p1, p2 = [0, 0], r1, r2 = [0, 0, 0];
let z1, z2 = 400;
// Create the step through scene code here
function update(e) {
let item = arbitraryPoints.find(o => o.trigger == e)
p1 = p2, p2 = [item.lon,item.lat];
z1 = z2, z2 = item.zoom;
// Get the diff between current and next scene rotate/zoom
r1 = r2, r2 = [-p2[0], tilt - p2[1], 0];
const ip = d3.geoInterpolate(p1, p2);
const iv = Versor.interpolateAngles(r1, r2);
const zoomer = (t) => {return z1 + (z2-z1)*t};
// render the path between with a tween.
d3.transition()
.duration(1250)
.tween("render", () => t => {
projection.scale(zoomer(t));
projection.rotate(iv(t));
render();
})
.transition()
.tween("render", () => t => {
render();
})
.end();
return e;
}
update();
return Object.assign(svg.node(), {update});
}
<style>
#earth {
filter: drop-shadow(0px 0px 3px #333);
}
g#lineBox {
filter: url(#pencilTexture);
}
.lines {
filter: drop-shadow(0px 10px 3px #333);
stroke: #df6927;
stroke-width: 5px;
stroke-linecap: round;
/* marker-end: url(#pointer); */
}
.cold {
filter: drop-shadow(0px 2px 1px #333);
stroke: #6b8bec;
/* stroke-width:10px; */
}
</style>
land = {
let topology = world;
topology = topojson.presimplify(topology);
topology = topojson.simplify(topology, minArea);
return topojson.feature(topology, topology.objects.land);
}
path = geoCurvePath(d3.curveBasisClosed, projection)
path2 = geoCurvePath(d3.curveLinear, projection)
curve = d3.curveBasisClosed
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.
