Making a d3 block

readme.md

##Explanation Anyone can share their d3 creations on bl.ocks.org. This page explains how to do it. These instructions are mainly for people who want to display thumbnail images on their block (which is the hard part of creating a d3 block). The instructions are going to be most accurate for those using a mac, who have used terminal before (and downloaded various libraries) but who are generally unfamiliar with the terminal app and git commands. Hope it helps!

##Instructions

1. Create an account, if required, at https://gist.github.com/. If graphic width is set in absolute terms to be greater than 960 x 500px, you might need to make it smaller. (100% width and 100% height that end up being larger than these dimensions is fine.)
2. Go to your personal page eg https://gist.github.com/emmasaunders. Click New gist. Type in gist description.
3. Type in index.html and copy and paste the contents of the page you are trying to re-create (which is probably not called index.html).

• Be sure that links such as to d3.v3.js are given in absolute terms, e.g. to the official d3 site, and not to a file in your folder.

4. Click Add file. If your CSS isn't in the html file, add your CSS file. Be sure to give the extension .css in the filename.
5. Click Add file. Add your javascript file if it is separate, giving the .js extension in the name.
6. Keep adding files until you have supplied everything required for the graphic. It is best to link to d3 rather than uploading it.
7. Finally, add a file called Readme.md. This is optional, but where you can introduce your graphic and explain what it does.
8. Click Create public gist.
9. You are taken to a page whose URL ends in a unique ID, such as b906f2bdda363ea9d53f1686c7211aec. Add to your favourites!
10. Now http://bl.ocks.org/your-username (e.g. http://bl.ocks.org/emmasaunders) will show your block. Check it works.
11. The exact location of your block will be at http://bl.ocks.org/your-username/your-unique-id (e.g. http://bl.ocks.org/emmasaunders/75ce6bde05c4bd94771f)
12. To get a thumbnail image onto blocks is a bit more tricky. You can't upload it via gist, worse luck.
13. Create your thumbnail, perhaps by screenshots and cropping. It must be 230px wide and 120px high and must be called thumbnail.png
14. (On a mac) Open terminal app - you have it even if you don't know you have it. Find via spotlight or launchpad.
15. Change directory to the folder you want to store your files in using the cd command.
16. Type git clone https://gist.github.com/your-username/your-unique-id (e.g. https://gist.github.com/emmasaunders/2ac8e418958f4c681f229f82729c9647). Hit enter. Don't change your gist via github before you have carried out the following commands or you will create a versioning issue.
17. A folder will be created called your-unique-id (b906f2bdda363ea9d53f1686c7211aec) with the folder you navigated to. The folder will contain all the files you've just uploaded to github.
18. In finder, drag and drop your thumbnail.png into the folder called your-unique-id.
19. In terminal, change directory to the folder called your-unique-id using the cd command.
20. Type git add thumbnail.png. Hit enter.
21. Type git commit -m 'Add thumbnail'. Hit enter.
22. Type git push. Hit enter.
23. If you're on Windows, see this: http://www.d3noob.org/2012/12/loading-thumbnail-into-gist-for.html
24. Please note: you might need a few installations first - please see this: https://bost.ocks.org/mike/block/

thumbnail.png