Sankey Chart

A Sankey Diagram is a visualisation technique that allows to display flows. Several entities (nodes) are represented by rectangles or text. Their links are represented with arrows or arcs that have a width proportional to the importance of the flow. Note that an Alluvial diagram is a sub category of Sankey diagrams where nodes are grouped in vertical nodes (sometimes called steps).


Example Color Themes

Example Fonts

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa


Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Age" : ["Child","Child","Child","Child","Child","Child","Child","Child","Adult","Adult","Adult","Adult","Adult","Adult","Adult","Adult","Child","Child","Child","Child","Child","Child","Child","Child","Adult","Adult","Adult","Adult","Adult","Adult","Adult","Adult"],
        "Class" : ["1st","2nd","3rd","Crew","1st","2nd","3rd","Crew","1st","2nd","3rd","Crew","1st","2nd","3rd","Crew","1st","2nd","3rd","Crew","1st","2nd","3rd","Crew","1st","2nd","3rd","Crew","1st","2nd","3rd","Crew"],
        "Sex" : ["Male","Male","Male","Male","Female","Female","Female","Female","Male","Male","Male","Male","Female","Female","Female","Female","Male","Male","Male","Male","Female","Female","Female","Female","Male","Male","Male","Male","Female","Female","Female","Female"],
        "Survived" : ["No","No","No","No","No","No","No","No","No","No","No","No","No","No","No","No","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes","Yes"]
     },
     "y" : {
        "data" : [
          [0,0,35,0,0,0,17,0,118,154,387,670,4,13,89,3,5,11,13,0,1,13,14,0,57,14,75,192,140,80,76,20]
        ],
        "smps" : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32"],
        "vars" : ["Freq"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "colorBy":"Survived",
     "colorScheme":"GGPlot",
     "graphOrientation":"horizontal",
     "graphType":"Sankey",
     "sankeyAxes":[
        "Class",
        "Sex",
        "Age",
        "Survived"
     ],
     "scheme":"GGPlot",
     "title":"Alluvial Plot"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-titanicR-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-titanicR-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  colorBy="Survived",
  colorScheme="GGPlot",
  graphOrientation="horizontal",
  graphType="Sankey",
  sankeyAxes=list("Class", "Sex", "Age", "Survived"),
  scheme="GGPlot",
  title="Alluvial Plot"
)
⇧