See right inside JavaScript with this eye-popping animation

violin app

Visualising code in an entirely new way using JavaScript

Violin (opens in new tab) is a project by developer Philip Roberts that sets out to represent the structure of a JavaScript application and how the pieces interact by graphing them and animating them when they are used. Roberts explains: "I love thinking about how we can visualise code. It can help us spot performance issues and bugs, or help us better understand - and be more creative - with our code."

Violin is his experiment in visualising JavaScript. It takes an application and draws a graph showing all of the objects and functions in the app. "What’s really cool is that, as you interact with the application, the graph animates in real-time to show the creation of new objects and execution of functions," says Roberts.

He also used D3.js for the drawing of his graphs. "Violin automatically finds and rewrites code so that when functions are called they also update and animate the graph. This is nice as it means you don’t have to change how your code is written - Violin does all that work for you! In the demo, I’ve used Backbone to write a simple to-do list style app, and the graph is drawn using D3.js," he adds.

Like this? Read these!

Have you come across an inspiring site? Let us know in the comments box below!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.