How to create a Sankey Diagram using JointJS+?

Sankey diagrams are a type of flow diagram where the width of the arrows is proportional to the value of the depicted flow property. Sankey diagrams can visualize the energy flow, flow of  material accounts on different scales, cost breakdowns etc. The diagrams are often used in the visualization as a part of a flow analysis. Sankey diagrams emphasize the major transfers of resources or other valuables within a system. They help to get knowledge about the most important contributions to a particular goal and often show conserved quantities within defined system boundaries.

The JointJS+ library allows the creation of such diagrams using its powerful tools and plugins. Flexible links and shapes framework makes it possible to build a diagram with interesting features, such as a sankey diagram. With our plugins and tools, you have the ability to enhance the user experience by enabling fascinating views of sankey diagrams, using powerful link and shape customization to create a fantastic experience for any situation. To get a perfect layout we are using the Stack Layout plugin from JointJS+ package. The sankey diagram application above is written using JavaScript, but can be easily converted into a TypeScript app or integrated with a wide range of web frameworks like React, Angular, Vue or Svelte.

Integration 

JointJS+ provides a wide range of integration options. You can integrate our library not only within a JavaScript application but due to comprehensive typings you can build a TypeScript app using JointJS+. We also provide extensive tutorials for React, Vue, Angular or Svelte framework integrations. The framework-agnostic nature of JointJS+ allows using plugins and other features in conjunction with any JavaScript workflow. ‍

TypeScript Sankey Diagram

If you are using TypeScript in your web applications you can easily integrate JointJS+ library with it. We are providing extensive types for both JointJS and JointJS+ libraries and you can swiftly integrate them to build a TypeScript sankey diagram. You can create custom links and shapes to represent sankey diagram parts using our base classes and Stack Layout feature TypeScript definitions. You can find more information about ways to create custom shapes and links in this tutorial.

React Sankey Diagram

If you like to use React in your applications, it is possible to build a sankey diagram application using a combination of React and JointJS+ in a very efficient manner. Using powerful React components you can easily integrate JointJS+ features into your app. You can create custom shapes and links to modify the view according to the sankey diagram definition. To align shapes in a proper form you can use Stack Layout JointJS+ feature. You can see the example of using that feature in the following snippet:

-- CODE language-js --
import { useEffect } from 'react';
import { dia, ui } from '@clientio/rappid';

