Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
{
await visibility();
const draw = render(); // return the drawing function from the render() method
return renderGif(invalidation, draw, 1500, { preview: draw(0), pause: 1000 }); // render the gif
}
loop_render = () => {
// Create the svg
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.style("text-anchor", "middle")
.style('font-family', 'sans-serif')
.style("font-size", "12px");
// Add a white background
const rect = svg
.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "white");
// Add a path for each projection
const paths = svg
.selectAll("path")
.data(projections, d => d.name)
.join("path")
.attr("d", d => {
// Define a projection
const projection = d3
.geoProjection(d.value)
.fitExtent(
[[10, 10], [width, height]],
topojson.feature(shapefile, shapefile.objects.countries)
);
// Set the projection and apply it to the data
const path_d = d3.geoPath().projection(projection)(path_data);
return path_d;
})
.style("fill", "none")
.style("stroke-width", .1);
// Return a function that takes in t and returns the node
return t => {
const _t = t < .5 ? t * 2 : (1 - t) * 2;
// Set the radius based on t, which will go from 0 to 1
paths.attr("stroke", (d, i) =>
(i + 1) / projections.length <= _t ? "black" : "white"
);
return svg.node();
};
}
{
await visibility();
const draw = loop_render(); // return the drawing function from the render() method
return renderGif(invalidation, draw, 3000, { preview: draw(0), pause: 0 }); // render the gif
}
path_data = topojson.mesh(shapefile)
import { projections } from "@d3/projection-transitions"
d3 = require("d3", "d3-geo@2", "d3-geo-projection@3")
// Load shapefile
shapefile = d3.json(
"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"
)
topojson = require("topojson-client@3")
height = 500
import { renderGif } from '@mootari/gif'
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.
