User login


You are here

Creating a multi-keyframe animation with d3.js.

Creating a multi-keyframe animation with d3.js.

Something that should be in the toolbox of every modern researcher.  Static plots in journals are not good enough given today's technology.

-- Biswajit


A good article that backs up my point:

-- Biswajit

Dear Biswajit,

The article you link up to defends interactions, whereas the example and the code you supply is for animation.

Yes, there is definitely a certain sense to the saying that a picture is worth a thousand words. Continuing further, you could even say that an animation is worth a thousand pictures. A static picture involves only the space, but an animation also involves time---which is more indirectly perceived---and so, animation is valuable.

But is the additional complexity (both in programming and in user-experience) which is required to introduce interactivity, really worth it? I am not sure. [By interactivity, I mean real-time responses to user inputs such as mouse movements---not selection of parameters for a simulation and hitting the "go" button.]



Hi Ajit,

Thanks for bringing up the topic.  

My articles typically deal with questions that don't have solutions readily available on the web.  The multi-frame animation problem was one such problem.  On the other hand, examples of interactive graphics (including one-step keyframe animations) are numerous.  That's why I didn't include interactions in my plot.  Adding simple interactions is straightforward (browsers are amazing at handling events), but more complex interactions need thought and work.  There is an entire field of data science that focuses on just that.

I, unlike many, cannot determine whether something is worth the effort without trying it out.   But from what I've seen so far, interactivity will become more common as time goes on.  In the process, we will have to rethink how we communicate information in our field (not just in 2D but in 3D, with emerging VR tech). Mechanicians may be slower to adopt those changes, partly because there are no market forces driving us, unlike e.g. statisticians. 

I still remember the time when even high quality computer generated plots were unacceptable and I had to get my plots redrafted by a technical artist for my MS thesis.  If the cost of programming is too high, we will return to times when plots are handed over to interaction specialists.  Poorer researchers will have to fall back on commercial software such as Tableau.

But all that depends on whether researchers consider clear and nuanced communication of their results important (and how much time they are willing to spend on that aspect of research).

-- Biswajit


Hi Biswajit,

Sorry for the delay in replying. (I do have a ``good'' excuse, even though I also realize it is only an excuse: I didn't log on to the 'net at all, any time in the intervening period.)


