Skip to main content

See right inside JavaScript with this eye-popping animation

violin app

Visualising code in an entirely new way using JavaScript

Violin 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!

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.