Interactive Supply Chain Visualization in JavaScript

A step-by-step developer tutorial with live code examples

Practical coding implementation guide

Build your own interactive supply chain visualization step by step. Expand each section below to dive into implementation details, hands-on code, and live playgrounds for every development phase.

What each phase includes

Example: Interactive supply chain diagram

See how a basic material network evolves into a production-ready supply chain visualization:

• Flexible layouts (top-to-bottom, left-to-right)
• Node sizes reflect current inventory
• Colors show material categories
• Edges and labels display material flow and quantities
• Interactive features enhance exploration and clarity

Editable manufacturing process diagram showing inventory, material flows, and processing steps.

This visualization shows a manufacturing process network coded with yFiles. Raw materials flow through multiple stages to finished goods. Node size shows inventory; color and labels show material data.

Data import

Load the node and edge data

The easiest way to work with supply chain data is to provide it as structured objects. A simple JSON file or JavaScript object is usually a great starting point. Of course, you could also load the data dynamically from a database or fetch it via a REST API. In this example, we use a JSON file with nodes and connections:

{
  "items": [
    { name: "Iron-Vein", id: 5, stack_size: 50, category: "Raw Material" },
    { name: "Cobblestone", id: 6, stack_size: 50, category: "Raw Material" },
    ...
  ],
  "connections": [
    { sourceId: 5, targetId: 6, amount: 1, category: "Raw Material" },
    ...
  ]
}

• Each node has a name, an id, a stack size, and a category.
• Each connection links a source node to a target node using the id.
• Any additional properties you define are also available in the graph and can be visualized.

Initialize the GraphComponentAPI

Next, we create the rendering surface for the graph:

const graphComponent = new GraphComponent('#graphComponent')
const graph = graphComponent.graph

The GraphComponentAPI mounts to any existing DOM element by passing a CSS selector. In this case, we use the id="graphComponent".

In the yFiles Playground this setup is already done for you. When developing locally, however, this step is required to render the graph.

1. Create the supply chain from business data

Now we can build the graph from the imported data and apply a basicHierarchicalLayout APIto quickly get an overview of the structure.

Even with minimal configuration, yFiles arranges the graph intelligently and produces a useful first visualization. TheGraphBuilderAPI makes it easy to load structured data, and later on you can customize both the appearance and the layout in detail.

2. Make information visible

To enrich the visualization, we configure theGraphBuilderAPI to show additional information.

Improve material visualization

Node size now reflects the available stock, while the color shows the material category. For example, "Raw Material" units are displayed in light blue.

Improve label visualization

Labels can be styled in the same way as nodes and edges, making the network easier to read at a glance.

3. Improve arrangement

The default HierarchicalLayout APIalready creates a clean visualization, but we can adapt it to better match our supply chain use case.

For example, raw materials can be aligned at the start of the diagram to emphasize the flow of production.

Improve edge label placement

To make the diagram even clearer, we can position edge labels at the incoming side of a material node, so the required amounts are visible exactly where they are used.

4. Apply different layout options

yFiles provides a variety of automatic layout algorithms and options to further refine the result. You can, for example, switch the layout orientation from top-to-bottom to left-to-right, or enable automatic edge grouping.

In the Playground example, both options can be toggled directly in the tooltip.

Summary

How to create an interactive supply chain visualization with yFiles

Recap

Creating interactive supply chain visualizations

Interactive supply chain visualization is an advanced approach for mapping, analyzing, and optimizing supply network data through dynamic, editable diagrams. Visualizing supply chains allows organizations to uncover material flows, production dependencies, inventory levels, and process bottlenecks with greater clarity than traditional spreadsheets or static charts.

The yFiles SDK is especially well-suited for this purpose, empowering developers to build custom supply chain visualizations in JavaScript that feature automatic layouts, real-time data binding, and extensive customization. The interactive coding guide in the practical coding implementation demonstrates how to load supply chain data, style elements, optimize layouts, and implement advanced features like zooming, tooltips, and filtering. These tools make it possible to model dependencies, track material quantities, and immediately visualize the effects of changes, delivering actionable insight for decision-makers.

Developers can import data from JSON, APIs, or business systems (Data Import), use hierarchical layout algorithms to clarify process flows, and apply live style adjustments or interactions. The summary consolidates the key phases and features for building scalable, interactive supply chain visualizations with yFiles.

Related content

Supply chain management

yFiles hierarchical layout

Got questions about
interactive supply chain visualizations?

Email: hello@yworks.com
Phone: +49 7071 9709050

Get in touch