{"id":14973,"date":"2022-05-25T14:32:13","date_gmt":"2022-05-25T14:32:13","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14973"},"modified":"2022-08-13T11:11:27","modified_gmt":"2022-08-13T11:11:27","slug":"sankey-diagram-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/05\/25\/sankey-diagram-js\/","title":{"rendered":"How to Create Sankey Diagram (with JavaScript)"},"content":{"rendered":"

\"Sankey<\/a>Would you like to learn how to quickly create a really cool chart called a Sankey diagram? You\u2019re in the right place! Together, we will build an elegant Sankey chart<\/a> using JavaScript, and then you\u2019ll be able to produce such data visualizations by yourself with no hassle at all.<\/p>\n

Depicting the flow of values from one set to another, Sankey diagrams are ideal when you need to graphically represent a many-to-many mapping between two domains or multiple paths through a number of stages. So, competence in making them will be a great addition to the skill set of anyone dealing with data visualization<\/a> design and development.<\/p>\n

110 years after it sank on April 15, 1912, the Titanic<\/a> still holds us in its thrall, piquing people\u2019s imagination. Now, we will use the JS Sankey diagramming technique to look at its passengers and crew and find out who survived and perished based on gender, age, and ticket class. Follow along!<\/p>\n

<\/p>\n

Sankey Diagram Preview<\/h2>\n

Take a glance at the Sankey diagram we will have built by the end of the tutorial:<\/p>\n

\"A<\/p>\n

Now, the journey begins \u2014\u00a0read on to learn how to build Sankey charts like this using pure JavaScript!<\/p>\n

Building Basic JS Sankey Diagram<\/h2>\n

A Sankey diagram looks really exciting and is pretty easy to create with JS. Some basic knowledge of web technologies is always beneficial in interactive data visualization. But in reality, everything is uncomplicated and you will understand it all even if you are a beginner.<\/p>\n

The process of creating a JavaScript-based Sankey diagram can be split into four steps:<\/p>\n

    \n
  1. Create an HTML page.<\/li>\n
  2. Add scripts.<\/li>\n
  3. Set data.<\/li>\n
  4. Write some JS code.<\/li>\n<\/ol>\n

    Let\u2019s go through them together.<\/p>\n

    1. Create an HTML page<\/h3>\n

    To start with, create a basic HTML page to hold the intended Sankey chart and define a block element in it.<\/p>\n

    To reference this <div><\/code> later in the code, give it an identification attribute (\u201ccontainer\u201d in this example) and set the desired style properties (here, the width and height are 100%, which will let the diagram stretch across the entire web page).<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sankey Diagram<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    2. Add scripts<\/h3>\n
    The next step is to add the necessary scripts.<\/p>\n
    In this tutorial, I am using the AnyChart JavaScript library<\/a>. It is flexible and easy to use thanks to its comprehensive documentation<\/a> along with many readymade chart examples<\/a>.<\/p>\n
    AnyChart is modular, which lets you minimize the size of the JavaScript code running on your web page by connecting the chart types and features you actually need and nothing more. For the Sankey chart development, you just need the core module<\/a> along with the specific Sankey module<\/a>. Add both to the <head><\/code> section of the HTML page.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sankey Diagram<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-sankey.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the code for the JS Sankey Diagram will come here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Set data<\/h3>\n
    Data for this tutorial is taken from the Titanic dataset<\/a> on Kaggle. I have only put it in a form suitable<\/a> for a Sankey diagram.<\/p>\n
    The dataset is not large, so you can directly add it to the code just like that. (For a particular task, you may opt for another way of working with data<\/a>, of course.)<\/p>\n
    const data = [\r\n  {from: 'First Class', to: 'Child', value: 6},\r\n  {from: 'Second Class', to: 'Child', value: 24},\r\n  {from: 'Third Class', to: 'Child', value: 79},\r\n  {from: 'Crew', to: 'Child', value: 0},\r\n  {from: 'First Class', to: 'Adult', value: 319},\r\n  {from: 'Second Class', to: 'Adult', value: 261},\r\n  {from: 'Third Class', to: 'Adult', value: 627},\r\n  {from: 'Crew', to: 'Adult', value: 885},\r\n  {from: 'Child', to: 'Female', value: 45},\r\n  {from: 'Child', to: 'Male', value: 64},\r\n  {from: 'Adult', to: 'Female', value: 425},\r\n  {from: 'Adult', to: 'Male', value: 1667},\r\n  {from: 'Female', to: 'Survived', value: 344},\r\n  {from: 'Female', to: 'Perished', value: 126},\r\n  {from: 'Male', to: 'Survived', value: 367},\r\n  {from: 'Male', to: 'Perished', value: 1364},\r\n]<\/code><\/pre>\n
    That\u2019s it, everybody is on board, and now it\u2019s time to set sail by writing a few lines of JS charting code!<\/p>\n
    4. Write some JS code<\/h3>\n
    It may feel overwhelming to write code if you do not have much experience doing that. But for an elegant Sankey diagram, some very simple basic code is more than enough.<\/p>\n
    Before anything else, add the anychart.onDocumentReady()<\/code> function enclosing all the code, which ensures that everything in it will only run once the page is ready. The first thing to add inside is the data.<\/p>\n
    anychart.onDocumentReady(function () {\r\n\r\n  \/\/ add data\r\n  const data = [\r\n    {from: 'First Class', to: 'Child', value: 6},\r\n    {from: 'Second Class', to: 'Child', value: 24},\r\n    {from: 'Third Class', to: 'Child', value: 79},\r\n    {from: 'Crew', to: 'Child', value: 0},\r\n    {from: 'First Class', to: 'Adult', value: 319},\r\n    {from: 'Second Class', to: 'Adult', value: 261},\r\n    {from: 'Third Class', to: 'Adult', value: 627},\r\n    {from: 'Crew', to: 'Adult', value: 885},\r\n    {from: 'Child', to: 'Female', value: 45},\r\n    {from: 'Child', to: 'Male', value: 64},\r\n    {from: 'Adult', to: 'Female', value: 425},\r\n    {from: 'Adult', to: 'Male', value: 1667},\r\n    {from: 'Female', to: 'Survived', value: 344},\r\n    {from: 'Female', to: 'Perished', value: 126},\r\n    {from: 'Male', to: 'Survived', value: 367},\r\n    {from: 'Male', to: 'Perished', value: 1364},\r\n  ]\r\n\r\n  \/\/ everything else goes here\r\n\t\r\n});<\/code><\/pre>\n
    Now, create a Sankey diagram instance using the built-in charting function and load the data.<\/p>\n
    let chart = anychart.sankey();\r\nchart.data(data);<\/code><\/pre>\n
    A bit of padding will make sure labels do not get cut off, and a chart title is always helpful.<\/p>\n
    chart.padding(20, 40);  \r\nchart.title('Titanic Survivors');<\/code><\/pre>\n
    Lastly, just reference the container element to show where the Sankey chart needs to be displayed and draw the resulting visualization.<\/p>\n
    chart.container('container');\r\nchart.draw();<\/code><\/pre>\n
    Voil\u00e0! A fantastic and functional JavaScript-based Sankey diagram is all ready!<\/p>\n
    \"A<\/a><\/p>\n
    Take a look at this initial JS Sankey chart on AnyChart Playground<\/a> with the full JS\/CSS\/HTML code (also provided below for your convenience).<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sankey Diagram<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-sankey.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0anychart.onDocumentReady(function () {\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ add data\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const data = [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"First Class\", to: \"Child\", value: 6},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Second Class\", to: \"Child\", value: 24},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Third Class\", to: \"Child\", value: 79},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Crew\", to: \"Child\", value: 0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"First Class\", to: \"Adult\", value: 319},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Second Class\", to: \"Adult\", value: 261},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Third Class\", to: \"Adult\", value: 627},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Crew\", to: \"Adult\", value: 885},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Child\", to: \"Female\", value: 45},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Child\", to: \"Male\", value: 64},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Adult\", to: \"Female\", value: 425},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Adult\", to: \"Male\", value: 1667},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Female\", to: \"Survived\", value: 344},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Female\", to: \"Perished\", value: 126},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Male\", to: \"Survived\", value: 367},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Male\", to: \"Perished\", value: 1364}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0];\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a sankey diagram instance\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let chart = anychart.sankey();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ load the data to the sankey diagram instance\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.data(data);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the chart's padding\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.padding(20, 40);\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ add a title\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.title('Titanic Survivors');\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the chart container id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.container(\"container\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ draw the chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.draw();\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    Customizing JavaScript Sankey Diagram<\/h2>\n
    A huge advantage of using a robust JS charting library is the ease with which the initial data visualization is created and the flexibility for further customizations. Let\u2019s see how you can enhance the Sankey diagram\u2019s capabilities and tweak its appearance with some simple modifications.<\/p>\n
    1. Color Palette<\/h3>\n
    To start with, why don\u2019t you add colors that look more intuitive than the default ones? You can create your own color palette by simply listing the colors that you want. Be careful about the sequence when you add the colors.<\/p>\n
    chart.palette([\r\n  \"#f5dc50\",\r\n  \"#e1a03c\",\r\n  \"#c87d5a\",\r\n  \"#fff0c8\",\r\n  \"#aa96b4\",\r\n  \"#6e5a7d\",\r\n  \"#e19196\",\r\n  \"#419bd2\",\r\n  \"#46afaa\",\r\n  \"#5a5050\"\r\n]);<\/code><\/pre>\n
    2. Nodes<\/h3>\n
    Now that you have got a personalized color palette, let\u2019s increase the width of the nodes to make them more prominent. With larger nodes, you can also make greater padding between them.<\/p>\n
    chart.nodeWidth(\"40%\");\r\nchart.nodePadding(30);<\/code><\/pre>\n
    Larger labels will likely look better as well. Plus, for each node, you can display the corresponding values from the data and make use of HTML to format the text.<\/p>\n
    chart.node().normal().labels().fontSize(14);\r\nchart.node().labels().useHtml(true);\r\nchart\r\n  .node()\r\n  .labels()\r\n  .format(\"<span style='font-weight:bold'>{%name}<\/span><br>{%value}\");<\/code><\/pre>\n
    \"A<\/a><\/p>\n
    Take a look at the code for this customized JavaScript-based Sankey diagram on AnyChart Playground<\/a>.<\/p>\n
    3. Links<\/h3>\n
    Now it\u2019s time to enhance the look of the links. Let\u2019s color them with the same shades as their source nodes. In addition, the links can appear slightly darker when they are hovered over with the mouse.<\/p>\n
    chart.flow({\r\n  normal: {\r\n    fill: function () {\r\n      return anychart.color.lighten(this.sourceColor, 0.5) + \" \" + 0.3;\r\n    }\r\n  },\r\n  hovered: {\r\n    fill: function () {\r\n      return this.sourceColor + \" \" + 0.8;\r\n    }\r\n  }\r\n});<\/code><\/pre>\n
    Hovering over a node or a link triggers a tooltip that does not even need changes as it is very informative and looks pretty fine by default.<\/p>\n
    4. Title<\/h3>\n
    For the final customization, let\u2019s apply HTML-based formatting to make the title stand out and add a subtitle shedding more light on exactly what the Sankey diagram visualizes.<\/p>\n
    chart\r\n\u00a0\u00a0.title()\r\n\u00a0\u00a0.enabled(true)\r\n\u00a0\u00a0.useHtml(true)\r\n\u00a0\u00a0.text(\r\n\u00a0\u00a0\u00a0\u00a0'<span style = \"color: #2b2b2b; font-size:20px;\">Titanic Survivors<\/span>' +\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<br\/><span style=\"color:#00bfa5; font-size: 16px;\">(by gender, age, ticket class)<\/span>'\r\n\u00a0\u00a0);<\/code><\/pre>\n
    That\u2019s all! Now the Sankey diagram is looking so very personalized and engaging, isn\u2019t it?<\/p>\n
    \"The<\/a><\/p>\n
    Check out the final code for the interactive JavaScript Sankey diagram below and have fun playing with it further on AnyChart Playground<\/a>.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sankey Diagram<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-sankey.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0anychart.onDocumentReady(function () {\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ add data\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const data = [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"First Class\", to: \"Child\", value: 6},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Second Class\", to: \"Child\", value: 24},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Third Class\", to: \"Child\", value: 79},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Crew\", to: \"Child\", value: 0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"First Class\", to: \"Adult\", value: 319},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Second Class\", to: \"Adult\", value: 261},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Third Class\", to: \"Adult\", value: 627},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Crew\", to: \"Adult\", value: 885},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Child\", to: \"Female\", value: 45},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Child\", to: \"Male\", value: 64},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Adult\", to: \"Female\", value: 425},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Adult\", to: \"Male\", value: 1667},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Female\", to: \"Survived\", value: 344},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Female\", to: \"Perished\", value: 126},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Male\", to: \"Survived\", value: 367},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{from: \"Male\", to: \"Perished\", value: 1364}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0];\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a sankey diagram instance\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let chart = anychart.sankey();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ load the data to the sankey diagram instance\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.data(data);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the chart's padding\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.padding(20, 40);\r\n\r\n      \u00a0\u00a0\/\/ configure a custom color palette\r\n      \u00a0\u00a0chart.palette([\r\n      \u00a0\u00a0\u00a0\u00a0\"#f5dc50\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#e1a03c\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#c87d5a\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#fff0c8\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#aa96b4\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#6e5a7d\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#e19196\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#419bd2\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#46afaa\",\r\n      \u00a0\u00a0\u00a0\u00a0\"#5a5050\"\r\n      \u00a0\u00a0]);\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ customize the nodes:\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the width\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.nodeWidth(\"40%\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the padding\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.nodePadding(30);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ customize the labels\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.node().normal().labels().fontSize(14);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.node().labels().useHtml(true);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.node()\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.labels()\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.format(\"<span style='font-weight:bold'>{%name}<\/span><br>{%value}\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ customize the links\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.flow({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0normal: {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fill: function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return anychart.color.lighten(this.sourceColor, 0.5) + \" \" + 0.3;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0hovered: {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fill: function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.sourceColor + \" \" + 0.8;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ add a title and customize it\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.title()\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.enabled(true)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.useHtml(true)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.text(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<span style = \"color: #2b2b2b; font-size:20px;\">Titanic Survivors<\/span>' +\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'<br\/><span style=\"color:#00bfa5; font-size: 16px;\">(by gender, age, ticket class)<\/span>'\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set the chart container id\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.container(\"container\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ draw the chart\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chart.draw();\r\n  \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    Conclusion<\/h2>\n
    Sankey is such a fascinating chart type. And creating a beautiful one is so very easy!<\/p>\n
    Actually, this is just the tip of the iceberg, so go on and take a look at more examples of Sankey diagrams<\/a> and see the Sankey chart documentation<\/a> to learn how to do something else about them. Also, feel free to check out other chart types<\/a>.<\/p>\n
    Please get in touch with any queries or suggestions.<\/p>\n
    \n
    The team of AnyChart thanks data designer Shachee Swadia for creating this great Sankey diagramming tutorial.<\/em><\/p>\n
    If you want to write a cool guest post, please send your ideas to our Support Team<\/a>.<\/em><\/p>\n
    Check out more JavaScript charting tutorials<\/a> on our blog.<\/em><\/p>\n
    \n