Raspberry Pi Pico Tips and Tricks

Thursday 7 February 2013

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" 
                onclick="updateData()" />

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() {
        }, 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.


  1. Hey D3Noob,

    First, thank you so much for this blog and the book. They both have been incredibly useful!

    Second, I have gotten my graph to update automatically but I can't get my tooltips to update with it. Using both your methods (for tooltips and updating automatically) how can I get them to work together?

    Thank you

    1. Good question! Post your code and some sample data onto Stack Overflow (add a jsfiddle as a demo if possible) and we can let the d3.js community try to solve the problem :-).

  2. Hi. Thanks for the tutorial.

    How can this be applied to multiple charts on the same webpage?

    1. Definitely. Because JavaScript works asynchronously, you can have multiple charts happily updating themselves. Check out the section in the book on having multiple charts on a page and duplicate the code here for the automatic updating.