Gist 51c01feaecb233e0500851a1bb5ee30b

100%

Gist 51c01feaecb233e0500851a1bb5ee30b

✓ Published0🌍 Public

Last edited Apr 8, 2021

Created on Apr 8, 2021

This visualization displays the 93 isohedral tilings classified by their wallpaper group and tile shape. Each entry is represented as a small, clickable tile diagram, arranged in a grid. The code uses SVG paths to draw the geometric patterns and labels each with its IH number and group. The data comes from the provided TSV file, which is loaded and parsed to generate the layout.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

68% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

65% match

Loading thumbnail…

Gist 6430664ff001d9202e5ef55df4ade43c

A collection of small, square tiles arranged in two separate fields—one flat, one garden-like—forms a mosaic of colorful cells. The visualization uses Vue to render the layout while leveraging Canvas pixel manipulation for fine-grained control over the tile colors and patterns. The code references force simulation for distribution and image data extraction from a provided source, suggesting a data-driven generation of the organic, layered structure.

SStephen

64% match

Loading thumbnail…

Gist 0e347a46041a01aa3c4f

This example visualizes the Collatz conjecture by mapping each integer from 0 to 5199 to a small square, where the fill color encodes the number of cycles to reach 1 and the stroke color encodes the maximum value reached during the sequence. The squares are arranged in a grid, and hovering over a square updates a text label to show the exact cycle count and maximum for that number. The visualization uses D3.js (version 3.5.5) to compute the Collatz sequences, bind the data to SVG rectangles, and apply linear color scales with HSL interpolation for the two attributes. The layout positions squares sequentially in rows of fixed width, and the code notes that changing the width parameter alters the grid pattern.

CCBasis

63% match

Loading thumbnail…

Gist 8393672

This example visualizes a grid of geospatial tiles covering a region in Romania, with each tile representing a downloadable SRTM elevation data file. The map uses a GeoJSON FeatureCollection and renders polygon boundaries via D3's `d3.geoPath` projection. Each cell is labeled with its tile number, and a hover interaction likely reveals the associated download URL. The visualization relies on D3 for geographic path generation and the underlying data comes from a geomorphology website’s SRTM dataset, making the tile structure and coverage area immediately clear.

Aadkatrit

63% match

Loading thumbnail…

Gist 225a8101d5a07e32e73562acaa938692

This visualization uses a world map made of equally sized hexagonal tiles, with each country represented by a labeled hexagon. The tiles are colored in varying shades of blue, creating a choropleth-style effect that distinguishes geographic regions while maintaining a uniform grid layout. The map is generated from a JSON dataset listing country names and numeric codes, likely rendered with D3.js. Hovering over a hexagon highlights it, and the visualization appears to support zooming or panning for exploration. The title suggests a "gist" style example, focusing on a clean, tile-based cartogram aesthetic.

VVioletVivirand

63% match

Loading thumbnail…

Gist 20490743a658b8c43752d814c314c79e

This visualization renders uniform polyhedra using a kaleidoscopic construction method. The code computes vertex coordinates, faces, and symmetry groups from fundamental angles, then draws the three-dimensional shapes with projected lines and filled polygons. It uses standard C math and graphics routines for coordinate transformation and rendering, including trigonometric functions for rotation and perspective. The display cycles through different polyhedral types, showing their geometric structure through edge networks and face shading.

Aandybak

63% match

Loading thumbnail…

Mosaic II

A mosaic of hundreds of triangular tiles fills the browser window, each colored by a CIE Lab color model based on its distance and angle from the center. The tiles are generated by computing a Delaunay triangulation over a set of points sampled with a Poisson disc process, ensuring even spacing. The visualization uses the d3.v4 library, leveraging `d3.voronoi().triangles()` for the triangulation and `d3.polygonCentroid()` to determine each triangle's fill and stroke color.

AAjayyy

62% match