10

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?

ted.strauss
  • 4,119
  • 4
  • 34
  • 57
  • 1
    bl.ocks.org doesn't aggregate visualisations, it's simply a viewer for gists. Have a look at some of the blocks/gists that are out there (there are plenty!) and you will see what's required. Basically, the gist needs to be self-contained. – Lars Kotthoff May 30 '13 at 19:03

2 Answers2

15

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.

Jonah
  • 15,806
  • 22
  • 87
  • 161
7

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.

mike
  • 22,931
  • 31
  • 77
  • 100