Need help with d3-process-map?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

417 Stars 201 Forks MIT License 16 Commits 9 Opened issues


Web application to illustrate the relationships between objects in a process using d3.js.

Services available


Need anything else?

Contributors list

# 10,301
12 commits
# 153,444
2 commits

d3 process map

This is a PHP web application that displays a directed acyclic graph in a modern web browser using d3.js. It is designed for illustrating the relationships between objects in a process.


Data manipulation and reporting process:

Default dataset

Co-occurrences of Les Miserables characters:

Les Mis dataset


  • Hover over a node to see that object's relationships. (Unrelated objects and links will be made partially transparent.)
  • Click on a node to show the documentation for that object.
  • Click the "View list" button to view the documentation for all objects (good for printing).

Data format

The application can display one or more datasets located in the

folder. Each dataset gets its own folder. There are two datasets bundled with the application (one for each of the examples above). Switch between datasets by appending
to the URL. If no dataset name is given, the dataset in the
folder will be displayed.

Each dataset should contain the following files:

  • objects.json
  • config.json
  • *.mkdn
    (one per object)


An array of data objects to be displayed as graph nodes, each with the following properties:

  • name
    : The name of this object
  • type
    : The type of this object (e.g.
    , etc.)
  • depends
    : An array of object names that this object depends on.
  • group
    (optional): This could be thought of as a "subtype".


A JSON object which contains the following fields:

  • title
    : The page title.
  • graph
    : The parameters for the graph and the d3.js force layout.
    • linkDistance
      : The link distance for the d3.js force layout.
    • charge
      : The charge for the d3.js force layout.
    • height
      : The height of the graph, in pixels. (The width of the graph is determined by the width of the browser window when the page is loaded.)
    • numColors
      : The number of colors to display (between 3 and 12).
    • labelPadding
      : The padding inside the node rectangles, in pixels.
    • labelMargin
      : The margin outside the node rectangles, in pixels.
  • types
    : Descriptions of the object types displayed in this graph, each with a
    and a
    field that describe the object type for documentation and for the graph legend, respectively.
  • constraints
    : An array of objects that describe how to position the nodes. Each constraint should have a
    field whose value should be either
    , and a
    field that specifies the conditions an object must meet for the constraints to be applied.
    • Position constraints: These constraints should have the properties
      (optional) and
      (optional). On each iteration of the force layout, node positions will be "nudged" towards the
      values given, with a force proportional to the
    • Link strength constraints: These constraints should have the property
      , which is a multiplier on the link strength of the links to and from the objects that the constraint applies to. This can be used to relax the position of certain nodes.


Each object can have a Markdown file associated with it for additional documentation. The syntax is standard Markdown with one addition: object names can be enclosed in

to insert a link to that object.

If an object's name contains a slash (

), replace it with an underscore (
) in the documentation filename.

Other details

The code uses a d3.js force layout to compute object positions, with collision detection to prevent nodes from overlapping each other.

Nodes are colored by the ColorBrewer Set3 scheme, with colors assigned by the combination of the object's


To ensure that the arrows on the ends of the links remain visible, the links only extend to the outer edge of the target object's node.

Browser support

Works in recent versions of Chrome and Firefox. Other browsers have not been tested, but Internet Explorer doesn't stand a chance until at least version 9.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.