Make Gist from Github repo for display on bl.ocks.org

Question

I have created a data visualization app and posted it as a Github page. I would now like to display this on the bl.ocks.org site that aggregates D3.js visualizations. How can I start from the github repo and create a gist that maintains the relative dependencies of the repo code? Will I need to refactor all the code to make a single-file app that points to only CDN sources?

Answer 1

It's easiest to learn by example. Take the example on the bl.ocks home page:

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

Now to see the gist that generated it, just take the id number from the end of the url and appent it the gist url, like so:

http://gist.github.com/1353700

That gist contains 3 files, but two are optional. The only requirement for a block to display is to have index.html. That file should contain your a full html file with your js script any includes to cdn resources like d3. Optionally, you could put your javascript code in a separate file and add that to the gist, and then link to it from your index.html file.

You can also add a README.md and thumbnail.png, if you'd like to provide a description of your example and an image for it. This is explained on the bl.ocks home page as well.

Hope that helps.

Answer 2

Once you have the example on GIST, all you have to do is copy the extension (ie, "username/hash") and put it after bl.ocks.org/. So if you this gist:

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

It can be viewed via bl.ocks at the following URL:

http://bl.ocks.org/mbostock/4063423

It's so good that you don't need to do any extra work after creating the gist.