Playground for Animations

Coding Education
#1

Have you tried out some lessons in our Animations course, and now want to explore what else you can create with the D3 library and SVG shapes?

Check out the Animations Playground here. Try editing or adding to the code in the JavaScript section, then hit run to see how your code looks.

You may notice some new code at the top of the JavaScript section — this is creating an SVG and D3 environment to allow you to make SVG shapes and then manipulate them with D3. Can you spot how the background color is set in the CSS section?

This playground is powered by JSfiddle.net — if you want to, you can create your own JS Fiddles too!

10 Likes
#2

Is it possible to implement this into the app itself? I’ve looked at the website and it wasn’t very mobile-friendly.

#3

Not at the moment. Another option is to write your code in one of the Animations puzzles and ignore the blue feedback.

The “Raise the Stakes” puzzle has most of the D3 buttons available although it’s missing some of the earlier keys like If Statements and For Loops.

–Frankie