bl.ocks.org is a simple viewer for code examples hosted on GitHub Gist. Code up an example using Gist, and then point people here to view the example and the source code, live!

Created by D3js creator's Mike Bostocks, bl.ocks.org is now the main place for D3js and Topojson professionals to show out, porfolio, then socially share their #D3js and #topojson creations.

Blocks/Gists need 3 files:

  • index.html (compulsory): The main source code for your example, with html and D3js codes. You can add relative links to other files in your Gist; absolute links to shared files, such as D3, jQuery, Leaflet, and other libraries.
  • README.md helpfully comment your example. To write using Markdown.
  • thumbnail.png (230/120px) is a raster snap of your dataviz, for your porfolio at bl.ocks.org/yourGithubUserName.

    • gist.github.com online allow text editing only, and doesn't allow folders. The following is necessary for thumbnail.png:

  • 1. On gist.github.com > sign in > create a gist
  • 2. Create index.html. Create README.md.
  • 3. In terminal:

    cd /path/to/suitable/directory
    git clone https://gist.github.com/8075193.git #clone gist from github to local

  • 4. Develop locally.
  • 5. Thumbnail.png (230/120px) screenshot to add.
  • 6. In terminal:

    git add .
    git commit -m "edit:I_did_this. OR add:I_added_that."
    git push #need username and github password