Skip to main content
SimilarExport ZIP
100%

See https://twitter.com/ftrain/status/267503513477713920

✓ Published0🌍 Public
RRandomEtc
Last edited Nov 11, 2012
Created on Nov 11, 2012

A Python function transforms a flat list into a nested structure, visually mapping upward trends as branching sublists. The example shows how `ftrain.py` recursively groups consecutive larger values, producing output like `[1, [2, [3, 3, [4, 4]], 2], 1]` from input `[1, 2, 3, 3, 4, 4, 2, 1]`. It uses a stack-based algorithm to detect increases and pop back on decreases, demonstrating a compact data reshaping technique. The source is a gist by RandomEtc, likely intended as a conceptual illustration rather than a formal visualization.

AI-generated description

See https://twitter.com/ftrain/status/267503513477713920

Similar vizzes

Loading thumbnail…

flatten Arrays

This example visualizes the recursive flattening of nested arrays into a single linear sequence. It shows a branching tree of values collapsing inward as the algorithm traverses each level, with individual elements animating into a final horizontal row. The code uses a custom `flatten` function that recursively iterates through nested arrays and pushes non-array values into a result array. Rendering relies on D3’s force simulation to position the collapsing nodes and transition paths, while the data itself is generated from arbitrary nested array structures defined in the source gist.

MMAKIO135
59% match
Loading thumbnail…

Circle-Packing

This example visualizes a hierarchical dataset as a circle-packing layout, where each leaf node is a circle sized by its value and nested groups are represented by larger containing circles. It shows the structure of a module tree from a CSV file, with color indicating depth and text labels clipped to leaf circles. The code uses `d3.stratify` to build the hierarchy from flat data, `d3.pack` for layout, and `d3.scaleSequential` with the `interpolateMagma` color scheme. Hovering highlights a node and all its ancestors via `d3.selectAll` with the `node--hover` class, rendered as SVG elements in a `<g>` container.

HHugoberry
54% match
Loading thumbnail…

Fork of TERGAR TRAINING - 2

This visualization displays a hierarchical tree structure using a horizontal dendrogram layout, with text labels sized inversely to node depth. The code loads CSV data from a GitHub gist and processes it through d3.stratify and d3.tree, rendering links via linkHorizontal paths and labels with SVG text. Pan and zoom capabilities are implemented using d3.zoom, applying transforms to a zoom group. The styling uses a custom Playfair Display font and green strokes for connections, with white text shadows for readability.

NNita
54% match
Loading thumbnail…

Fork of Fork of array to tree

This example converts a shuffled array of numbers into a hierarchical tree visualization. Using d3.stratify to structure the data and d3.tree to compute node positions, it renders red-stroked circles connected by black paths in an SVG. Each circle displays its corresponding array value as text, with a staggered transition duration that varies by tree depth, animating the label appearance. The visualization updates in place, removing and re-adding elements as new arrays are generated.

Sspandhanabadekol
54% 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
53% match
Loading thumbnail…

Fork of array to tree

This example converts a shuffled array of integers into a hierarchical tree structure. Using D3 v6’s `d3.stratify` and `d3.tree` layouts, it maps array indices to parent-child relationships and renders nodes as red-bordered circles connected by black paths. Text labels display each node’s value, with transitions animating their appearance based on tree depth. The visualization updates dynamically by re-rendering with a new random array, demonstrating data binding and enter/update/exit patterns in an SVG.

JJyothicherukuri
53% match
Loading thumbnail…

Gist 1ba2e157aea3eefadc42

This example shows how a large synthetic file hierarchy is created on a local file system, visualized as a tree-like directory structure. The code uses Python’s `os` module to programmatically create 50 top-level directories, each containing 1,000 subdirectories, and each subdirectory containing 1,000 text files, for a total of 50 million files. The file contents are identical placeholder text, and the visualization likely represents the nested structure using a tree or treemap layout, though the code itself only generates the data, not the graphic. No external visualization libraries are used in the provided script.

JJonasHeylen
53% match
Loading thumbnail…

rollup-nestby

The visualization demonstrates nested data aggregation by grouping and rolling up values across multiple categorical levels. It uses `d3.nest()` with `.key()` and `.rollup()` functions to transform raw data into a hierarchical structure, which is then rendered as a treemap layout. The color scale applies sequential chromatic interpolation from `d3-scale-chromatic` to encode aggregated values. A custom D3 build bundles modules including `d3-jetpack` utilities, with the visualization rendered as a static treemap using `d3.hierarchy()` and `d3.treemap()`. The example shows how nested hierarchies can be computed and displayed through layered grouping operations.

11wheel
53% match