![react graphviz react graphviz](https://www.tilmanbremer.de/wp/wp-content/uploads/2017/06/dotcommandline.jpg)
Business processes are supposed to be systematic and well structured. However, this didn’t align with our intended visual message. The well-established Graphviz library uses Bezier curves, which give the graph an organic look. This makes it necessary to have an edge routing algorithm. The direction of edges can also be hard to decipher because arrow pointers tend to get tiny when you look at a whole graph. If you can only render straight edges, the placement of nodes is restricted unless you can live with a mess of overlapping edges and nodes. Testing with more complex data sets, such as a real-world example involving 36 nodes with highly varying sequences, soon showed the limits of that approach, which brought us to our next insight: Edge Layout Matters In the first iteration (left side in Fig.3), we still tried to get away with only straight or slightly curved edges, without collision detection or dedicated edge routing. 3: Early iterations of the layout algorithm 3 shows two of our layout iterations using these rules.įig. Needless to say, while these rules make sense for process flows, the rules for other types of graphs will be completely different.įig. Establish a clear sequence of steps, so that loops become visible in the form of backward-pointing edges.Where processes are branching and looping, keep the most frequent process flows close to the center, to get as close as possible to a central main flow and peripheral variants.each step has exactly one successor), that segment of the graph should appear as a strictly vertical structure in the graph. Therefore, one of our core challenges was making the structure of the main process visible through the noise. Of course, there are lots of branches and loops blurring that ideal straightforward structure. We decided that a vertical downward flow would be the most intuitive representation of this direction. In our specific case, we expect the graph to represent a process flow, which has a clear direction. Here is what we learned in the process: Map the Meaning of the Data to an Intuitive Visual Structure So we also developed a new, React-based rendering module, with an abstraction layer that allows us to switch between multiple layout implementations. in Cytoscape, the graph component is a Canvas, which is updated in a way that completely bypasses React’s virtual DOM optimizations). We use React to develop our UI unfortunately, the graph libraries we evaluated don’t properly support the rendering paradigm of React (e.g. This insight led us to the decision to write a custom layout algorithm to visualize business processes. This is due to the fact that generic layout algorithms can’t take the meaning of a graph into account, so while they can optimize for certain geometric properties (such as keeping the edges as short as possible, or minimizing the intersection of edges), they can’t produce a visual pattern reflecting the meaning. Oftentimes, the actual (“as-is”) business processes of our customers differ from the ideal (“to-be”) processes they have defined, and surfacing such discrepancies, bottlenecks and delays creates tremendous value. So open source libraries were our first stop when we set out to build Splunk Business Flow, an application that provides business operations professionals with insights into their actual end-to-end business processes and customer experiences through interactive exploration and visualization. One could assume that by today there is a perfect layout strategy for pretty much every common use case and probably some open source library implementing it. Open source libraries such as d3.js provide generic graph visualizations that can be used and adapted with minimal effort. Computers have enabled us to automatically create such visualizations from data and layout algorithm research has been done for decades. The Great Stemma, the “ Tree of Knowledge”, or any Mind Map). Visualizations of graphs, in the form of circles connected by lines, have been used for centuries (see e.g. Graph structures are everywhere: in social media, genealogy, supply and distribution chains, financial networks, security, and business processes, to name just a few. Graphs are probably the most powerful and versatile of all data structures. Lessons Learned from Creating a Custom Graph Visualization in React