DependencyWheel: An Interactive Visualization Of Package Dependencies

Modern development use package managers (composer, npm, bundler, etc.). Applications depend on a large number of packages, which depend themselves on other packages. The Dependency Wheel visualization attempts to reveal the entire dependency tree of any PHP library using Composer for dependency management. Each chord in the disc represents a dependency. Try hovering on packages to mask other dependencies. All rendering is done client-side, in JavaScript. Built with d3.js

Do you want to try it out with another project? Paste the composer.json and composer.lock of any PHP project below to see its Dependency Wheel:

Purpose

• Did you ever dive into an existing project and wonder how much code is hidden behind a given dependency?
• Did you ever wonder if a package present in the vendor/ directory is actually useful?
• Did you ever look for a visualization that would help you understand the mess that's in a composer.json?

DependencyWheel tries to answer these needs. Also, it tries to make dependencies look beautiful, but that's another story.

Usage

To create a DependencyWheel, include the d3.dependencyWheel.js file together with d3.js, just like in this page. Create a new instance of the dependency wheel chart constructor, then make a d3 selection using a CSS selector (of the div where the wheel should be inserted), attach dependency data, and call the chart on the selection.

var chart = d3.chart.dependencyWheel();
d3.select('#chart_placeholder')
  .datum(data)
  .call(chart);

The data must be a matrix of dependencies. The first item must be the main package. For instance, if the main package depends on packages A and B, and package A also depends on package B, you should build the data as follows:

var data = {
  packageNames: ['Main', 'A', 'B'],
  matrix: [[0, 1, 1], // Main depends on A and B
           [0, 0, 1], // A depends on B
           [0, 0, 0]] // B doesn't depend on A or Main
};

For more information about the matrix format, check the d3 Chord Layout documentation.

DependencyWheel comes with a utility to transform data from composer.json and composer.lock files into a matrix and a list of package names. You first need to include the composerBuilder.js script provided in this repository, and then call:

var data = buildMatrixFromComposerJsonAndLock(composerjson, composerlock);
d3.select('#chart_placeholder')
  .datum(data)
  .call(chart);

DependencyWheel follows the d3.js reusable charts pattern to let you customize the chart at will:

var chart = d3.chart.dependencyWheel()
  .width(700)    // also used for height, since the wheel is in a a square
  .margin(150)   // used to display package names
  .padding(.02); // separating groups in the wheel

Sharing your DependencyWheels

The best way to share your DependencyWheels is to use GitHub Pages, just like this very page. So just fork the fzaninotto/DependencyWheel repository, add your own JSON data under the data/ directory, commit the code, and push to the gh-pages branch. GitHub will publish the result for you.

Licence

All this work is open-source, published by François Zaninotto under the MIT license. Sponsored by marmelab.