nylen / d3-process-map

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

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.

Examples

Data manipulation and reporting process:

https://nylen.io/d3-process-map/

Co-occurrences of Les Miserables characters:

https://nylen.io/d3-process-map/?dataset=les-mis

Features

• 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 data/ 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 ?dataset=folder-name to the URL. If no dataset name is given, the dataset in the default folder will be displayed.

Each dataset should contain the following files:

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

objects.json

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. view, table, etc.)
• depends: An array of object names that this object depends on.
• group (optional): This could be thought of as a "subtype".

config.json

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 long and a short 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 type field whose value should be either 'position' or 'linkStrength', and a has field that specifies the conditions an object must meet for the constraints to be applied.
  • Position constraints: These constraints should have the properties weight, x (optional) and y (optional). On each iteration of the force layout, node positions will be "nudged" towards the x and/or y values given, with a force proportional to the weight given.
  • Link strength constraints: These constraints should have the property strength, 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.

*.mkdn

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 {{brackets}} 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 type and group.

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.

d3-process-map's Issues

Any Idea How I can Improve Performance

Is there anything I can do that'll improve the performance of this for say 2000+ nodes?

Compatibility between D3.js BSD License and d3-process-map MIT license

Hi!

I'd love using your work and really appreciate you used MIT permissive license.
Please note however, that library you are using - d3 - is using BSD license.
Therefore, please coordinate with owner od d3js if is willing to move from BSD to MIT,
or consider moving on your side, due to : https://en.wikipedia.org/wiki/License_compatibility .
I am not a lawyer, but it looks like that BSD project can use MIT code not vice versa.
Potentially you can consider hybrid -> MIT to all parts not affected by D3, than those affected to be under BSD. (Most permissive approach, but loosing clarity and in practice - boiling down to BSD as common denominator anyway)

Again, Thanks for work!
Best regards!
Grzegorz Wierzowiecki

Improving the max number of objects

Hi,
Congratulations to this beautiful tool !
It seems to have a limit close to 55 objects for the graph to be viewed, even if the list is prefectly viewed in the navigator for more than 100 objects.
Is there a config file somewhere to improve that limit ?

Is it possible to integrate this with R Shiny?

Hi Nylen, this is wonderfully written code. I was wondering if we could integrate this with an R shiny app or even a normal r2d3 to begin with.

Hide orphan nodes

Is there a way to hide the nodes which don't have at least one child or isn't a parent to at least one child?

Please help, thanks!

Hierarchical edge bundling

Bundle edges together using https://github.com/upphiminn/d3.ForceBundle for better visibility.

D3JS V4 version?

Is there a D3JS V4 version of this available? I am trying to update the script, but having difficulty getting through all the points that require changes. Some changes appear to be not just syntactic, but semantic as well...

nylen.tv not reachable

the Link http://nylen.tv/d3-process-map/ doesn't work.

Integrate with ASP.Net

Can this tool can integrate with ASP.Net web services? I am planning to fetch data from SQL Server database.

Why there is config.json and object.jason two separate files? Do I need to update both if I get data via web services?

Thanks,
Prashant

Circle container instead of rounded rectangles

Hello,

Can we have circle containers instead of rounded rectangles?

how can I use this in a Django project

I think the effect is awesome, and I don't know about php.I'd like to ask which files should I include in a Django project.Thx^^

About multiple relationships?

Thanks for your contribution on this amazing project.

I wanted to generate a figure with multiple kind of relationships. Do you already have a solution on it? If not, is it easy to re-code? Which files need to be modified?

Any guidance would be most helpful.

IE11 connector anchoring issue

The anchoring of arrows when you drag does not work on IE10 and IE11

Possible to change arrow direction?

hai nylen, it is possible to change the arrow direction ? from depends on to depends on by, txs

Position of All Nodes to be remain same when page refreshed

Hi,

We are so happy to use your module in our application,

Question: When we render your module, the position of nodes do not stay in same exact position after refreshing the page,

We notice that currently nodes are positioned in random order every time page is refreshed,

is there a way to keep the position of each node to remain in the same position every time page refreshed,

Please help us if anything can be done to achieve above results,

Much appreciated,

Colored arrows

Hi,
Do you think it could be possible to add a color value to the dependance between 2 objects to display red , green or black arrows ?

