Skip to main content
100%

Gist adec20c8f8c3c8d064e2537154dbd24e

✓ Published0🌍 Public
Aannelid
Last edited Feb 1, 2018
Created on Feb 1, 2018

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.

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 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
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 f8797295d3575bca4ec2c444e035e8bb

The visualization is a line chart showing a sequence of data points, rendered as a single continuous path. The line is drawn using SVG path data with a red stroke, positioned against a plain background with minimal styling. It appears to be a simple time-series or sequence plot, where the path connects coordinates across a fixed horizontal axis, with the line rising and falling as it progresses from left to right. The chart uses no axes, gridlines, or labels, suggesting a minimalist or abstract presentation of the data.

Aandybak
65% match
Loading thumbnail…

Tributary inlet

Ten vertical bars are arranged in a row, forming a stepped diagonal pattern that shifts from red at the top to green at the bottom. The visualization highlights a simple ordinal-to-linear color mapping, where the tallest bar corresponds to the deepest green and the shortest to bright red. Using D3’s selection and data binding, the code appends `rect` elements to an SVG canvas, computing each bar’s height, vertical position, and horizontal spacing from its index. A linear color scale with HSL interpolation drives the gradient, while the data consists of a static array of ten integers.

CCBasis
64% match
Loading thumbnail…

Tributary inlet

A small triangular cascade of red, blue, and green rectangles forms a stepped diagonal pattern, with each bar’s height increasing linearly along the horizontal axis. The visualization uses D3.js to bind an array of 30 numbers to SVG `rect` elements, positioning them at regular intervals while mapping each index to a distinct color via a three-color ordinal scale. The rendering approach relies on the classic enter selection pattern, setting width, x, y, and height attributes directly. This compact example demonstrates how ordinal color mapping and simple data-driven geometry can create a rhythmic, geometric composition.

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

Gist 6aa3450d9b856251aaedccbfbb552622

This visualization generates two concentric, spiral-like polylines from tabular data, with each line tracing a sequence of points along a circular path. The first series sweeps through a wide angular range, while the second covers a narrower band, creating a layered, oscillating pattern. The rendering relies on Power Query’s `#table` constructor to build the dataset and a custom `List.Accumulate` function to compute each point’s coordinates based on a category, step count, and angular start/end values. The resulting shape emphasizes the geometric relationship between the two angular intervals, showing how a simple parametric function can produce a visually rhythmic composition.

HHugoberry
64% match