Gist 1825fd83399f5e4df6f8b0d10399f465

100%

Gist 1825fd83399f5e4df6f8b0d10399f465

✓ Published0🌍 Public

Last edited Apr 11, 2019

Created on Apr 11, 2019

This example displays a hexagon grid built from scratch, with two layout modes: flat-topped and pointy-topped hexagons. The visualization shows how hexagonal tiling can be generated programmatically, calculating exact vertex positions and cell centers based on geometric constants. The HexGrid class handles both orientations, spacing cells in a brick-like pattern that accounts for row offsets. Using custom math rather than a charting library, the grid’s points are derived from basic trigonometry and coordinate arithmetic. The code logs grid dimensions and counts to the console, revealing the underlying structure of the hexagonal lattice.

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

70% match

Loading thumbnail…

Hexagon Mesh

This interactive visualization displays a mesh of hexagons that users can paint by clicking and dragging with the mouse. A black outline dynamically traces the boundary between filled and unfilled hexagons. The grid is generated on the fly using TopoJSON's geometry data structures, transformed through a custom D3 geo projection to create regular hexagon shapes. The boundary outlines are computed using the `topojson.mesh` API with a filter that identifies edges separating filled from empty cells, rendered as SVG paths via `d3.geo.path`.

Mmbostock

70% match

Loading thumbnail…

Hexagonal Binning

This example demonstrates hexagonal binning, aggregating 10,000 randomly generated points from `d3.randomNormal` into a grid of hexagons using the `d3-hexbin` plugin for D3 4.0. Each hexagon’s fill color reflects the local point density via a sequential `d3.scaleSequential` with the `d3.interpolateMagma` color scheme. The SVG rendering includes white hexagon strokes for visual separation, plus top and left axes built with `d3.axisTop` and `d3.axisLeft` on identity scales.

Mmbostock

70% match

Loading thumbnail…

Squares ↔ Hexagons

This example demonstrates a smooth morphing animation between two regular plane tilings: initially square cells transition into taller, non-regular hexagons. A grid of points is shifted horizontally by a changing offset each frame, and a Voronoi diagram is computed from these points using `d3.geom.voronoi`, rendering the resulting polygons as SVG paths. The offset moves point columns alternately, causing the cell shapes to transform continuously. The code uses `d3.timer` for the animation loop, with 2-pixel circles marking each generator point.

Mmbostock

68% match

Loading thumbnail…

Gist d740d28ab2549ada2394dbbe9728cd71

This visualization prints an alternating checkerboard pattern of spaces and hash symbols to the console, using standard JavaScript string concatenation and a nested `for` loop structure. The outer loop controls each row, while the inner loop builds the pattern by checking whether the row and column indices are even or odd. The code defines a fixed grid size of 8, generates each line into a string variable, and logs it with `console.log` before resetting the string for the next iteration. No external libraries are used; it relies solely on core JavaScript syntax and the console API.

MMistyBlunch

67% match

Loading thumbnail…

hexagon clip + blend

A grid of kitten images, each clipped to a hexagon shape, is arranged in a staggered pattern across the canvas. The images are layered with semi-transparent circles in pink, blue, and green, all using CSS screen blend modes to create overlapping color effects. The visualization is built with D3 v4, using SVG elements such as `clipPath` and `polygon` for the hexagonal clipping, and `append` with `.classed` to apply the clip. The code also references `d3.select` and `d3.scaleOrdinal` for color schemes, though the images come from external placeholder URLs.

PPatrick Wojda

67% match

Loading thumbnail…

Gist 81bb1fe48aaac31ecad321fb46af0847

The visualization maps discovered geospatial features onto a grid of cells, using color intensity to show the frequency of feature occurrences per cell. It highlights clusters of high-density areas, such as locations with counts of 23, 5, and 4, while most cells remain empty. The code uses JavaScript with a custom grid-rendering approach, likely employing canvas drawing or SVG elements, to display the distribution of features across the mapped region. Feature counts are stored in a two-dimensional array, with each cell’s value determining its visual encoding.

JJustinGOSSES

66% match

Loading thumbnail…

Square Grid

A grid of gray squares fills the view, with each square representing a single unit, arranged so that rows of ten, blocks of one hundred, and groups of one thousand are visually distinct. The count, displayed as a large number, animates upward or downward as the grid randomly updates to a new total between zero and ten thousand, using transitions to add or remove squares. The visualization uses D3 v4 with data joins and tweens to interpolate the numeric label, while the grid’s layout is computed via `d3.range` and positional math. This example is forked from Mike Bostock’s original block.

GGerardoFurtado

66% match