Skip to main content
SimilarExport ZIP
100%

Hexagon Word List

✓ Published0🌍 Public
BBrideau
Last edited Dec 15, 2015
Created on Dec 15, 2015

A hexagon outline occupies the center of the screen, with seven randomly generated gibberish words stacked along its vertical axis. The words re-sort every two seconds as their associated scores change, causing entries to grow, shrink, and swap positions. The code uses d3.hexbin, Chance.js for word and integer generation, and underscore.js for sorting. SVG text elements animate font-size and y-position via d3 transitions.

AI-generated description

An automatically sorting list of words that fit into a hexagon. Words are currently gibberish.

Similar vizzes

Loading thumbnail…

Word Cloud

A word cloud visualizes a hardcoded list of words (e.g., “Hello,” “Coding,” “Van”) from `words.js` and `data.csv`. The layout uses the `d3.layout.cloud` library, which employs an Archimedean spiral and collision detection to position words. Rendered as SVG and canvas, the words appear in steelblue with a text-anchor, and the animation (via `timeInterval` and `dispatch`) progressively places each term. The `index.js` code uses canvas `getImageData` for font metrics and a bitmask board for collision checks.

BBaraneedharan N M
69% match
Loading thumbnail…

Untitled

A word cloud layout algorithm arranges words of varying font sizes within a bounded space. The browserify.js example generates random words and sizes, then renders them as SVG text elements with rotations and Impact font, centered on a 500×500 canvas. The core d3-cloud library uses a canvas-based sprite collision detection technique via `getImageData` to place words without overlap, employing an Archimedean spiral search pattern and a dispatch event system to signal layout completion.

Ttharanitaran
69% match
Loading thumbnail…

Word Cloud

This example shows a static word cloud built from a small set of predefined words, including "Hello," "Coding," and "Lovely Day." It uses the d3.layout.cloud API to compute word positions and angles, applying a fixed -45-degree rotation to every word. The words are rendered as SVG text elements, with a font size of 60 pixels and a steelblue fill. The data comes from a local `words.js` module, and the layout runs once, drawing all text at the center of the canvas.

BBaraneedharan N M
66% match
Loading thumbnail…

Untitled

This example shows a word cloud of eighteen basketball-themed phrases, such as "Jeremy Lin" and "Linpossible," rendered as orange Impact-font text on a white SVG canvas. The visualization uses the d3.layout.cloud API to compute word positions and rotations, with a fixed font size and rotation angle, and d3.v4 to append the SVG text elements. The word data is provided as a hardcoded JavaScript array, and the layout algorithm runs once to generate the final arrangement.

MMike Z
66% match
Loading thumbnail…

Dynamic Hexbin

Two thousand points sampled from a normal distribution drift in a circular path as the distribution’s center moves over time. A dynamic hexbin grid aggregates the points, with each hexagon’s fill color mapped sequentially from white to steelblue based on the number of points it contains. Built with D3 v4 and the d3-hexbin plugin, the animation uses d3.randomNormal to regenerate twenty points per frame and d3.timer to update the SVG paths continuously.

Mmbostock
66% 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
66% match
Loading thumbnail…

thing 0001

A word rendered as text is represented by hundreds of small squares that drift randomly across the screen before settling into the letterforms. The visualization rasterizes the word "enj" onto a hidden canvas using `fillText` and `getImageData`, sampling pixel coordinates as target positions. Each square is a `<rect>` whose position is animated by `d3.forceSimulation`, using `forceX`, `forceY`, and `forceCollide` to move particles toward their targets while preventing overlap. The color and stroke width vary with distance from the center, drawn on both SVG and canvas elements using D3 v4 and the `d3-scale-chromatic` color scale.

FFrissAnalytics
65% match
Loading thumbnail…

Wisdom words

Scattered colored circles fill an SVG canvas, each with randomized position, size, color, and opacity, set against a hidden background. The visualization demonstrates basic D3.js v5 capabilities, using `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` imported from the d3 module. Randomly generated data drives 250 circles, while the code also defines a long SVG path string containing a cursive "Wisdom words" text shape, though it remains unused in the visible output. The example shows importing D3 from a CDN and local ES6 modules within VizHub.

NNita
65% match