Chord Chart

Chord diagrams allow to visualize flows or connections between several entities (nodes). Each entity is represented by a fragment on the outer part of the circular layout. Then, arcs are drawn between each entities. The size of the arc is proportional to the importance of the flow Chord diagrams are eye catching and quite popular in data visualization. Their main downside is that they becom quickly cluttered and unreadable. Hierarchical edge bundling is a really close type of graphic that allows to avoid this issue.


Example Color Themes

Example Fonts



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 = {
     "y" : {
        "data" : [
          [11975,5871,8916,2868],
          [1951,10048,2060,6171],
          [8010,16145,8090,8045],
          [1013,990,940,6907]
        ],
        "smps" : ["A","B","C","D"],
        "vars" : ["A","B","C","D"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "circularArc":"360",
     "circularRotate":"0",
     "circularType":"chord",
     "colors":[
        "#000000",
        "#FFDD89",
        "#957244",
        "#F26223"
     ],
     "graphType":"Circular",
     "higlightGreyOut":"true",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "objectBorderColor":"rgb(0,0,0)",
     "rAxisTickFormat":[
        "%sK",
        " / 1000"
     ],
     "showTransition":"false",
     "title":"Simple Chord Graph",
     "transitionStep":"50",
     "transitionTime":"1500"
  }
  

  <!-- 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-chord-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  circularArc=360,
  circularRotate=0,
  circularType="chord",
  colors=list("#000000", "#FFDD89", "#957244", "#F26223"),
  graphType="Circular",
  higlightGreyOut=TRUE,
  legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
  legendKeyBackgroundColor="rgba(255,255,255,0)",
  objectBorderColor="rgb(0,0,0)",
  rAxisTickFormat=list("%sK", " / 1000"),
  showTransition=FALSE,
  title="Simple Chord Graph",
  transitionStep=50,
  transitionTime=1500
)