Geoforms

100%

✓ Published0🌍 Public

Last edited Sep 17, 2016

Created on Sep 17, 2016

Geoforms visualizes a 600-cell, a four-dimensional regular polytope, by projecting its vertices and edges onto a two-dimensional canvas using the hypersolid.js library. The data, sourced from Paul Bourke’s Hyperspace User Manual, is loaded from a `.ascii` file via `d3.text` and parsed with `Hypersolid.parseVEF`. An animated canvas displays the rotating shape, with checkboxes controlling six independent rotations in the `xy`, `xz`, `xw`, `yz`, `yw`, and `zw` planes. The animation loop uses `requestAnimationFrame` to continuously update and redraw the projection.

AI-generated description

A 600-cell from Paul Bourke's Hyperspace User Manual.

Visualized with hypersolid.js by Miłosz Kośmider.

forked from <a href='http://bl.ocks.org/syntagmatic/'>syntagmatic</a>'s block: <a href='http://bl.ocks.org/syntagmatic/e6583e486f6df0c86b0f'>Tetraplex</a>

mit Licensed

Similar vizzes

Loading thumbnail…

geoFlow

A customizable, animated D3.js globe visualizes geographic data, transitioning smoothly between orthographic and map projections. It renders country boundaries, graticules, geodesic arcs, and city markers using SVG paths, with options to spin, zoom, and focus on specific countries. The visualization loads city populations from GeoJSON and can display earthquake data from a USGS feed, while a JavaScript console offers programmatic control through chained animation methods.

TTennisVisuals

72% match

Loading thumbnail…

geoFlow

geoFlow is an interactive D3.js globe and map visualization that lets users explore geographic data through smooth, animated transitions between globe and map projections. Built with D3 v4 and leveraging the `d3.geoGraticule` and `d3.geodesic` APIs, it plots earthquake data from USGS and city locations from a geonames dataset. The visualization supports zooming, rotating, and bouncing between countries, with animated geodesic paths and CSS-driven flow animations for data connections. It includes a console API for programmatic control, enabling tours, spin effects, and real-time data updates.

TTennisVisuals

71% match

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.

MMicrobie

70% match

Loading thumbnail…

geoShape

Six parametric curves define custom shapes on a sphere, each generated by a `d3.geoShape().generator(t)` function. These shapes animate, changing their position, size, and form every 800 milliseconds. The visualization uses D3 v4's `d3.geoPath` with a `d3.geoConicEqualArea` projection to render the sphere and the shapes as SVG paths. The shapes, filled with semi-transparent colors from `d3.schemeCategory10`, demonstrate how the `geoShape` generalization of `d3.geoCircle` creates diverse closed forms.

PPhilippe Rivière

69% match

Loading thumbnail…

geoVoronoi mesh()

This example shows a dynamic Voronoi diagram on a globe, with a mesh of cell boundaries overlaid on a rotating orthographic projection. It generates 100 random geographic points, computes their spherical Voronoi tessellation using the `d3.geoVoronoi` plugin, and renders the resulting polygons and sites as SVG paths via `d3.geoPath`. The animation uses `d3.interval` to rotate the projection over time, continuously redrawing all paths. The code relies on D3 v4, the d3-delaunay library, and custom geo-Voronoi logic, with a light beige sphere and dark gray mesh for contrast.

PPhilippe Rivière

69% match

Loading thumbnail…

geoVoronoi triangles()

This example visualizes a spherical Voronoi triangulation of 100 random points, with each triangle filled by a random hue and the original sites marked as white dots. The orthographic projection rotates continuously to reveal the globe’s surface. Built with d3-geo-voronoi and d3-delaunay, it uses d3.geoPath and d3.geoOrthographic to render SVG paths, while d3.interval drives the animation by updating the projection’s rotation every 50 milliseconds. The points are generated as a GeoJSON FeatureCollection with coordinates spanning longitude 0–360 and latitude from -90 to 90.

PPhilippe Rivière

68% match

Loading thumbnail…

Geodesic Grid

A rotating geodesic polyhedron wireframe displays a shimmering, three-dimensional grid atop a fixed circular frame. The visualization uses d3.geodesic to generate a subdivided icosahedron’s edges, rendered as an animated SVG path via d3.geo.path with an orthographic projection. The d3.timer continuously updates the projection’s rotate parameters, creating smooth, continuous motion.

Mmbostock

67% match

Loading thumbnail…

Colorful Flexagons

This interactive globe renders the world’s countries using D3’s geoOrthographic projection on a Canvas, layered with a graticule and a colorful overlay of the 122 base hexagons from Uber’s h3-js library. Each hexagon is stroked with a randomly generated color, creating a vibrant, flexagon-like pattern across the sphere. Users can drag to rotate the globe and zoom with the wheel, implemented via D3’s drag and zoom behaviors. Geographic data comes from the visionscarto-world-atlas TopoJSON source.

CCurran Kelleher

67% match