D3.js Tips and Tricks: Using Plunker for development and hosting your D3 creations

The following post is a portion of the D3 Tips and Tricks document which it free to download. This particular one is slightly out of sequence, but because I thought it was too awesome to wait I've posted it here early. It will included in the next D3 Tips and Tricks pdf so you can just download the pdf and / or the examples from the downloads page:-)

--------------------------------------------------------

Recently Mike Bostock recommended 'Plunker' (http://plnkr.co/) as a tool for saving work online for collaboration and sharing. Although I had a quick look, I didn't quite 'get it' and although it looked like something that I should be interested in, I (foolishly) moved on to other things.

Quite frankly I should have persevered.

Plunker is awesome.

So what can it do for you?

Well, in short, this gives you a place to put your graphs on the web without the hassle of needing a web server as well as allowing others to view and collaborate! There are some limitations to hosting graphs in this environment, but there's no denying that for ease of use and visibility to the outside world, it's outstanding!

Time for an example. I'll try to go through the process of implementing the simple graph example on Plunker.

So it's as simple as going to http://plnkr.co/edit/

What you're seeing here is an area where you can place your entire HTML code. So let's replace the 11 lines of the place holder code with the simple graph example (just copy and paste it in there over the top of the current 11 lines);

Now, there are two important things we have to do before it will work.

We need to tell he script where to find d3.js
We need to make our data accessible

Helping the script find d3.js is nice and easy. Just replace this line in your plunk;

<script type="text/javascript" src="d3/d3.v3.js"></script>

...with this line...

<script src="http://d3js.org/d3.v3.min.js"></script>

That will allow your plunk to use the version of d3.js that is hosted on d3js.org (it uses the minimised version (which is why it has the 'min' in it), but never fear, it's still d3, just distilled to enhance the flavour :-)).

Making our data available is only slightly more difficult.

In experimenting with Plunker, I found that there appears to be something 'odd' about accessing the tab separated values that we have been using thus far (in the data.tsv file), however, D3 to the rescue! We can simply use Comma Separated Values (csv) instead (I've put a copy of the data.csv file in the examples and files download at d3noob.org).

So in preparation for this exercise, please edit your data.tsv file to have the tabs separating the values replaced by commas and rename it data.csv.

We will host our data.csv file on plunker as well and there is built in functionality to let us do it.

In the top left hand corner, beside the 'FILES' note, there is a '+NEW...' section. Clicking on this will allow you to create another file that will exist with your plunk for its use, so let's do that.

This will open a dialogue box that will ask you to name your new file.

Enter the name data.csv.

Now another file has appeared under the 'Files' heading called data.csv. Click on it.

This now shows us a blank file called data.csv, so now open up your data.csv file in whatever editor you're using (I don't think a spreadsheet program is going to be a good idea since I doubt that it will maintain the information in a textual form as we're wanting it to do. So it's Geany for me). Copy the contents of your local data.csv file and past it into the new plunker data.csv file.

So now we have our data in there we need to tell our JavaScript where it is. So go back to the 'index.html' file (which is our simple graph code) and edit the line which finds the data.tsv file from this

d3.tsv("data/data.tsv", function(error, data) {

... to this ...

d3.csv("data.csv", function(error, data) {

Because we're using relative addressing, and plunker stores the files for the graphing script and the data side by side, we just removed the portion of the address that told our original code to look in the 'data' directory and told it to look in the current directory.

And that should be that!

Now if you look on the right hand side of the screen, there is a little eye icon. If you click on it, it opens up a preview window of your file in action and viola!

If the graph doesn't appear, go through the steps outlined above and just check that the edits are made correctly. Unfortunately I haven't found a nice mechanism for troubleshooting inside Plunker yet (not like using F12 on Chrome).

But wait! There's more!

If you now click on the 'Save' button at the top of the screen, you will get some new button options.

One of them is the orange one for showing off your work.

If you click on this, it will present you with several different options.

The first one is a link that will give others the option to collaborate on the script.

The second is a link that will allow others to preview the work; http://embed.plnkr.co/QSCkG8Rf2qFgrCqq7Vfn

The last will allow you to embed your graph in a separate web page somewhere. Which I've tested with blogger and seems to work really well! (see image below).