Skip to content

mindrones/timely-dependency-graph

Repository files navigation

As of today, this script create dependency graphs of D3 modules, for d3 version 4+. In the future it might support generic npm modules.

Focusing on a certain release of a d3 module, you can visualize its dependencies tree and the modules that depends on the focused release.

Example: focusing on d3-axis

Usage

Quick usage

Interaction

  • With the mouse, hover the release rectangles to show their dependencies graph
  • click on a release: pin/unpin it (then you can change how to display the dependencies graph using sidebar's controls)
  • mouse wheel: zoom in and out
  • mouse drag: pan left-right

UI terminology

  • server: a module the focused release depends on
  • client: a module depending on the hovered release

(this will most certainly change in the future)

Sidebar

FOCUS panel

Shows:

  • the cursor date and time
  • the hovered release name, version, date and time

CONTROLS panel

  • Choose how you want to inspect dependencies release date.

    For example, d3-shape version 0.6.0 depends on d3-path version ~0.1.3. In semver lingo this is a version range meaning >=0.1.3 <0.2.0, hence as of now:

    • the first valid version of d3-path as a dependency of d3-shape 0.6.0 is 0.1.3;
    • the last valid version of d3-path as a dependency of d3-shape 0.6.0 is 0.1.5.

    First and last valid dependency version

  • Choose how to visualize "servers" (dependencies):

    • as "sets" (lines passing through the focused release and all servers);
    • as links between each server and the focused release.

    Show dependencies as sets or links

    Note that dependencies graph is a tree (because dependencies have their own dependencies):

    • since a set is basically a subtree, the color of a set is the color of the module originating that subtree;
    • links, instead, gets the color of the dependency.
  • Choose if you want to see "client lines", links between the focused release and its clients.

    Show or hide clients

LEGEND panel

Shows graphs elements representation associated with their meaning. Well, it's a legend :)

To run it locally

Install dependencies:

  • [optional] install node and npm on your system
  • cd <your work directory>
  • clone [email protected]:mindrones/timely-dependency-graph.git
  • cd timely-dependency-graph
  • npm install

Run: