d3:chord-2

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

JavaScript

const width = 440;
const height = 440;
const outerRadius = 210;
const innerRadius = 200;

// create the svg area
var svg = d3.select('body')
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", `translate(${width / 2}, ${height / 2})`)

// create input data: a square matrix that provides flow between entities
var matrix = [
  [11975, 5871, 8916, 2868],
  [21951, 1048, 2060, 6171],
  [8010, 16145, 8090, 8045],
  [1013, 11990, 940, 347]
];

// give this matrix to d3.chord(): it will calculates all the info we need to draw arc and ribbon
var res = d3.chord()
  .padAngle(0.05) // padding between entities (black arc)
  .sortSubgroups(d3.descending)
  (matrix)

const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius)

// add the groups on the inner part of the circle
svg
  .append("g")
  .selectAll("g")
  .data(res.groups)
  .enter()
  .append("g")
  .append("path")
  .style("fill", "grey")
  .style("stroke", "black")
  .attr("d", arc)


// Add the links between groups
svg
  .append("g")
  .selectAll("path")
  .data(res)
  .enter()
  .append("path")
  .attr("d", d3.ribbon()
    .radius(innerRadius)
  )
  .style("fill", "#69b3a2")
  .style("stroke", "black");