Login/Register
How to export d3.js animation to vector frames to create an AfterEffects sequence?
Asked Answered
Solved animationd3.jstransitionadobe-illustratorafter-effects
F

1

7

I'm creating some basic animations using d3.js, such as bar chart animations that show a transition between two sets of data. Ultimately, I want to bring this animation into Adobe AfterEffects to include as part of a larger video. I want to export the web animation as a series of vector frames (ai or svg, or png if necessary) to import into After Effects or Illustrator. How can I do this? Thanks!

Formation answered 1/5, 2013 at 0:22 Comment(4)
update: I'm working on a solution based on this example . So far so good. I'm calling form.submit using setInterval() in my html, and then the perl script creates a file download with the data from the svg node. The problem is that I need 30 frames/files per second, and so far it doesn't look like the script can operate that fast. If I try to make 30 files from a 1 second animation, I only end up with about 6 or 7 files in my Download folder. – Formation
Have you made much more progress in your implementation? I'm trying to find a similar solution, but so far the closest solutions I've found use something like node.js, PhantomJS, jsdom, etc. to save dynamically created SVGs, but I don't think they account for transitions... (e.g. this solution). – Vedis
Hi, any news on this? I also want to implement this. Maybe together we can do more. – Speedball
Just stumbled across this myself, and I have a couple ideas. Thought I'd check to see whether anyone else has a repository going so I'm not duplicating work if I get time to start my own. – Redound
V
5

This actually may be quite simple with the way d3.js does transitions! Since d3.js directly changes the DOM elements for doing transitions, you can simply save the DOM elements at each 1/30th of a second. Here's a complete example:

<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
      svg { border:1px solid black; }
    </style>
  </head>
  <body>
    <svg id="svg" width="480" height="240" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black"
    stroke-width="2" fill="red" />
    </svg><br/>
    <button id="b1" type="button">Animate</button>
    <script type="text/javascript">
      var svg = d3.select("svg");
      var b1 = d3.select("#b1");
      var duration = 1000;
      var nTimes = 30;
      var x = new XMLSerializer();
      var n = 0;
      function outputToConsole() {
        console.log(x.serializeToString(document.getElementById("svg")));
        if(n++ >= 30)
          return;
        setTimeout(outputToConsole, 33); // 33 milliseconds is close to 1/30th of a second
      }

      b1.on("click", function() {
        svg.select("circle").transition().duration(duration).attr("cx",150);
        outputToConsole();
      });
    </script>
  </body>
</html>

The last step would be to save each of those outputted svg elements into individual .svg files on disk (instead of just outputting them to the console like in the above example). I haven't tried it yet, but probably one could use something like FileSaver.js. Then optionally the .svg files could be converted into .png files using something like ImageMagick.

Vedis answered 26/6, 2013 at 18:55 Comment(2)
Note ImageMagick doesn't always convert svg files properly. See this post – Vedis
I took the answer above and added the final step, please check out my bl.ock bl.ocks.org/sdbernard/afbb899e60902ad42064 This saves the svg every 1/40th of a second to correspond to a 25fps frame rate in After Effects – Nesta

© 2022 - 2024 — McMap. All rights reserved.