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

100%

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

✓ Published0🌍 Public

Last edited Sep 9, 2012

Created on Apr 28, 2012

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.

AI-generated description

Similar vizzes

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

65% match

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

63% match

Loading thumbnail…

Example Authors

This example visualizes the contributions of authors to bl.ocks.org, a platform for sharing D3 code blocks. The data is shown as a circular bubble chart, where the size of each leaf node represents the number of blocks by that author, and hover highlights the hierarchy path. The visualization uses D3 v4’s `d3.pack` layout to compute the circle positions and sizes, with SVG circles, text, and clip paths for labels, and `d3.hierarchy` to structure the JSON data. The data is a handcrafted `authors.json` file, and the code reads it via `d3.json`.

Mmbostock

62% match

Loading thumbnail…

Here are some things you can do with Gists in GistBox.

This example demonstrates the versatility of Gists by showcasing a collection of code snippets, documentation, and a recipe. It displays a JavaScript console log, a Ruby quicksort implementation, a markdown file with keyboard shortcuts and a Clipper extension link, and a markdown recipe with ingredients and directions. The visualization uses the GistBox interface to organize these files, showing how the tool handles multiple file types, including code, documentation, and images, within a single gist. The data source is the GitHub Gist itself, presented as a static list of files without interactive features.

GGerHobbelt

62% match

Loading thumbnail…

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

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.

KKerchoo

61% match

Loading thumbnail…

Gist 293439a97af26a64f8d588ca9e242fad

This visualization displays the network of contributors to a GitHub gist, showing each person as a node and their connections through shared contributions. It uses `d3.forceSimulation` to position the nodes and `d3.geoPath` for rendering, with a Canvas-based approach that leverages `getImageData` for pixel-level interactions. The graph highlights the contributor’s role through a boolean `isContributor` flag, and the layout dynamically responds to simulated forces. The data comes directly from the gist’s metadata, providing a structural overview of collaboration without additional external sources.

CColinEberhardt

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

60% match

Loading thumbnail…

Gist db32a113f546aa03b43c0e1f84f80d28

The visualization shows a force-directed network graph of GitHub gist data, with nodes representing individual gists and links showing relationships between them. It uses d3.forceSimulation to compute the layout, with node size encoding gist size and color indicating file type or language. The rendering relies on SVG elements updated per tick via the simulation’s tick event. The code loads a static JSON file containing preprocessed gist metadata, and does not use canvas or WebGL. The visualization highlights clustering patterns among related gists, revealing emergent communities in the dataset.

335degrees

60% match