bl.ocks.org

Bl.ocks (pronounced “Blocks”) is a simple viewer for sharing code examples hosted on GitHub Gist. For example, if your Gist URL is:

https://gist.github.com/mbostock/1353700

Replace “gist.github.com” with “bl.ocks.org” in the URL to view it:

https://bl.ocks.org/mbostock/1353700

The main source for your example is in index.html. This file can contain relative links to other files in your Gist, such as images, scripts or stylesheets. And of course you can use absolute links, such as CDN-hosted D3, jQuery or Leaflet. To explain your example, add a README.md written in Markdown. (You can omit the index.html if you just want to write, too.)

Customize the appearance of your Block by adding a .block YAML configuration. The following options are supported:

• license - a supported SPDX license code
• height - the iframe height in pixels; defaults to 500
• scrolling - yes if the iframe should scroll; defaults to no
• border - no if the iframe should not have a border; defaults to yes

For example:

license: gpl-3.0
height: 500
scrolling: no
border: yes

To add a thumbnail preview, add a 230×120 thumbnail.png to your Gist. For social media, you can also add a larger 960×500 preview.png or preview.jpg.

Browser Extensions

For convenient access, install the browser extension for Chrome or Firefox!

Credits

bl.ocks.org is run by Mike Bostock.
bl.ocks.org is not affiliated with GitHub.

Code highlighting by Highlight.js (BSD license).
Markdown formatting by Showdown (BSD license).