ChordDiagram

Chord Diagram

This is the chord diagram dex.js coordinates visualization of US Presidents and their Home State and Party affiliations.

References

dex.js The main site

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body, #Chart {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }

#Chart {
            display: inline-block;
        }

</style>
    <title>Chord Diagram</title>

</head>
<body>

$(document).ready(function () {
      $('body').layout({
        applyDemoStyles: false,
        west: {
          size: 335
        },
        onresize: function () {
          chart.resize();
        }
      });

var chart = dex.charts.d3.Chord({
          'parent': '#Chart',
          'csv': presidents
        }
      );
      chart.render();

var configPane = dex.ui.ConfigurationPane({
        "parent": "#ConfigurationPane",
        "csv": presidents,
        "components": [chart]
      }).render();
    });
  });
</script>
</body>
</html>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js to https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://dexjs.net/js/dex-jquery.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://dexjs.net/js/dex-bootstrap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://dexjs.net/js/dex-libs.js

https://dexjs.net/js/dex.js

https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js