Visualizing Supply Chains with the Vizards
--
A hands-on approach on how to improve the quality of data visualizations step by step, even when you are not an expert in the field.
Comsysto Reply is a fairly large company with 120 employees and since almost everyone there is a techie, you can find a multitude of different languages, tools, technologies and opinions within the company. A few particularly strange members of the company staff, who all have in common that they are interested in data visualizations, Lisps and functional programming, get together one fine day and decided to work together in the future. This was the birth of the “Vizards”: a team of data visualization enthusiasts, who want to get their hands dirty tackling real world data visualization challenges and improve their skills as developers.
Project
In November 2019 we approached the Munich based startup IntegrityNext, which had to offer the data visualization challenge that we were looking for. Over time they had accumulated a data set that contained customer-supplier relationship information for a large number of companies. With this valuable data in place they wanted to find an easy way to analyze and utilize their data. The initial idea for the project: find a visually appealing representation for the data, so it can be explored, understood and used by the customers of IntegrityNext.
The mission of IntegrityNext is to enable companies to monitor their entire supply base regarding sustainability and compliance in order to meet regulatory requirements and reduce risk. To achieve that, a customer of IntegrityNext can invite its suppliers to collect a variety of information about their own suppliers via questionnaires. The suppliers are asked a set of questions about a number of different “compliance topics”, which are different categories of compliance, e.g. environmental protection, anti-bribery & corruption, human rights & labor and so on.
A typical company profile that IntegrityNext creates this way could contain information similar to the following (fictional) example:
Fred Corp. is a manufacturer of handkerchiefs located in Belgium. The production process of handkerchiefs needs a few basic resources and chemicals, which Fred Corp. is importing from 27 different suppliers that are located in Czech Republic, Poland, Brazil, China and France among other countries. Each of these 27 different suppliers has multiple suppliers on its own.
When connecting the individual company profiles, the result is a network of suppliers that can now be analyzed with focus on different aspects. Some interesting questions concerning such a network of suppliers that we planned to investigate are:
- How deep is the network?
- What is the average number of suppliers?
- What is the overall distribution for different compliance topics?
- How are the suppliers distributed across countries?
Approach
How to find answers to all these questions? In order to come up with a sensible approach, we discussed possible next steps on how to proceed with the “data-blob” that we received from IntegrityNext. The result of our discussion was the following three-step process to create a visualization:
Data
We analyzed the data with the goal to get an unbiased impression, without being influenced by a concrete visualization idea yet. We soon found out that the most interesting part about this dataset was the shape of supplier networks so we started by computing the depth of the network. To avoid overfitting the data visualization to a subset of date samples, we created our own random supplier network generator. This generator provided us with an unlimited number of data samples for exploring our visualization ideas.
Design
After the data exploration ended, we researched possibilities to display hierarchical data and drew first drafts of possible visualization. We took our drafts to an initial ideation meeting and discussed all of our and IntegrityNext’s ideas. Together we assessed the advantages and disadvantages of each idea and finally concluded that we will start with a pack visualization as a first approach.
In order to minimize the feedback-loop between IntegrityNext and us, we made our current progress visible and accessible at any time via a website. We implemented our ideas for the pack visualization on each individual node of the hierarchy, the hierarchy itself and possible interactions with the pack visualization. Every idea is shown separately on the website, which as a result, provides IntegrityNext with a sort of “catalogue” of data visualization ideas that they could choose from, in order to realize their own ideas about visualizing supplier networks.
Visualization
At the time of writing this blog post, we did not enter the visualization phase yet. We’re still assessing various ideas together with IntegrityNext. As soon as we enter the Visualization phase, IntegrityNext will have chosen their perfect visualization from the catalogue that we created. As a last step, after the final version of the visualization is decided, we will make sure that the visualization works cross-browser, on mobile devices with an optimal performance. We plan to write a follow-up post with the challenges we will encounter in the last phase of this project.
Tech
The technology we choose for our data visualizations is the functional Lisp-dialect Clojure. Clojure provides several advantages, which fit our use case very well. One aspect is the REPL-driven programming style; it allows us to test all of our assumptions immediately in a very tight feedback loop which facilitates testing multiple ideas. In addition Clojure provides interoperability to access the whole JavaScript ecosystem and the JVM ecosystem as well.
Thanks to Clojure we could choose from a wide range of technologies to create the data visualization: we used d3.js to compute the layout of our pack visualizations, React with the Clojure wrapper Reagent to manage the state within application and hiccup to generate HTML markdown. The Oz library helped us to find interesting insights in the data and ring/compojure served as a fake backend to serve random data for our data visualization.
Conclusion
We have already come a long way since that day we first started out by trying to get our heads around some basic d3 transitions. We implemented pack visualizations, sankey diagrams, and crazy morphs between them. We learned most of this by following people who are already professionals with years of experience in this area. Trying to understand and discuss , what makes a data visualization good or bad and which parts we can extract, combine and reuse, helped us enormously in getting better at what we are doing. So far we have a really astonishing customer satisfaction rate:
Thanks for your interest in data visualizations and the Vizards team! Stay tuned for more! As a last takeaway for you, dear reader: the Vizards are out there, saddled up and looking for new challenges!
This blogpost is published by Comsysto Reply GmbH
