Skip to content

Instantly share code, notes, and snippets.

@NPashaP

NPashaP/.block

Last active June 22, 2018 20:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save NPashaP/2d76492981106691cdcf843d7e3f765a to your computer and use it in GitHub Desktop.
Save NPashaP/2d76492981106691cdcf843d7e3f765a to your computer and use it in GitHub Desktop.
Download ZIP
Comparison to d3.chord
Raw
.block
license: gpl-3.0
Raw
readme.md

Compare this to the d3.chord example

  • Chords from any given group are non intersecting in viz.ch(). The chord layout is created to minimize chord intersections thus reducing cluttering.
  • viz.ch() uses a custom arc function so that two arcs starting from same point are non intersecting.
  • Instead of using value/source/target to color each chord, viz.ch() splits each chord between any two groups into two chords and are colored using the respective target colors. This way one is able to quickly see the breakdown of each group from its arc.

For other options/examples, see VizJS

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
svg text{
text-anchor:middle;
font-size:18px;
}
svg .values text{
pointer-events:none;
stroke-width: 0.5px;
}
.groups:hover{
cursor:pointer;
font-weight:bold;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://vizjs.org/viz.v1.1.2.min.js"></script>
<script>
var width=960, height=960
,outerRadius = Math.min(width, height) * 0.5 - 40
,innerRadius = outerRadius - 30;
var m = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
];
//turn matrix into table
var data=[];
m.forEach(function(r,i){ r.forEach(function(c,j){ data.push([i,j,c])})});
var colors = ["#000000", "#FFDD89", "#957244", "#F26223"];
var ch = viz.ch().data(data).padding(.05)
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.label(function(d){ return ""})
.startAngle(1.5*Math.PI)
.fill(function(d){ return colors[d];});
var svg = d3.select("body").append("svg").attr("height",height).attr("width",width);
svg.append("g").attr("transform", "translate("+width/2+","+height/2+")").call(ch);
// adjust height of frame in bl.ocks.org
d3.select(self.frameElement).style("height", height+"px").style("width", width+"px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment