Skip to main content
100%

Gist 41ebb2653c9e933a9403679c689ae599

✓ Published0🌍 Public
Aanemochore
Last edited Jan 28, 2022
Created on Jan 28, 2022

This visualization renders the integers from 1 to 7 as a triangular stack of text lines, each line showing a progressively shrinking substring of the concatenated sequence. The code builds raw HTML with inline CSS, using a `p` element per number and increasing then decreasing `padding-left` values (in em units) to create the staggered layout. It relies on Python string slicing and a simple loop, with `SPACE` controlling the horizontal offset per step, and writes the output to `result.html`. The result is a static, center-aligned pyramid-like text display generated entirely through string manipulation and style attributes.

AI-generated description

Similar vizzes

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…

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

Gist adec20c8f8c3c8d064e2537154dbd24e

Twelve colored vertical stripes each follow a distinct path through a sequence of 12 positions, with each row in the embedded data array representing one stripe's order of positions over time. The visualization uses PHP-generated data from a series array to depict multiple permutations of the stripes, likely as an animated or layered transition. The arrangement highlights the variety of possible orderings while maintaining a consistent set of twelve colors or labels across the display.

Aannelid
63% match
Loading thumbnail…

Gist 0a0d7789633e1b7dddb0b7892df6e429

This example generates Pascal’s triangle as a series of nested arrays. The `generate` function recursively builds each row, using the values from the previous row to compute interior entries by adding the two numbers above them. The code shows a pure JavaScript algorithm with no external visualization libraries; it constructs the triangle data structure through array concatenation and iterative row assembly. The rendering approach is not implemented in this snippet, as the gist only contains the data-generation logic.

Aadisastew2
63% match
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged
62% match
Loading thumbnail…

Gist ce2d0ae16f469275661564df223c4a0c

This example displays a long, alphabetically sorted list of brush names in a scrolling text interface, with a large color swatch and hexadecimal color readout updating in real time. It uses a custom rendering loop with Canvas API drawing operations to generate a procedural color gradient based on mouse position. The code references `requestAnimationFrame` and Canvas `fillRect` to continuously repaint the background, while the list itself is rendered as plain HTML text. No external visualization libraries are used; the interaction is limited to mouse movement affecting the displayed color.

Aandybak
62% 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
62% match
Loading thumbnail…

Gist 0f60f320de06daf6e3d383d3f91f0088

This visualization showcases a typographic effect where a word is split into individual characters and rendered as a split-text animation using the Nunjucks templating engine to generate the phrase "Начать торговлю на" combined with post metadata. The code builds a series of `<span>` elements for each character, styling them with the class `link__char` to enable per-letter manipulation. The example relies on template looping and string splitting to prepare the text for d3.js or CSS-driven transitions, though the actual motion logic is not visible in the provided snippet.

KKopylovVitalik
61% match