const SankeyDiagramApp = () => {
    const paperContainer = useRef(null);
    //...
    useEffect(() => {
        const graph = new dia.Graph();
        const paper = new dia.Paper({
            model: graph
            //...
        });
        paperContainer.current.appendChild(paper.el);

        const stackLayoutView = new ui.StackLayoutView({
            paper,
            layoutOptions: {
                stackSize: 400,
                stackElementGap: 60,
                topLeft: { x: 20, y: 20 },
                direction: "BT",
                stackIndexAttributeName: "layer",
                stackElementIndexAttributeName: "order"
            },
            //...
        });

        //...
        return () => {
            paper.remove();
        };
    }, []);
    //...
    return (
        <div className="paperContainer" ref={paperContainer}/>
    );
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your React application? Follow our tutorial on React and JointJS+ integration. For more examples, check out our Github repository.

Vue Sankey Diagram

Similarly, Vue, with its intuitive and reactive nature, allows easy integration with JointJS+ library. Framework-agnostic nature of JointJS+ makes it possible to fully utilize Vue's declarative syntax and component-based approach. By integrating JointJS+ into your Vue application you can empower your app with custom links and shapes combining them into a powerful visual representation of a sankey diagram. The Stack Layout plugin allows you to easily specify shapes and links positions for perfect diagram presentation:

-- CODE language-js --
<template>
    <div id="tree-app" ref="canvas"></div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { dia, ui } from '@clientio/rappid';

@Options({})
export default class SankeyDiagramApp extends Vue {

    //...
    public created(): void {
        const graph = new dia.Graph();

        const paper = new dia.Paper({
            model: graph,
            //...
        });

        const stackLayoutView = new ui.StackLayoutView({
            paper,
            layoutOptions: {
                stackSize: 400,
                stackElementGap: 60,
                topLeft: { x: 20, y: 20 },
                direction: "BT",
                stackIndexAttributeName: "layer", // attribute set by the parser
                stackElementIndexAttributeName: "order" // attribute set by the parser
            },
            //...
        });
    }
}
</script>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your Vue application? Follow our tutorial on Vue and JointJS+ integration. For more examples, check out our Github repository.

Angular Sankey Diagram

Angular, with its powerful components hierarchy provides the best possibilities for integrating JointJS+ into your application. Inside of any Angular app you can specify new custom shapes and links to build a sankey diagram as well as any other type of a diagram. And JointJS+ plugin Stack Layout allows handling of cells and links layout for better representation. Here is an example of how you can define an angular app which will use Stack Layout plugin:

-- CODE language-js --
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { dia, ui } from '@clientio/rappid';

@Component({
    selector: 'app-root',
    templateUrl: './sankey-diagram.component.html',
    styleUrls: ['./sankey-diagram.component.scss']
})
export class SankeyDiagramApp implements OnInit, AfterViewInit {
    @ViewChild('paperContainer') paperContainer: ElementRef;
    private graph: dia.Graph;
    private paper: dia.Paper;
    //...
    ngOnInit() {
        const graph = this.graph = new dia.Graph();

        const paper = this.paper = new dia.Paper({
            model: graph,
            //...
        });

        const stackLayoutView = new ui.StackLayoutView({
            paper,
            layoutOptions: {
                stackSize: 400,
                stackElementGap: 60,
                topLeft: { x: 20, y: 20 },
                direction: "BT",
                stackIndexAttributeName: "layer", // attribute set by the parser
                stackElementIndexAttributeName: "order" // attribute set by the parser
            },
            //...
        });

        //...
    }

    ngAfterViewInit(): void {
        const { paper, paperContainer } = this;
        paperContainer.nativeElement.appendChild(paper.el)
    }
    //...
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Angular application? Follow our tutorial on Angular and JointJS+ integration. For more examples, check out our Github repository.

Svelte Sankey Diagram

JointJS+ allows great integration with Svelte due to the framework-agnostic approach of our library. With its compiler-based approach, Svelte allows developers to efficiently generate optimized code, resulting in high-performance and visually perfect diagrams such as sankey diagram. The straightforward integration of JointJS+ with Svelte empowers developers to create visually engaging highly comprehensible diagrams. Using Stack Layout plugin allows to specify layout structure of a diagram and here is the example how you can specify it in a Svelte app:

-- CODE language-js --
<script lang="ts">
    import { onMount } from 'svelte';
    import { dia, ui } from '@clientio/rappid';
    import '../node_modules/@clientio/rappid/rappid.css';

    let ref;

    onMount(() => {
        const graph = new dia.Graph();
        const paper = new dia.Paper({
            model: graph,
            //...
        });

        ref.appendChild(paper.el)

        const stackLayoutView = new ui.StackLayoutView({
            paper,
            layoutOptions: {
                stackSize: 400,
                stackElementGap: 60,
                topLeft: { x: 20, y: 20 },
                direction: "BT",
                stackIndexAttributeName: "layer",
                stackElementIndexAttributeName: "order"
            },
            //...
        });
    });
</script>

<main bind:this={ref} class="sankey-diagram-app"></main>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Svelte application? Follow our tutorial on Svelte and JointJS+ integration. For more examples, check out our Github repository.

Salesforce Lightning Sankey Diagram

As a framework-agnostic JavaScript library, JointJS+ allows smooth integration with the Salesforce Lightning framework. Using JointJS+ you can build excellent data representations such as sankey diagrams in your Salesforce Lightning environment.

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Lightning application? Follow our tutorial on Lightning and JointJS+ integration.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use features and demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial to check their source code and develop your next application with ease and confidence.