Flow diagram generator with gradients
It’s often useful to show how some property propagates through a system. There are many approaches to this when we create graphs of process flow; most of them rely on setting some either/or property on nodes and arcs, such as coloring all affected nodes red. But gradients can be a powerful tool for making clear how a node affects a system and for giving an intuitive sense of how properties spread through a graph.
In this process flow diagram generator, each node is surrounded by a dial showing ‘quality’ (in the example data, the quality of instrument readings). That’s somewhat useful by itself but it’s far more useful when we use gradients to show how poor quality upstream affects the state of nodes downstream…
Options:
Data:
Usage:
simplenode, id, x, y, width, height //x and y will be ignored, the visualization repositions all nodes
relation, from, to, weight //a weight near 1 is expected but you can use weight to vary the link thickness
fact, key, value //key should be 'quality', value should be 1 for trusted inputs, less than 1 for inputs that affect result quality
Laying out a directed acyclic graph is difficult in general, but laying it out so that it provides some sort of decision-making power at a glance is still more difficult. Often, I feel the color dimension is wasted — used just to make different nodes look different, or at best to highlight some subgraph.
I believe that the color dimension should always be semantically bound to a graph when possible — color should mean something, just as position does. Using color to bring out data quality is one use, but color can be bound to make more things — criticality, data freshness, error margin, or cost, for example, depending on the type of graph.
Use of gradients can be a powerful tool to unite the way we color nodes with the way we present edges, helping edges carry meaning rather than just connect nodes.