Plots being redone by a technical artist! That did bring some smile to me. ... (As to me, I am old enough to have used HDD-less machines, with MS DOS on 5.25" floppy disks, WordStar, and those noisy Epson dot matrix printers.)


About mechanicians (or others) being more slow than others... Let me try to nail it down.

I can cite at least one application area where every one seems to agree that interactivity is great: in flight simulators, and then, as a consequence, in car-driving simulators.

As to the car-driving simulators, I have been told (but don't know whether it is true or just an anecdote someone made up) that Maruti Suzuki in India has found that first using simulators for teaching car driving in their India-wide schools has actually helped enhance the effectiveness of the subsequent lessons with the actual car. Women learners, in particular, are supposed to more easily develop the necessary confidence, if they first use simulators. ... I don't know whether there really was such a study or it's just something someone spun out of his head. But OK, let me admit it: I did find it believable. The thing is, I had played with some racing car games on a 486 (in 1992) before I learnt car driving (in 1997). I did get a definite sense that having ``seen it all'' earlier was actually helping me adjust to the actual car more easily.

In short, interactivity does seem to help in situations such as flight/car-driving simulations.

But what if the visual/sensory data being generated as a result of the interactivity is too varied or too voluminous? What if it goes on to span an experience-space that is too big or varied? Would the experience then even be distinguishable from the reported ``tours'' induced by drugs? A guided (or pre-planned) VR tour of a computer-reconstructed ancient Athens, I bet, would be better than the experience in which you keep crashing into those magnificent pillars every now and then, and as a consequence, must ``restart'' the trip.

In short, it would seem that interactivity, to be actually useful, is better kept delimited to a narrow sub-region from among the entirety of the possible experience-space.

Happens all the time to me at Google Maps. ... Suppose, I want to find a good route from one location in one suburb to another location in another suburb (of the same city). So, I zoom in to the starting location and select "Directions from here." I then am in the process of zooming out so that I can first locate the destination suburb, and then the destination spot within that suburb (by zooming in). However, even before locating the destination suburb itself, sometimes, I happen to accidentally press a mouse button or a keyboard key at some random spot. What Google Maps then does is to forget the principle of keeping the experience-space small. Google Maps, in fact, immediately loses my existing zoom level. It not only connects the two spots (one intended, another, accidentally chosen), but it also automatically (i.e. without asking me) adjusts the zoom level so that both these points fit within the screen. Not bad by itself, but my trouble is: in the process, I have lost my context (of locating the second spot) and the zoom level (associated with it). The principle of keeping the experience-space manageable at all times, has been violated. Too much interactivity (like too much of a good thing) thus, turns bad. 

Again, I wrote at too much of a length (and unwittingly enlarged your anticipated experience-space myself!)

Bye for now. Will check back a couple of days later.



It's hard to say how useful VR will be until the hardware and software catches up.  Latency is a big issue.

At this point I'm thinking more along the lines of providing richer sets of information in 2D data plots.  Think of an ordinary text document vs. a document with hyperlinks.  Except that the user will not have to do a HTTP request to get the data for each interaction.


-- Biswajit

You know, Biswajit, I had turned really interested in Data Science for a while, some time last year...

OK, now, Data Science and the Cloud can, and do, go really well together. And I gather that you are working in these things. ... I really appreciate your providing scripts here and all. After all, unless someone actually codes, no output is ever produced... (Few MBAs profess to know this truth; all of them know it, through a direct knowledge of their particular incompetencies.  (OK, this is a Harvard-based blog. So what?))

But, as of today, I just can't find time for any of my personal research concerns.... Hopefully, things improve soon later...

But, frankly, I would really appreciate it if you could provide some code in Python rather than using JScript. ... It's been since mid-1990s that I have been actually hating anything to do with Java, even though such actually has never been one of my official positions. It's just that all my friends (and enemies) know me, including this opinion of mine... Rather too well, in fact.

Anyway, would be refreshing if you could please provide some Python scripts too...

Also, if you could let us know here if you have run into some way of making some CAE software work, for free, on the cloud. Like, say, OpenFOAM or something like that. (I don't mind creating free accounts...) ...

...OK, bye for now...




1) Data science: Data science is a broad field and needs several years of work to understand at a deep level. At present there is a lot of superficial interest in the subject because of hype.  Getting a deep understanding of statistics/probablity is non-trivial and that's just the starting point for a better understanding of data mining, machine learning, and statistical pattern recognition (which are the two main subfields of data science).  Because of these issues, typical data science specialists do not have an understanding of engineering problems and tend to provide solutions that defy common sense.  I've been trying to make progress in applying some machine learning to engineering problems without much success so far.  There are lots of questions that need research and I don't have the necessary funding.  But I'm encouraged that some mechanics experts are beginning to explore data science and are being funded.

2) Cloud computing:  Getting compute resources for free is not possible at this point even though some AWS resources are claimed to be "too cheap to meter" and therefore, essentially free.  You do have to provide your credit card number to get access to any of a number of providers.  My experience so far has been that the resources are typically not available when you want them unless you pay premium prices.  I don't have any contracts at this moment that require HPC; so the cloud computing aspect of my work is in the backburner for now.

3) Javascript:  Javascript is not Java.  The name was poorly chosen by Netscape.  But javascript makes truly OS-independent software possible.  If the word "Java" annoys you, just think of JS as ECMAScript, which turns out to be its current official name :)  JS has some nice functional programming features that I love.  Of course, it's also got some features that make debugging JS code and building complex software a nightmare.  Several frameworks have been developed to migitate those issues, e.g., Angular (Google), React (Facebook), Vue etc.  I've just Vue OK, but not the best for graphics heavy applications.  That's create the new nightmare of having to learn new ways of doing things every few months.  I hope things will stabilize in a few years.

4) Python:  I don't use Python much except for processing data.  But thanks for the suggestion. Will post something once I'm past the currently ongoing debugging nightmare for my MPI code.

5) MBAs etc:  The more I work on my own, the more I appreciate the need for division of labor.  Technical solutions are typically only part of the solution to a problem.  MBAs are needed for non-technical issues that people like me are not interested in and cannot do well.  

There are tons of articles that discuss generalities (you can find them on LinkedIn and Medium).  That's just entertainment as far as I am concerned.  My goal is to provide something more concrete in my articles.

-- Biswajit


Wenbin Yu's picture

Ajit, Biswajit and all, 

It is interesting to read the discussion. We are working on a platform called cdmHUB ( which makes cloud computing easy and free. As a matter of fact, I just published a blog here. Currently executables and scripts written in many languages can be directly uploaded and become apps launchable by others in the cloud. No change to the code. They can be connected to HPC if more computing resources are needed. 

Hi Wenbin,

I think I met you once while you were at USU.  Looks like you've made a lot of progress in creating your platform.  Congratulations!  I will look at the evolution of the platform with interest.

-- Biswajit

Wenbin Yu's picture

Biswajit, yes, we met almost ten years ago. I moved to Purdue in 2013. Time flies.

You might be interested in trying a multiscale constituive modeling code on your ipad: 



Subscribe to Comments for "Creating a multi-keyframe animation with d3.js."

Recent comments

More comments


Subscribe to Syndicate