JSFiddle - React, Tailwind, and code Playground

by boinky

HTML

<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

</body>
</html>

JavaScript

// From http://mkweb.bcgsc.ca/circos/guide/tables/
// and http://exposedata.com/tutorial/chord/latest.html


//Nom des categories sur le graph actuellement
var catnames = 	 
    [	"Romance",
	"Computers",
	"Internet",
	"Sarcasm",
	"Math",
	"Language",
	"Statistics",
	"Wikipedia",
	"Cueball",
	"Megan",
	"Beret Guy",
    ];

var matrix = buildMatrix(catnames);
var real_numbers = getRealNumbers(catnames);


var chord = d3.chord()
    .padding(.03)
    .sortSubgroups(d3.ascending)
//matrice "d'adjacence" chaque case est le nombre de comics de la categorie ligne 
//qui est aussi dans la categorie colonne. La diagonale est le nombre de 
//comics qui ne se trouve dans aucune autre categorie.
    .matrix(matrix);

//largeur et hauteur du svg
var w = 1000,
    h = 1000,
// diametre du cercle
    r0 = Math.min(w, h) * .35,
// diametre des arcs de cercle des categories 
    r1 = r0 * 1.1;


var arc_svg = d3.svg.arc().innerRadius(r0).outerRadius(r1)
var chord_svg = d3.svg.chord().radius(r0);

// les cordes ont la couleur du groupe source
var coloring = 'source';

var comp = {
    source:  function(a, b) { return a.value >= b.value ? a : b },
    target: function(a, b) { return a.value < b.value ? a : b }
};

var chords_sort = d3.ascending;


// couleurs
var fill = d3.scale.category20c();

// Cree l'objet chart
var svg = d3.select("#chart")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
    .attr("id", "circle");

// cercle de zone d'inaction de la souris
svg.append("circle")
    .attr("r", r1);

// Cree les arcs de cercle a l'exterieur
g = svg.append("svg:g")
    .attr("class", "groups")
    .selectAll("path")
// recupere les infos de la matrice d'adjacence
    .data(chord.groups);

g.enter().append("svg:path")
    .attr("class", "arc")
// colorie selon l'index du group (avec fonction fill)
    .style("fill", function(d) { return fill(d.index); })
    .style("stroke",...