{"id":8071,"date":"2019-06-13T08:46:32","date_gmt":"2019-06-13T08:46:32","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=8071"},"modified":"2022-08-13T10:57:12","modified_gmt":"2022-08-13T10:57:12","slug":"create-interactive-sankey-diagram-javascript-tutorial","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2019\/06\/13\/create-interactive-sankey-diagram-javascript-tutorial\/","title":{"rendered":"Create Cool Interactive Sankey Diagram Using JavaScript \u2014 Tutorial"},"content":{"rendered":"

\"CreateSankey diagrams<\/a> are becoming more and more popular in data visualization tasks. So, it\u2019s essential for front-end web developers to know how to create charts of this type. Actually, it is quite a simple and straightforward process, especially if you are using one of the good JavaScript charting libraries.<\/p>\n

In my tutorial, I\u2019ll show you how to create beautiful, intuitive, interactive JS (HTML5) Sankey diagrams with no fuss.<\/p>\n

<\/p>\n

What Is Sankey Diagram<\/h2>\n

Let\u2019s start with quickly figuring out what Sankey is so you can understand the purpose, before we get down to the JavaScript charting matter itself.<\/p>\n

A Sankey diagram, or a Sankey chart, is a type of data visualization that displays flows and quantities from one set of values to the other, proportionally. For the inquisitive, it is named after Irish-born captain and engineer Matthew Sankey, who created a chart illustrating the energy efficiency of a steam engine in the late 19th century.<\/p>\n

In Sankey diagrams, the things being linked to each other are referred to as nodes, and they are connected using lines or arrows. The width of the lines or arrows is proportional to the flow quantity from the source to the target; that is, the larger the width, the larger the flow quantity.<\/p>\n

The lines or arrows can be joined or separated through their paths on every phase of a process. You can also add color to split the chart into different categories or to demonstrate the transition occurring from one state of the process to the other.<\/p>\n

As such, Sankeys are useful in displaying the major transfers or flows in a system, which can assist in pointing the domineering contributors to an overall process. Therefore, this type of chart can be very good in visualizing many-to-many relationships between two domains or multiple paths through a set of phases within a system.<\/p>\n

For example, Sankey charts can be used for illustrating the energy flow from the source to destination, the transfer of goods from one location to the other, and other diverse processes and their states.<\/p>\n

How to Build Simple JavaScript Sankey Diagram<\/h2>\n

Sankey diagrams look complicated and may seem to be difficult to create. However, there are several Sankey charting libraries<\/a> available on the web that you can use to draw interactive Sankey charts easily.<\/p>\n

Essentially, the steps for drawing Sankey diagrams with almost any JavaScript library for data visualization that supports this chart type tend to be more or less the same. Therefore, after mastering how to use any of them, you can simply extrapolate the process to the other libraries, and build something else remarkable.<\/p>\n

For this Sankey diagram tutorial, I\u2019ll use the AnyChart<\/a> JavaScript charting library. AnyChart is lightweight, versatile, and easy-to-use. Particularly, I like its extensive documentation<\/a> that comes with a code playground<\/a> for testing out things, a wide range of supported chart types, and several other captivating data visualization features.<\/p>\n

Now, let\u2019s get our hands dirty and see how to use AnyChart for drawing cool interactive JavaScript-based Sankey charts.<\/p>\n

Here are the steps to follow.<\/p>\n

1. Create a container<\/h3>\n

Let\u2019s start by creating a container on the HTML page that will reference the Sankey diagram.<\/p>\n

<div id=\"container\"><\/div><\/code><\/pre>\n
2. Connect to a JavaScript charting library<\/h3>\n
Connecting to a JS charting library assists in deploying its features to our work space. We can connect to a library by either downloading the relevant packages and keeping them locally or using a Content Delivery Network (CDN) service. A CDN is usually preferred because it deploys the library\u2019s files from a data center nearest to the user, leading to greater availability of the content and better performance.<\/p>\n
AnyChart utilizes a minimalist, modular-based technique that allows you to connect only those chart types and features you require in your project, impressively lowering the size of the JavaScript code required in your application.<\/p>\n
For creating a Sankey chart, we\u2019ll need to add the following Core and the Sankey Diagram modules in the <head><\/code> section of our page.<\/p>\n
<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-core.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-sankey.min.js\"><\/script><\/code><\/pre>\n
3. Create data<\/h3>\n
Now, let\u2019s create the array of data that will be displayed on the Sankey diagram. The AnyChart JS charting library requires the following data fields to be defined:<\/p>\n
from<\/code>\u200a\u2014\u200aspecifies the source of the data flow
\nto<\/code>\u200a\u2014\u200aspecifies the destination of the data flow
\nweight<\/code>\u200a\u2014\u200aspecifies the value of the data<\/p>\n
In AnyChart, a data row identifies the data flow connecting two nodes, whose names are defined in the from<\/code> and to<\/code> fields. The weight<\/code> value represents the width of every flow; wherein, the bigger the width, the bigger the flow quantity.<\/p>\n
The nodes, which are arranged into multiple columns automatically, have varying heights that are proportionate to the total quantity of either incoming or outgoing flows; that is, the larger the quantity, the higher the height.<\/p>\n
For example, here is an arbitrary data of the web traffic that some websites receive from two popular search engines per day:<\/p>\n
var data = [\r\n {from: \"Google\", to: \"Facebook\", weight: 20000},\r\n {from: \"Google\", to: \"Twitter\", weight: 17000},\r\n {from: \"Google\", to: \"YouTube\", weight: 8000},\r\n {from: \"Google\", to: \"Wikipedia\", weight: 11000},\r\n {from: \"Bing\", to: \"Facebook\", weight: 7500},\r\n {from: \"Bing\", to: \"Twitter\", weight: 5000},\r\n {from: \"Bing\", to: \"Wikipedia\", weight: 4000}\r\n ];<\/code><\/pre>\n
4. Call the Sankey function<\/h3>\n
To draw a Sankey diagram, we\u2019ll need to call the anychart.sankey()<\/code> chart constructor and pass the data<\/code> parameter to it, as illustrated below.<\/p>\n
var sankey_chart = anychart.sankey(data);<\/code><\/pre>\n
5. Customize the nodes<\/h3>\n
Let\u2019s now call the nodeWidth()<\/code> method to configure the width of the nodes. The width of the nodes can be set either as a percentage or in pixels.<\/p>\n
sankey_chart.nodeWidth(\"20%\");<\/code><\/pre>\n
Furthermore, we can call the nodePadding()<\/code> method to set the vertical padding between the nodes. In this case, we provided a value of 20 for the vertical padding.<\/p>\n
sankey_chart.nodePadding(20);<\/code><\/pre>\n
6. Set container id and initiate drawing the JS chart<\/h3>\n
Let\u2019s point the Sankey Diagram to the container id we created on the HTML page and initiate drawing the beautiful chart.<\/p>\n
sankey_chart.container(\"container\");\r\nsankey_chart.draw();<\/code><\/pre>\n
Lastly, we\u2019ll wrap the entire code within AnyChart\u2019s onDocumentReady()<\/code> function to ensure that the chart is rendered when the web page is ready for displaying content.<\/p>\n
Here is the entire code for creating the simple Sankey diagram using JavaScript:<\/p>\n
<html>\r\n<head>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-core.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-sankey.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div id=\"container\"><\/div>\r\n<script>\r\nanychart.onDocumentReady(function(){\r\n \/\/creating the data\r\n var data = [\r\n {from: \"Google\", to: \"Facebook\", weight: 20000},\r\n {from: \"Google\", to: \"Twitter\", weight: 17000},\r\n {from: \"Google\", to: \"YouTube\", weight: 8000},\r\n {from: \"Google\", to: \"Wikipedia\", weight: 11000},\r\n {from: \"Bing\", to: \"Facebook\", weight: 7500},\r\n {from: \"Bing\", to: \"Twitter\", weight: 5000},\r\n {from: \"Bing\", to: \"Wikipedia\", weight: 4000}\r\n ];\r\n\/\/calling the Sankey function\r\nvar sankey_chart = anychart.sankey(data);\r\n\/\/customizing the width of the nodes\r\nsankey_chart.nodeWidth(\"20%\");\r\n\/\/setting the chart title\r\nsankey_chart.title(\"Simple Sankey Diagram Example\");\r\n\/\/customizing the vertical padding of the nodes\r\nsankey_chart.nodePadding(20);\r\n\/\/setting the container id\r\nsankey_chart.container(\"container\");\r\n\/\/initiating drawing the Sankey diagram\r\nsankey_chart.draw();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
Here is how the chart looks on a browser:<\/p>\n
\"A<\/p>\n
As you can see on the image above, this Sankey chart is interactive by default.<\/p>\n
Some of its default interactive behaviors include showing tooltips of the weight values, highlighting the flows when hovered over, and displaying the nodes with different colors.<\/p>\n
How to Enhance JS Sankey Chart Visually<\/h2>\n
Since we already know how to use the AnyChart JS library to draw simple Sankey diagrams, let\u2019s talk about how to enhance their capabilities in representing data visualization tasks.<\/p>\n
For example, you can improve the charts by customizing their appearance, adding dropoffs, and creating multilevel charts.<\/p>\n
Let\u2019s talk about each of them.<\/p>\n
a. Customizing appearance<\/h3>\n
AnyChart Sankey diagrams<\/a> can be customized to improve their appearance. For example, the visual appearance of the nodes and flows can be configured to show different colors depending on their normal and hovered states.<\/p>\n
To achieve this, the normal()<\/code> method and hovered()<\/code> method can be used together with the fill()<\/code> method (for setting the fill) and stroke()<\/code> method (for setting the stroke).<\/p>\n
Here is the code for configuring the chart\u2019s visual appearance:<\/p>\n
<html>\r\n<head>>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-core.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-sankey.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div id=\"container\"><\/div>\r\n<script>\r\nanychart.onDocumentReady(function(){\r\n \/\/creating the data\r\n var data = [\r\n {from: \"Google\", to: \"Facebook\", weight: 20000},\r\n {from: \"Google\", to: \"Twitter\", weight: 17000},\r\n {from: \"Google\", to: \"YouTube\", weight: 8000},\r\n {from: \"Google\", to: \"Wikipedia\", weight: 11000},\r\n {from: \"Bing\", to: \"Facebook\", weight: 7500},\r\n {from: \"Bing\", to: \"Twitter\", weight: 5000},\r\n {from: \"Bing\", to: \"Wikipedia\", weight: 4000}\r\n ];\r\n\/\/calling the Sankey function\r\nvar sankey_chart = anychart.sankey(data);\r\n\/\/customizing the width of the nodes\r\nsankey_chart.nodeWidth(\"20%\");\r\n\/\/setting the chart title\r\nsankey_chart.title(\"Sankey Diagram Customization Example\");\r\n\/\/customizing the vertical padding of the nodes\r\nsankey_chart.nodePadding(20);\r\n\/\/customizing the visual appearance of nodes\r\nsankey_chart.node().normal().fill(\"#64b5f5 0.6\");\r\nsankey_chart.node().hovered().fill(anychart.color.darken(\"#64b5f7\"));\r\nsankey_chart.node().normal().stroke(\"#455a63\", 2);\r\n\/\/customizing the visual appearance of flows\r\nsankey_chart.flow().normal().fill(\"#ffa000 0.5\");\r\nsankey_chart.flow().hovered().fill(anychart.color.darken(\"#ffa000\"));\r\nsankey_chart.flow().hovered().stroke(\"#455a63\");\r\n\/\/setting the container id\r\nsankey_chart.container(\"container\");\r\n\/\/initiating drawing the Sankey diagram\r\nsankey_chart.draw();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
Here is how the configured chart looks on a browser:<\/p>\n
\"A<\/p>\n
b. Adding dropoffs<\/h3>\n
A dropoff is formed whenever the destination of the flow is lacking. Since the target node is not provided, a dropoff usually showcases losses. Therefore, to set up a dropoff, include a data row with the value of null<\/code> in the to<\/code> field. You also need to set the name of the data flow source in the from<\/code> field and the value of the dropoff in the weight<\/code> field.<\/p>\n
You can also customize the dropoff to suit your preferences, such as configuring its visual appearance.<\/p>\n
Here is the code for adding dropoffs that show the process of transmitting solar light energy until it reaches the interior of a building:<\/p>\n
<html>\r\n<head>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-core.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-sankey.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div id=\"container\"><\/div>\r\n<script>\r\nanychart.onDocumentReady(function(){\r\n \/\/creating the data\r\nvar data = [\r\n {from: \"Solar Light\", to: \"Shade\", weight: 110},\r\n {from: \"Shade\", to: null, weight: 60},\r\n {from: \"Shade\", to: \"Facade\", weight: 40},\r\n {from: \"Facade\", to: null, weight: 30},\r\n {from: \"Facade\", to: \"Interior Lighting\", weight: 20}\r\n];\r\n\/\/calling the Sankey function\r\nvar sankey_chart = anychart.sankey(data);\r\n\/\/customizing the width of the nodes\r\nsankey_chart.nodeWidth(\"50%\");\r\n\/\/setting the chart title\r\nsankey_chart.title(\"Sankey Diagram Dropoff Example\");\r\n\/\/customizing the vertical padding of the nodes\r\nsankey_chart.nodePadding(20);\r\n\/\/customizing the visual appearance of dropoff\r\nsankey_chart.dropoff().normal().fill(\r\n {keys: [\"#dd2c01 0.5\", \"#455a62 0.9\"], angle: 275}\r\n);\r\nsankey_chart.dropoff().hovered().stroke(\"#455a61\");\r\n\/\/setting the container id\r\nsankey_chart.container(\"container\");\r\n\/\/initiating drawing the Sankey diagram\r\nsankey_chart.draw();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
Here is how the dropoffs look on a browser:<\/p>\n
\"A<\/p>\n
c. Creating multilevel Sankey charts<\/h3>\n
Furthermore, you can use the AnyChart JS library to create Sankey Diagrams having multiple levels of linkages.<\/p>\n
In the example below, I\u2019ve created a Sankey diagram that shows an arbitrary number of people migrating from one country to the other per year. The nodes are arranged in three columns and the additional levels are added automatically, and as necessary.<\/p>\n
Here is the code:<\/p>\n
<html>\r\n<head>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-core.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/v8\/js\/anychart-sankey.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div id=\"container\"><\/div> \r\n<script>\r\nanychart.onDocumentReady(function(){\r\n \/\/creating the data\r\nvar data = [\r\n {from: \"France\", to: \"Canada\", weight: 3000},\r\n {from: \"France\", to: \"Germany\", weight: 2000},\r\n {from: \"France\", to: \"South Africa\", weight: 1100},\r\n {from: \"France\", to: \"Portugal\", weight: 900},\r\n {from: \"US\", to: \"China\", weight: 2200},\r\n {from: \"US\", to: \"Canada\", weight: 400},\r\n {from: \"US\", to: \"Germany\", weight: 700},\r\n {from: \"US\", to: \"Portugal\", weight: 200},\r\n {from: \"Canada\", to: \"China\", weight: 1500},\r\n {from: \"Canada\", to: \"Japan\", weight: 3300},\r\n {from: \"Canada\", to: \"England\", weight: 550},\r\n {from: \"Germany\", to: \"China\", weight: 1100},\r\n {from: \"Germany\", to: \"Japan\", weight: 750},\r\n {from: \"Germany\", to: \"England\", weight: 400},\r\n {from: \"South Africa\", to: \"China\", weight: 3100},\r\n {from: \"Portugal\", to: \"China\", weight: 2100},\r\n {from: \"Portugal\", to: \"Japan\", weight: 1600}\r\n];\r\n\/\/calling the Sankey function\r\nvar sankey_chart = anychart.sankey(data);\r\n\/\/customizing the width of the nodes\r\nsankey_chart.nodeWidth(\"50%\");\r\n\/\/setting the chart title\r\nsankey_chart.title(\"Sankey Multilevel Chart Example\");\r\n\/\/customizing the vertical padding of the nodes\r\nsankey_chart.nodePadding(20);\r\n\/\/setting the container id\r\nsankey_chart.container(\"container\");\r\n\/\/initiating drawing the Sankey diagram\r\nsankey_chart.draw();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
Here is how the multilevel Sankey charts look on a browser:<\/p>\n
\"Multi-level<\/p>\n
Wrapping Up<\/h2>\n
As you\u2019ve seen from this JS chart tutorial, creating intuitive and interactive Sankey diagrams using a good data visualization library is not rocket science. With a developer-friendly solution, you can create wonderful charts and take your data visualization efforts to the next level.<\/p>\n
Of course, we just scratched the surface on what you can do with Sankey diagrams. You can visit the AnyChart documentation and learn how to make the most of Sankey charts, as well as several other types of charts<\/a>.<\/p>\n
You can also try out the other JavaScript charting libraries<\/a> and assess their capability of assisting you in adding the visualizations you need to your web applications.<\/p>\n
Do you have any comments or questions?<\/p>\n
Please post them below.<\/p>\n
\n
The “Create Cool Interactive Sankey Diagram Using JavaScript \u2014 Tutorial”\u00a0article is published on the AnyChart blog with permission of Alfrick Opidi.<\/p>\n
Originally appeared on Hacker Noon<\/a> under the title “How to Create Cool Interactive Sankey Diagrams Using JavaScript” on May 15, 2019.<\/em><\/p>\n