Visualize Relationships with Chord Graphs

Chord graphs offer a compelling visualization method, particularly useful for representing relationships within complex datasets. Their circular layout and connecting chords effectively highlight the strength of connections between different data points, making intricate relationships easier to grasp than traditional methods. This visual clarity is beneficial across diverse fields including social network analysis, genomics, and financial modeling. Applications of chord graphs span various domains. They are frequently used to illustrate interactions within ecosystems, depicting energy flow or species relationships. In market analysis, they can show the interconnectedness of industries or companies. The versatility of chord graphs stems from their ability to clearly present multiple relationships simultaneously, offering a powerful tool for data exploration and communication.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

<html>

  <head>
    <!-- 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/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- 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>

      // Use a data frame (2D-array) for the graph
      var data = [
        [ "Id", "A", "B", "C", "D"],
        [ "A", 11975, 5871, 8916, 2868],
        [ "B", 1951, 10048, 2060, 6171],
        [ "C", 8010, 16145, 8090, 8045],
        [ "D", 1013, 990, 940, 6907 ]
      ];

      // 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
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      
    </script>

  </body>

</html>

<html>

  <head>
    <!-- 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/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- 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
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      
    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/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
)