Update object layout when browser window is resized

Something like this maybe:

 $(window).on('resize', function() {
    var graphWidth, graphHeight;
    // compute graphWidth, graphHeight
    graph.force.size([graphWidth, graphHeight]);
    graph.force.start();
});

Change the color of highlight arrows

Highlighting some preset paths and other questions.

Hi, thank you for the app and I've been able quickly to get to grips with it. I'm quite new to D3 so please let me know if what I ask is core to it and I should look elsewhere.
I have "a few" questions. Can your app:

1. Let me at the ID of the nodes so I can highlight some predefined paths? (with my own buttons in the UI)
2. Is zooming on selected/highlighted nodes doable?
3. Is a zoom control possible, in a more general way for the whole canvas?
4. Being unfamiliar with the brewer colours, what is the easiest way to override / customise the colours per type / group?
5. Can I lock the 'central' node?
6. I've followed the thread on customising the depth of 'highlights' through the tree. This would be very useful.

URL: http://daisyrust.com/phd/taxonomy/graph.php
Thanks again for your work!

Kind regards, Ian

How to change rect text color?

I am attempting to change the text color in the rect objects and have changed the .node text { color: property in the svg.css file. However, some bug is preventing the text color from changing. I would appreciate any help I could get with this.

Thank you.

Blue highlight doesn't show on Firefox

The combination of feColorMatrix and feGaussianBlur used to highlight the active object doesn't work on Firefox :(

Code: script.js#L159-L183

Ability to group nodes

Hey Nylen,

Firstly, I have to say, you have done an excellent job with the process map. Totally love it! I wanted to use the process map, but I also needed the functionality to group nodes together and be able to collapse/expand them on click.

Here is an example of what I want to add on top of your process map:
http://bl.ocks.org/GerHobbelt/3071239

Any guidance would be most helpful.

Example links are not working anymore

Hello,

Thanks for the very good application of D3 js, but example links are not working any mroe. Can they be fixed please?

Regards
Mk

Highlighting multiple levels of parent/child relationships

Right now the code highlights immediate parent and child nodes when you hover or click a node. A couple of people have asked about making this behavior configurable (e.g. highlight X levels of parents and Y levels of children).

Here are the code changes that would be needed to make this work:

Have a look at the highlightObject function. Right now it adds the inactive class to nodes which are not the current node and are not a child or parent of the current node. You would need to change this function to find all the nodes and edges you want to highlight. I would probably do this as follows:

• Start with the node being highlighted, and walk up and down the tree (loop over depends and dependedOnBy), setting a property like highlightThis to true on each node that should be highlighted. If you find a node that already has highlightThis set, you’re in a cycle of the graph, so stop to avoid infinite recursion.
• Use the highlightThis property you just set to determine whether to set the inactive class on each node.
• Loop over all edges (graph.lines) and remove the inactive class if the source and target are both highlighted, otherwise add the inactive class.
• Finally, loop over all nodes again and delete node.highlightThis;.

That’s the simplest algorithm I can think of that’s not O(n^2) or worse. I’d accept a pull request for this, if the code is clean and there are some options added to config.json to support the new behavior.

Possible to connect a vertex to itself?

Is it possible to show a connection from a vertex to vertex itself? I want to display an ontology and I will use the d3-process-map. But now you cannot connect a vertex to itself.

Adding drop down filters for data?

Firstly, great project!!

Say if I have two objects (OBJ-A, OBJ-B) that depend on a lot of other objects:
OBJ-A: OBJ-1
OBJ-A: OBJ-2
OBJ-A: OBJ-3
OBJ-B: OBJ-4
OBJ-B: OBJ-5
OBJ-B: OBJ-6

...then i'd like to be able to do a dropdown menu to select OBJ-A, to only display anything that depends on OBJ-A, so the resulting list/visible visualisations would be:
OBJ-A: OBJ-1
OBJ-A: OBJ-2
OBJ-A: OBJ-3

Would you happen to know where in the code I'd look to implement a filter for the dataset? At the moment I'm trying to follow the standard documentation but I can't seem to find much relation between how you load the data and how D3 does it. If you know where to look and implement, I will ensure that we give push back to the project when we have a suitable solution to populate multiple filters.