D3: Graphs and Charts for the web using Javascript – Animation


welcome folks Brian Greig back again with another screencast for RWD we are taking a look today at d3 we’ve taken a look at
d3 in the past that is data driven documents it is the JavaScript framework
for creating data visualizations in the browser today we are going to be looking
at how to create an animated graph on the page in the past we’ve looked at
creating interactive graphs that you can select the dimensions filters metrics
and whatnot today we are going to be looking at something that it’s a little
more passive something that’s going to update the data without any user input
so let’s take a look at what that looks like created here a actually just gonna
be working within a single file today created an HTML template here which
we’ll be using to display our data we’ve got our div here with an ID of graph
we’ll be taking a taking that later and targeting it for our SVG element which
will contain our data visualization we’ve got our CDN reference to d3 here
I’ve also got an array here with some random numbers between 1 and 100 and
these are what we’ll be using to populate our data visualization here we
take our graph and selecting that ID the div up top here appending our SVG and
setting the attributes for heightened width to 300 and 500 now
just to reiterate what we’ve discussed before when we’re creating a d3 graph we
want to break it up into these different modules here we want it to have an
update step and enter step and an exit step and we are going to create a
function called refresh which refresh is going to update enter and exit so it’s
going to call each of our three functions and we’ll be able to call that
repeatedly every time our data is updated so that we can create an
animated visualization within our update enter and exit functions the update
function is going to select all of our rectangles on the page initially we’re
going to have none but we’ll be appending those rectangles in the
intercept we are going to be binding those to our array the array is the
array of random numbers that we set up top here and we’ll be creating a bar
chart for each of the nodes in that array if you are interested you can
always go and take a look at my other video on how to create bar charts it
will explain what a lot of this is doing here
our enter function is going to be very similar except it’s actually going to
append the rectangles to the page so the update is going to bind our data to the
individual elements and our enter step is going to actually append to them to
the SVG another exit step is just going to be for cleanup now what do we want to
do to actually create an animated visualization well one way to do it is
just using a set interval so there’s obviously many different ways that you
can create animated animated visualizations on the page you
can create a call to an API and you can listen for when that API is going to
return some new data you can have something server-side that’s going to
inject things via Ajax but just for simplicity here we are going to create a
set interval function and that set interval function is going to execute
every 1000 milliseconds or every second and all it’s really going to do is it’s
going to take our array and it’s going to shift it over shifting an array will
reduce the size of the array by one element and it will drop off the first
element in the array and then we are going to push another element to the
array and that element is going to be another random integer between 1 and 100
so if you think about the way that this is going to look it’s going to show you
a graph and then it’s going to progressively move that graph to the to
the to the left side of the screen and dropping off the first element and
adding another element to the end so let’s take a look at what that looks
like and here we go so as you can see we had our initial set of elements it is
every second updating that array it is dropping off an element off the front of
that array pushing another element to the top of that array and refreshing the
page so although this is a very trivial
example of how to do this I think this gives you a good idea of how you can
take data from an API or from other some other source where it’s constantly
feeding new data and be able to create in the visualization of that day
that updates progressively across time alright well I hope this was helpful and
always look forward to your feedback and comments so you know please respond in
the comments and let me know what you think let me know what you’d like to see
more of follow me on twitter at ignore intuition and i’ll see all the next
screencast thank you

Add a Comment

Your email address will not be published. Required fields are marked *