block wall

100%

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Feb 8, 2016

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.

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>

Similar vizzes

Loading thumbnail…

block wall: thumbnails hilbert

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.

JJuannovo

84% 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

78% 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

77% match

Loading thumbnail…

fresh block

A simple D3.js v4 visualization displays a greeting and three colored circles on an SVG canvas. The text "Hey O-Team!" appears in a large, centered font, while purple, yellow, and aqua circles are positioned at fixed coordinates. The code uses direct SVG append operations via D3 selections, setting attributes for positioning and styling, with no data binding or interactive behavior. The static composition serves as a basic demonstration of SVG element creation with D3, sourced from a Blockbuilder-generated file.

BBrieLewis

72% match

Loading thumbnail…

fresh block

A single large rectangle sits against a plain background, initially drawn in dark red before transitioning to a bright blue over three seconds. The animation uses a D3 transition with a bounce easing, applied to the rectangle’s fill style. The visualization is built with D3.js (version 3.5.5) and rendered as an SVG element that fills the viewport. The code originates from a Blockbuilder.org gist and demonstrates a minimal, animated color change without any data or interactivity.

JJonasHeylen

71% match

Loading thumbnail…

fresh block

This example demonstrates a minimal D3.js visualization: a blank SVG canvas with a single text element displaying a prompt to edit the code. The visualization uses the D3 v4 library to select the body element, append an SVG of 960 by 500 pixels, and render a sentence in a monospace font. The rendering is entirely SVG-based, and the code structure follows the blockbuilder.org template, with the source appearing to be a basic starting point for user modification.

AAyanGhatak

70% match

Loading thumbnail…

fresh block

This visualization displays three red circles on a blank canvas. It uses the D3.js v4 library to select the body element, append an SVG container, and bind an array of three numeric values as the primary dataset. The circles are then rendered using the `.data().enter().append()` pipeline, with the numeric values directly mapped to both the x and y coordinates using the `.attr("cx")` and `.attr("cy")` methods. The radius is fixed at 5 pixels, and all circles are filled with the color red.

KKerchoo

70% match

Loading thumbnail…

fresh block

This example displays a single vertical red rectangle at a fixed position on a light gray SVG canvas. Built with D3 v4, the visualization appends a 100-by-200 pixel rectangle to the SVG root using the `d3.select` and `append` methods, then fills it with the custom color `#EF4135`. The code sets the canvas size to 960 by 500 pixels and defines unused color variables for blue and white, though only the red shape is rendered. The visualization is generated entirely with the SVG rendering approach, using a hardcoded geometry without any data source or interactivity.

KKerchoo

69% match