Update d3.js Data Dynamically (Automatically)

The following post is a portion of the D3 Tips and Tricks document which is free to download. To use this post in context, consider it with the others in the blog or just download the pdf  and / or the examples from the downloads page:-)

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

I have no doubt that the excitement of updating your data and graph with the magic of buttons is quite a thrill. But believe it or not, there's more to come.

In the example we're going to demonstrate now, there are no buttons to click, the graph will simply update itself when the data changes.

I know, I know. It's like magic!

So the sort of usage scenario that you would be putting this to is when you had a dashboard type display or a separate window just for the purposes of showing a changing value like a stock ticker or number of widgets sold (where the number was changing frequently).

So, how to create the magic?

Starting with the data-load-button.html file, firstly we should remove the button, so go ahead and delete the button block that we had in the HTML section (the bit that looked like this...).

<div id="option">
    <input name="updateButton" 
                 type="button" 
                value="Update" 
                onclick="updateData()" />
</div>

Now, we have two references in our JavaScript where we load our data. One loads `data.tsv` initially, then when the button was pushed, we loaded `data-alt.tsv`. We're going to retain that arrangement for the moment, because we want to make sure we can see something happening, but ultimately, we would just have them referencing a single file.

So, the magic piece of script that will do your updating is as follows;

var inter = setInterval(function() {
                updateData();
        }, 5000); 

And we should put that just above the `function updateData() {` line in our code.

The key to this piece of code is the `setInterval` function which will execute specified code (in this case it's `updateData();` which will go and read in our new information) over and over again in a set interval (in this case 5000 milliseconds (`}, 5000);`).

I honestly wish it was harder, but sadly it's that simple. You now have in your possession the ability to make your visualizations do *stuff* on a regular basis, all by themselves!

How to test?

Well, just load up your new file (I've called the one that's in the d3noob downloads page with the general example files data-load-automatic.html). After an interval of 5 seconds, you should see the graph change all by itself. How cool is that?

You know it gets better though...

If you open your data.alt.tsv file and change a value (increase one of the `close` values by a factor of 10 or something equally noticeable). Then save the file. Keep an eye on your graph. Before 5 seconds is up it should have changes to reflect your new data.

There is a possibility that your browser may have decided to cache the data from the data-alt.tsv file, in which case you can tell it to stop that nonsense by going into the settings and clearing the cache.

The above description (and heaps of other stuff) is in the D3 Tips and Tricks document that can be accessed from the downloads page of d3noob.org.