Visualizing Supply Chains with the Vizards

Vizards
Vizards
May 12, 2020 · 6 min read

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.

Image for post
Image for post

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:

Image for post
Image for post

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.

Visualizations Catalogue

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:

Image for post
Image for post

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!

HIRE THE VIZARDS

Image for post
Image for post
HIRE THE VIZARDS

This blogpost is published by Comsysto Reply GmbH

comsystoreply

Innovation through insight.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store