JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://projects.delimited.io/experiments/chord-diagrams/js/mapper.js"></script>
<div id="htmlwidget_container">
  <div id="htmlwidget-9538-tooltip" class="tooltip"></div>
  <div id="htmlwidget-9538" style="width:100%;height:500px;" class="d3chord" width="100%" height="500"></div>
</div>

CSS

.tooltip {
  color: white;
  opacity: .9;
  background: #333;
  padding: 5px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  position: absolute;
  z-index: 10;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}
#circle circle {
  fill: none;
  pointer-events: all;
}
path.group {
  fill-opacity: .8;
}
path.chord {
  fill-opacity: .8;
  stroke: #000;
  stroke-width: .25px;
}
#circle:hover path.fade {
  display: none;
}

JavaScript

var payload = {
    data: [{"has":"black","prefers":"red","count":2868},{"has":"blonde","prefers":"brown","count":2060},{"has":"brown","prefers":"blonde","count":16145},{"has":"red","prefers":"black","count":1013},{"has":"black","prefers":"brown","count":8916},{"has":"blonde","prefers":"blonde","count":10048},{"has":"brown","prefers":"black","count":8010},{"has":"red","prefers":"red","count":6907},{"has":"black","prefers":"blonde","count":5871},{"has":"blonde","prefers":"black","count":1951},{"has":"brown","prefers":"red","count":8045},{"has":"red","prefers":"brown","count":940},{"has":"black","prefers":"black","count":11975},{"has":"blonde","prefers":"red","count":6171},{"has":"brown","prefers":"brown","count":8090},{"has":"red","prefers":"blonde","count":990}],
"from": "has", "to": "prefers","count": "count","colors": [ "#000000", "#FFDD89", "#957244", "#F26223" ]     
}


var element = document.getElementById("htmlwidget-9538")
makePlot(element, payload)

function makePlot(el, data){
  if (data.colors){
    el.colors = data.colors
  }
  var mpr = chordMpr(data.data);
  mpr
    .addValuesToMap(data.from)
    .setFilter(function (row, a, b) {
      return (row[data.from] === a.name && row[data.to] === b.name)
     })
    .setAccessor(data.accessor || defaultAccessor(data.count || 'count'));
    drawChords(el, mpr.getMatrix(), mpr.getMap());
}

function defaultAccessor(count){
  return function(recs, a, b){
    if (!recs[0]) return 0;
    return +recs[0][count];
  }
}
function drawChords (el, matrix, mmap) {
  var w = 980, h = 800, r1 = h / 2, r0 = r1 - 100;

  var pal = el.colors || d3.scale.category10().range()
  console.log(pal)
  var ncols = d3.keys(mmap).length
  var fill = d3.scale.ordinal()
      .domain(d3.range(ncols))
      .range(pal.slice(0, ncols));

  var chord = d3.layout.chord()
    .padding(.02)
    .sortSubgroups(d3.descending)
    .sortChords(d3.descending);

  var arc = d3.svg.arc()
    .innerRadius(r0)
    .outerRadius(r0 + 20);

  var svg =...