block wall: thumbnails hilbert

100%

block wall: thumbnails hilbert

✓ Published0🌍 Public

Last edited Jul 27, 2018

Created on Jul 27, 2018

This visualization displays a curated collection of block thumbnails arranged in a Hilbert curve layout, creating a space-filling pattern that organizes visual snapshots of code blocks by their position in a sequence. Built with D3 v3 and React, the WebGL-animated view uses a Hilbert curve to order and place thumbnail images, where each thumbnail represents a block from the bl.ocksplorer.org project. The space-filling curve provides a spatial ordering that groups similar blocks together while maintaining a compact, structured wall of images. The visualization is interactive and was developed as part of a block-scanning workflow to explore and navigate the repository of D3 examples.

AI-generated description

A collection of blocks scanned with blockscanner for the bl.ocksplorer.org project and further processed with block-similarity.

If you don't see any of your blocks here, add your GitHub username
If you need to add thumbnails to your bl.ocks, use blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/6ac67b0d8ed673c9aa61'>all the blocks</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/1d679f0322174b65d032'>block wall</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/211bd42857358a60a936'>block wall: thumbnails only</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/7b63fef8ccfbad1f851e'>block wall: thumbnails hilbert</a>

mit Licensed

Similar vizzes

Loading thumbnail…

block wall

A wall of small multiples, each representing a single D3 block from the bl.ocksplorer.org corpus. The visualization uses a force-directed layout to arrange thumbnail images of thousands of gists, where each block is positioned based on similarity—derived from data in the block-similarity file—and rendered as a webGL point cloud with an SVG overlay for hover interactions. Users can pan and zoom to explore the structure of the block universe, with colors or positions encoding clusters of related visualizations and authored work.

CCBasis

84% match

Loading thumbnail…

Blocks Graph - w/thumbnails

This interactive block graph shows a network of D3 examples, where each node represents a gist and links connect related blocks. The graph is rendered as a Canvas using D3's force simulation (`d3.forceSimulation`) with charge, link, and position forces. Hovering over a node triggers a tooltip that loads and displays the gist’s thumbnail image via `loadTooltipThumb`. The node data comes from `graph.json`, which lists gist IDs, user names, and descriptions. The visualization uses D3 v4 and a WebGL/Cavas approach to handle the dynamic layout and hover interactions.

TThanaporn-sk

74% match

Loading thumbnail…

Blocks Graph - w/thumbnails

TThanaporn-sk

74% match

Loading thumbnail…

Blocks Graph VI

A force-directed graph of d3.js blocks, where each node represents a block and links show connections between them. Nodes are colored by author, and hovering over a node displays that block's thumbnail image in a tooltip. The visualization uses d3.forceSimulation for layout and renders to a Canvas element via its 2D context. Dragging nodes is supported through d3.drag, and block data is loaded from a JSON file.

PPooky2011

74% match

Loading thumbnail…

Blocks Graph

This visualization displays a force-directed network of mentions among bl.ocks examples. Each node represents a block, colored by its author, and links show when one block's README references another. The graph is rendered on a Canvas using d3.forceSimulation with forces for many-body repulsion, link attraction, and positioning, and supports interactive dragging and hover to reveal block details. It uses cleaned data from Micah Stubb’s original 2016 dataset.

FFrissAnalytics

70% match

Loading thumbnail…

Blocks Graph

The visualization shows a force-directed network of 1,238 bl.ocks examples, with nodes representing individual gists colored by author and links indicating mentions between README files. The network layout is computed using `d3.forceSimulation` with many-body charge, link, and position forces, and rendered directly to a Canvas `getContext("2d")` surface. Nodes are drawn as small circles with a 3-pixel radius, and hovering reveals a link to the original bl.ock, while dragging interactively repositions nodes. The data is a cleaned subset of Micah Stubb’s May 2016 dataset, filtered to remove missing and redundant entries.

Mmbostock

69% match

Loading thumbnail…

Blocks Graph

This force-directed network visualization maps the relationships between 1,238 bl.ocks posts, using a cleaned subset of Micah Stubbs' README mention data. Nodes represent individual posts, colored by author, and links show which READMEs mention others. The visualization runs in a Canvas context, with d3.forceSimulation handling the physics and d3.drag enabling mouse interaction for repositioning nodes and revealing metadata through hyperlinks.

TThanaporn-sk

68% match

Loading thumbnail…

fresh blockhtuj!!!!!!!

This example displays a randomized, canvas-based visualization built with Vue and D3 v4. It initializes a force-directed layout using `d3.forceSimulation`, though the visible output is a static pixel pattern. The block loads data from a Google Sheets document and renders it into a `<div>` on a gray background. The code bundles dependencies with `bundle.min.js` and relies on D3’s standard API for sizing and styling.

MMraleksa

67% match