Hugh Kennedy

Developer; Creative

Understanding npm view site source

Understanding npm is a data visualisation project I designed and developed (with the guidance of Paul DeVay) on behalf of NodeSource that takes a deeper look at some of the habits and behaviours of the JavaScript open source community on a broad scale.

The biggest challenge in consuming or contributing to the community surrounding npm is the sheer number of packages being published. This project was an attempt to take make some high-level observations and fuel inspiration, while prompting further investigation by others.

For those not familiar, npm is a package manager for managing JavaScript dependencies. npm's model for easily publishing and consuming these dependencies has quickly made it the largest software ecosystem currently in existence: at the time of writing there's 385,853 packages. Tomorrow there'll be close to 500 more. Due to its volume, aggregating the data was a challenge: the initial collection took about a week (in part due to Australia's lackluster internet speeds). Once the download was complete we'd do some simple aggregation and compress the final results for serving online. The final site weighs in at just 735kB.

Every one of the top 32,768 packages are represented as a single onscreen particle in a series of visualisations highlighting different aspects of the data. This was all made possible using WebGL: every metric is stored in a texture, which are read by a GLSL shader to manipulate their position and behaviour in realtime.

The site continues to receive occasional updates, and its source has been made available on Github.