Chord Diagram Art

Using Chord Layout with one-hot coding square matrix

by angjelinhila

HTML

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<style>
#my_dataviz {        width: 100vw;        height: 100vh;        display: flex;        align-items: center;    }

</style>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<script>

// create the svg area
var svg = d3.select("#my_dataviz")
  .append("svg").attr("viewBox", `0 0 1000 900`)
    .attr("width", 900)
    .attr("height", 1000)
  .append("g")
  .style('transform', 'translate(50%, 50%)')
   // .attr("transform", "translate(" + width / 2 +" , " + height / 2 + ")");

// create a matrix
var matrix = [
 
[1,0,1,1,1,1,0,1,0,1,0,0,1,0,0,1,0,1,0,0],
[0,0,1,1,1,0,1,0,1,0,1,1,1,1,0,1,1,1,0,1],
[0,0,0,1,0,0,0,0,0,1,1,1,0,0,1,1,1,1,0,0],
[0,0,1,1,0,0,0,1,0,1,0,0,1,0,0,0,1,1,0,1],
[1,0,1,1,0,0,0,0,0,1,0,0,1,1,1,0,1,0,0,1],
[0,0,0,1,0,1,1,0,0,1,1,0,1,1,0,1,1,0,1,1],
[1,0,0,1,0,1,0,1,1,1,1,0,1,1,1,0,0,0,0,1],
[0,1,0,0,1,1,0,1,1,0,1,0,1,0,0,0,0,1,0,0],
[1,0,0,0,1,1,1,1,0,0,0,1,0,1,1,0,0,1,1,1],
[1,1,0,1,0,1,1,0,0,1,0,0,0,1,1,0,1,1,0,0],
[1,1,1,0,1,0,1,0,0,0,0,0,0,0,1,0,0,0,1,1],
[1,0,1,1,1,0,1,1,0,1,0,1,1,1,1,0,0,0,1,1],
[0,0,1,0,0,0,1,0,0,0,0,1,1,1,0,1,0,1,0,1],
[1,1,1,0,1,1,0,0,1,0,0,1,0,1,0,0,1,1,1,1],
[0,1,0,0,1,1,1,0,1,0,1,1,0,1,0,1,1,1,0,1],
[1,1,0,1,1,0,0,1,1,1,1,1,1,0,0,0,1,1,0,0],
[1,0,0,0,0,1,1,0,1,0,0,1,1,1,0,1,1,0,1,0],
[0,1,0,0,0,1,1,1,1,0,1,0,0,1,1,1,1,1,0,0],
[0,1,0,1,1,1,1,0,1,1,0,0,1,0,1,1,1,1,0,0],
[1,1,0,0,0,1,0,0,1,1,0,0,1,1,1,1,0,0,1,1],

];

// 4 groups, so create a vector of 4 colors
var colors = [ "#21084D", "#D504C6", "#2D53BC", "#9ED343", "#D25EA0", "#18D5FE", "#D48ABD", "#FBF47E", "#41B7AA", "#8C05D0", "#FF3C0D", "#A51579", "#270B7E", "#709F4A", "#84D993", "#429DC5", "#F2E03B", "#0EF100", "#DAEF66", "#7032CF", "#0E313D", "#1B1F29", "#7831C5", "#3CDCE3", "#2CC88A", "#D014C1", "#48356A", "#DECA78", " #CECD83", "#844627", "#0F3549", "#83BDD0", "#11E899", "#381E24", "#C8F339", "#8DF0AB", "#B12DEE",...