100%

[building-blocks](http://github.com/enjalot/building-blocks)

✓ Published0🌍 Public

Last edited Feb 23, 2017

Created on Feb 23, 2017

A bookmarklet that redirects any bl.ocks.org or gist.github.com URL to the corresponding page on blockbuilder.org. The page displays a draggable link, which users add to their bookmark bar. It uses JavaScript string replacement via `window.location` and `String.replace` to rewrite the URL, requiring no external libraries beyond the included D3 3.5.5 script, though the code does not rely on D3 for its core functionality.

AI-generated description

building-blocks

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/c0e1634fb919c37575b8'>Bookmarklet</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/0e2f0a302a6676aa4081767062983920'>Bookmarklet</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Hello, bl.ocks.org!

This example demonstrates the simplest possible D3-based web page: a static HTML file that renders the text “Hello, index!” in the browser. It uses no external libraries or data, relying solely on the browser’s built-in HTML parsing and rendering of the `<body>` element. The code defines no JavaScript, SVG, or canvas components, making it a minimal starting point for exploring D3’s ecosystem. Its purpose is to show how a gist’s single `index.html` becomes a live, viewable block.

Mmbostock

64% match

Loading thumbnail…

D3 Bookmarklet

This example demonstrates a bookmarklet that injects D3.js into any webpage by appending a dynamically created script element to the document head. The code specifically loads D3 version 3 from the d3js.org CDN using the `document.createElement` and `document.head.appendChild` APIs. It shows how to enable D3 functionality on pages that do not already have it, making the library available for future interactions. The bookmarklet relies solely on this script injection mechanism, with no additional data or visualization logic included.

Mmbostock

64% match

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

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

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

62% match

Loading thumbnail…

Index of all bl.ocks.org pages owned by a github user

This interactive page lists all bl.ocks.org pages owned by a GitHub user, separated into gists that contain an `index.html` file (rendered on bl.ocks.org) and other gists. The user is specified via a URL hash, with default examples provided. It fetches gist metadata from the Gist API using a custom `JSONP` helper, then uses D3.js (version 2.0.3) selections to bind the data to list items, displaying creation dates, repository names, and descriptions or file lists.

GGerHobbelt

61% match

Loading thumbnail…

Prose-only Blocks

This example demonstrates a prose-only block on bl.ocks.org, created from a Gist containing a single README.md file with no index.html. The block renders the README content as the main display, omitting the usual iframe visualization area. The implementation filters Gists based on file presence and renders additional file sources, while syntax-highlighting embedded code blocks using the Gist API and GitHub’s default UI. The page also includes a JavaScript shuffle function example to illustrate embedded code.

Mmbostock

61% match

Loading thumbnail…

Edge creation

This visualization uses a force-directed graph to show connections between blocks published on bl.ocks.org, derived from links in README files. Each node is a clickable circle linking to its corresponding block, with the graph’s edges representing README-derived references between blocks. The network is constructed by parsing the edges from the underlying JSON data and building a node-link structure. Community detection using the Louvain algorithm (via the `jsLouvain.js` library) is applied, and nodes are colored by their detected module using a categorical color scale. Edges that connect nodes from different modules are highlighted with a thicker stroke, and nodes that have edges to multiple modules also receive a border. Force-directed layout positions the nodes, while edge and node groups are created with D3’s data joins. Clicking a circle navigates to the corresponding bl.ocks.org page.

CCurran Kelleher

59% match