1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
# d3 process map
This is a PHP web application that displays a directed acyclic graph in a
modern web browser using [d3.js](http://d3js.org/). It is designed for
illustrating the relationships between objects in a process.
### Examples
#### Data manipulation and reporting process:
[](https://nylen.io/d3-process-map/)
<br>https://nylen.io/d3-process-map/
#### Co-occurrences of Les Miserables characters:
[](https://nylen.io/d3-process-map/?dataset=les-mis)
<br>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](https://github.com/mbostock/d3/wiki/Force-Layout#wiki-linkDistance)
for the d3.js force layout.
* `charge`: The
[charge](https://github.com/mbostock/d3/wiki/Force-Layout#wiki-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](https://daringfireball.net/projects/markdown/syntax) 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](https://github.com/mbostock/d3/wiki/Force-Layout) to
compute object positions, with
[collision detection](http://bl.ocks.org/mbostock/3231298) to prevent nodes
from overlapping each other.
Nodes are colored by the
[ColorBrewer Set3 scheme](http://colorbrewer2.org/?type=qualitative&scheme=Set3&n=12),
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.
|
