JSFiddle - React, Tailwind, and code Playground

by boinky

HTML

<!DOCTYPE html>
<html>
  <head>

    <meta property="og:image" content="./chords.png" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>d3.js ~ Chord Diagram</title>
<script src="http://vcabeli.github.io/data.js" >"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
  </head>

  <body>
      
    <section id="introduction">
      <h1 id='chord_diagram'>Chord Diagram</h1>
      <p> This is a demonstration of D3's interactivity and all-around good-lookingness. <br>
	The data is extracted from <a target="_blank" href="http://www.explainxkcd.com/wiki/index.php/Main_Page">explain xkcd</a>, an unofficial wiki of <a target="_blank" href="http://www.xkcd.com">xkcd</a> , <i> a webcomic about romance, sarcasm, math, and language</i>. <br>
	We propose this interactive chord diagram for you to check whether this tagline is entirely accurate. <br>
	<br>
	You can find all the <b>categories</b> for which there is data on the <b>left</b>. Clicking a button will add this category to the graph on the right.<br>
	<b>Search</b> for a category with the <b>text box</b>.<br>
	Click on one of the <b>outer arcs to remove</b> the corresponding category. <br>
	<b>Hover</b> over arcs and chords for data. <br>
	You can also switch colors and reorder the chords to your liking.
      </p>
    </section>

    <section id="chart">
      
      <div id="controls">

	  <div id="form" style="margin:20px; text-align:center;">
	    Enter a category name (case sensitive): 
	    <form name="addCategoryInput" onsubmit="addCategoryFromInput(); return false;" >
	      <input type="text" name="input" value="Science" /> 
	      <input type="button" value="Add" onClick="addCategoryFromInput()" />
	    </form>
	  </div>

	<div id="all-buttons">
	  <div class="buttons-scroller">
	    <div class="buttons-group" id="years-class">
	      YEARS
	    </div>

	    <div class="buttons-group" id="month-class">
	      MONTHS
	    </div>	  

	    <div class="buttons-group"...

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(matrix)
    .padAngle(.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.

//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.arc().innerRadius(r0).outerRadius(r1)

// 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.scaleOrdinal(d3.schemeCategory20);

// 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", function(d) { return...