Microbie

@Microbie·7 public vizzes

Projection Transitions

This example demonstrates seamless transitions between dozens of geographic map projections, cycling automatically through options like Aitoff, Mercator, and Robinson. A dropdown menu also lets users manually select any projection. The visualization uses d3.geo.path with the geo.projection plugin to render world landmasses from TopoJSON data, along with graticules and sphere outlines. The code interpolates between projections using d3's transition system, updating the path generator's projection on a timer to animate the morphing effect smoothly in SVG.

Jul 25, 2018

Loading thumbnail…

Projection Transitions

Projection Transitions showcases a rotating sequence of over 40 map projections, including Aitoff, Mercator, and Winkel Tripel. The visualization draws world land boundaries from TopoJSON and overlays a geographic graticule, rendering each projection with d3.geo.path. A dropdown menu allows manual selection, while an automatic timer cycles through projections every 1.5 seconds. The code uses the d3.geo.projection plugin and applies SVG animations to transition smoothly between geographic coordinate systems.

Jul 25, 2018

Loading thumbnail…

Projection Transitions

A dropdown menu animates between 40+ map projections, swapping the rendered world map and graticule every 1.5 seconds. The visualization uses the `d3.geo.projection` plugin’s various projection constructors (e.g., `d3.geo.aitoff`, `d3.geo.robinson`) and renders land polygons via `d3.geo.path` with SVG paths, including a graticule overlay. The world-110m GeoJSON source feeds `topojson.feature` to build the land shapes. Selecting a projection from the menu triggers an animated transition between projections.

Jul 25, 2018

Loading thumbnail…

fresh block

A rotating showcase of many map projections, this visualization cycles through a menu of options at a fixed interval, displaying the Netherlands as a shaded landmass within a graticule grid on a spherical outline. It uses D3 v3 with `d3.geo.path` to render SVG paths and fades between projections using TopoJSON data from `NLD_adm0.json`. Manually selecting a projection from the dropdown stops the automatic rotation.

Jul 25, 2018

Loading thumbnail…

Geo (projection fitExtent)

This canvas-based visualization displays the world’s landmasses using an equirectangular projection, with a dashed border marking the projection’s fitted extent. The example uses the d3.geoPath and d3.geoProjection APIs to render GeoJSON data (sourced from Natural Earth) directly onto a 2D canvas. It rotates the projection by -603 degrees and calls the fitExtent method to scale and center the map within the given bounds, drawing both the geography and the extent box using canvas strokes.

Jul 24, 2018

Loading thumbnail…

Density Contours

Using d3-contour’s density estimation, this example visualizes the bivariate distribution of geyser eruptions with steel-blue contour lines overlaid on white data points. The code loads the faithful.tsv dataset, computes density contours via `d3.contourDensity` with a bandwidth of 40, and renders them as SVG paths using `d3.geoPath`. Axes are labeled “Idle (min.)” and “Erupting (min.)”, with `d3.axisBottom` and `d3.axisLeft` scaled linearly to map waiting time against eruption duration.

Apr 3, 2018

Loading thumbnail…

fresh block

Ten dark circles orbit a central point in a ring, but clicking one sends it to the middle while the others reposition around it. Hovering highlights a circle in red. Built with D3 v4, the example uses `d3.range` to generate data, SVG `circle` elements, and chained `transition().duration()` calls to animate positions. Mouse events (`mouseover`, `mouseout`, `click`) control selection and recoloring, with the selected index driving the layout calculation.

Feb 9, 2018