Skip to content

Instantly share code, notes, and snippets.

@jdutta

jdutta/_.md

Last active March 1, 2016 23:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jdutta/77ccea8aded40614d9c8 to your computer and use it in GitHub Desktop.
Save jdutta/77ccea8aded40614d9c8 to your computer and use it in GitHub Desktop.
Download ZIP
chord-test-2
Raw
_.md
Raw
chart_data.json
{
"directed": true,
"graph": [],
"nodes": [
{
"id": "InvalidLogin"
},
{
"id": "Change collaboration role"
},
{
"id": "Create"
},
{
"id": "Add"
},
{
"id": "Role"
},
{
"id": "Trash"
},
{
"id": "Storage expiration"
},
{
"id": "Authorization"
},
{
"id": "Preview"
},
{
"id": "Unsync"
},
{
"id": "Expire collaboration"
},
{
"id": "Logout"
},
{
"id": "Copy"
},
{
"id": "Edit"
},
{
"id": "Unshare"
},
{
"id": "Accept collaboration"
},
{
"id": "Upload"
},
{
"id": "Remove"
},
{
"id": "Remove collaborator"
},
{
"id": "Login"
},
{
"id": "Rename"
},
{
"id": "Expire sharing"
},
{
"id": "Lock"
},
{
"id": "Move"
},
{
"id": "Sync"
},
{
"id": "Unlock"
},
{
"id": "Document Scanning"
},
{
"id": "Invite collaborator"
},
{
"id": "Download"
}
],
"links": [
{
"source": 0,
"target": 19,
"weight": 4
},
{
"source": 0,
"target": 0,
"weight": 1
},
{
"source": 1,
"target": 1,
"weight": 1
},
{
"source": 1,
"target": 9,
"weight": 1
},
{
"source": 1,
"target": 23,
"weight": 1
},
{
"source": 1,
"target": 16,
"weight": 1
},
{
"source": 1,
"target": 18,
"weight": 1
},
{
"source": 1,
"target": 13,
"weight": 1
},
{
"source": 2,
"target": 20,
"weight": 17
},
{
"source": 2,
"target": 5,
"weight": 31
},
{
"source": 2,
"target": 21,
"weight": 3
},
{
"source": 2,
"target": 13,
"weight": 31
},
{
"source": 2,
"target": 14,
"weight": 12
},
{
"source": 2,
"target": 2,
"weight": 14
},
{
"source": 2,
"target": 16,
"weight": 2
},
{
"source": 2,
"target": 1,
"weight": 1
},
{
"source": 2,
"target": 11,
"weight": 2
},
{
"source": 2,
"target": 28,
"weight": 1
},
{
"source": 2,
"target": 19,
"weight": 5
},
{
"source": 2,
"target": 8,
"weight": 1
},
{
"source": 2,
"target": 7,
"weight": 3
},
{
"source": 3,
"target": 13,
"weight": 3
},
{
"source": 3,
"target": 16,
"weight": 1
},
{
"source": 3,
"target": 17,
"weight": 1
},
{
"source": 3,
"target": 3,
"weight": 3
},
{
"source": 3,
"target": 27,
"weight": 1
},
{
"source": 3,
"target": 28,
"weight": 1
},
{
"source": 4,
"target": 13,
"weight": 1
},
{
"source": 5,
"target": 20,
"weight": 1
},
{
"source": 5,
"target": 8,
"weight": 3
},
{
"source": 5,
"target": 21,
"weight": 1
},
{
"source": 5,
"target": 13,
"weight": 14
},
{
"source": 5,
"target": 14,
"weight": 8
},
{
"source": 5,
"target": 9,
"weight": 1
},
{
"source": 5,
"target": 24,
"weight": 1
},
{
"source": 5,
"target": 18,
"weight": 1
},
{
"source": 5,
"target": 16,
"weight": 7
},
{
"source": 5,
"target": 11,
"weight": 2
},
{
"source": 5,
"target": 27,
"weight": 2
},
{
"source": 5,
"target": 28,
"weight": 4
},
{
"source": 5,
"target": 19,
"weight": 2
},
{
"source": 5,
"target": 5,
"weight": 68
},
{
"source": 5,
"target": 2,
"weight": 35
},
{
"source": 5,
"target": 7,
"weight": 3
},
{
"source": 6,
"target": 5,
"weight": 1
},
{
"source": 6,
"target": 21,
"weight": 3
},
{
"source": 6,
"target": 16,
"weight": 5
},
{
"source": 6,
"target": 27,
"weight": 1
},
{
"source": 6,
"target": 28,
"weight": 1
},
{
"source": 6,
"target": 19,
"weight": 1
},
{
"source": 6,
"target": 8,
"weight": 4
},
{
"source": 6,
"target": 6,
"weight": 1
},
{
"source": 6,
"target": 7,
"weight": 1
},
{
"source": 7,
"target": 5,
"weight": 3
},
{
"source": 7,
"target": 13,
"weight": 8
},
{
"source": 7,
"target": 14,
"weight": 1
},
{
"source": 7,
"target": 2,
"weight": 2
},
{
"source": 7,
"target": 16,
"weight": 3
},
{
"source": 7,
"target": 3,
"weight": 1
},
{
"source": 7,
"target": 11,
"weight": 1
},
{
"source": 7,
"target": 26,
"weight": 1
},
{
"source": 7,
"target": 28,
"weight": 6
},
{
"source": 7,
"target": 19,
"weight": 8
},
{
"source": 7,
"target": 8,
"weight": 2
},
{
"source": 7,
"target": 7,
"weight": 10
},
{
"source": 8,
"target": 20,
"weight": 4
},
{
"source": 8,
"target": 5,
"weight": 5
},
{
"source": 8,
"target": 21,
"weight": 3
},
{
"source": 8,
"target": 13,
"weight": 13
},
{
"source": 8,
"target": 14,
"weight": 2
},
{
"source": 8,
"target": 2,
"weight": 4
},
{
"source": 8,
"target": 16,
"weight": 15
},
{
"source": 8,
"target": 18,
"weight": 1
},
{
"source": 8,
"target": 27,
"weight": 3
},
{
"source": 8,
"target": 28,
"weight": 33
},
{
"source": 8,
"target": 19,
"weight": 1
},
{
"source": 8,
"target": 8,
"weight": 68
},
{
"source": 8,
"target": 6,
"weight": 2
},
{
"source": 9,
"target": 1,
"weight": 2
},
{
"source": 9,
"target": 9,
"weight": 11
},
{
"source": 9,
"target": 23,
"weight": 16
},
{
"source": 9,
"target": 16,
"weight": 7
},
{
"source": 9,
"target": 18,
"weight": 11
},
{
"source": 9,
"target": 13,
"weight": 2
},
{
"source": 9,
"target": 27,
"weight": 1
},
{
"source": 9,
"target": 28,
"weight": 2
},
{
"source": 9,
"target": 19,
"weight": 1
},
{
"source": 9,
"target": 8,
"weight": 1
},
{
"source": 10,
"target": 3,
"weight": 1
},
{
"source": 10,
"target": 18,
"weight": 1
},
{
"source": 11,
"target": 20,
"weight": 1
},
{
"source": 11,
"target": 5,
"weight": 2
},
{
"source": 11,
"target": 13,
"weight": 3
},
{
"source": 11,
"target": 14,
"weight": 1
},
{
"source": 11,
"target": 16,
"weight": 1
},
{
"source": 11,
"target": 19,
"weight": 1
},
{
"source": 11,
"target": 8,
"weight": 1
},
{
"source": 11,
"target": 7,
"weight": 2
},
{
"source": 12,
"target": 28,
"weight": 2
},
{
"source": 12,
"target": 16,
"weight": 2
},
{
"source": 13,
"target": 1,
"weight": 1
},
{
"source": 13,
"target": 2,
"weight": 20
},
{
"source": 13,
"target": 3,
"weight": 3
},
{
"source": 13,
"target": 4,
"weight": 1
},
{
"source": 13,
"target": 5,
"weight": 22
},
{
"source": 13,
"target": 6,
"weight": 1
},
{
"source": 13,
"target": 7,
"weight": 8
},
{
"source": 13,
"target": 8,
"weight": 20
},
{
"source": 13,
"target": 9,
"weight": 1
},
{
"source": 13,
"target": 13,
"weight": 422
},
{
"source": 13,
"target": 14,
"weight": 4
},
{
"source": 13,
"target": 16,
"weight": 47
},
{
"source": 13,
"target": 17,
"weight": 1
},
{
"source": 13,
"target": 18,
"weight": 2
},
{
"source": 13,
"target": 19,
"weight": 12
},
{
"source": 13,
"target": 20,
"weight": 23
},
{
"source": 13,
"target": 21,
"weight": 3
},
{
"source": 13,
"target": 23,
"weight": 1
},
{
"source": 13,
"target": 24,
"weight": 6
},
{
"source": 13,
"target": 26,
"weight": 6
},
{
"source": 13,
"target": 27,
"weight": 7
},
{
"source": 13,
"target": 28,
"weight": 23
},
{
"source": 14,
"target": 5,
"weight": 8
},
{
"source": 14,
"target": 13,
"weight": 1
},
{
"source": 14,
"target": 14,
"weight": 11
},
{
"source": 14,
"target": 2,
"weight": 19
},
{
"source": 14,
"target": 19,
"weight": 1
},
{
"source": 14,
"target": 8,
"weight": 2
},
{
"source": 15,
"target": 2,
"weight": 1
},
{
"source": 15,
"target": 15,
"weight": 4
},
{
"source": 15,
"target": 0,
"weight": 1
},
{
"source": 16,
"target": 20,
"weight": 23
},
{
"source": 16,
"target": 12,
"weight": 3
},
{
"source": 16,
"target": 21,
"weight": 2
},
{
"source": 16,
"target": 13,
"weight": 32
},
{
"source": 16,
"target": 22,
"weight": 1
},
{
"source": 16,
"target": 9,
"weight": 8
},
{
"source": 16,
"target": 23,
"weight": 13
},
{
"source": 16,
"target": 24,
"weight": 11
},
{
"source": 16,
"target": 16,
"weight": 1144
},
{
"source": 16,
"target": 17,
"weight": 1
},
{
"source": 16,
"target": 18,
"weight": 1
},
{
"source": 16,
"target": 11,
"weight": 2
},
{
"source": 16,
"target": 27,
"weight": 63
},
{
"source": 16,
"target": 28,
"weight": 101
},
{
"source": 16,
"target": 15,
"weight": 1
},
{
"source": 16,
"target": 19,
"weight": 5
},
{
"source": 16,
"target": 8,
"weight": 23
},
{
"source": 16,
"target": 6,
"weight": 7
},
{
"source": 16,
"target": 2,
"weight": 5
},
{
"source": 16,
"target": 7,
"weight": 3
},
{
"source": 17,
"target": 20,
"weight": 1
},
{
"source": 17,
"target": 13,
"weight": 1
},
{
"source": 17,
"target": 16,
"weight": 1
},
{
"source": 17,
"target": 17,
"weight": 1
},
{
"source": 17,
"target": 27,
"weight": 1
},
{
"source": 17,
"target": 19,
"weight": 1
},
{
"source": 17,
"target": 7,
"weight": 1
},
{
"source": 18,
"target": 8,
"weight": 1
},
{
"source": 18,
"target": 0,
"weight": 1
},
{
"source": 18,
"target": 13,
"weight": 1
},
{
"source": 18,
"target": 9,
"weight": 11
},
{
"source": 18,
"target": 23,
"weight": 2
},
{
"source": 18,
"target": 16,
"weight": 1
},
{
"source": 18,
"target": 10,
"weight": 1
},
{
"source": 18,
"target": 24,
"weight": 1
},
{
"source": 18,
"target": 27,
"weight": 2
},
{
"source": 18,
"target": 28,
"weight": 1
},
{
"source": 18,
"target": 18,
"weight": 94
},
{
"source": 18,
"target": 2,
"weight": 1
},
{
"source": 19,
"target": 8,
"weight": 1
},
{
"source": 19,
"target": 21,
"weight": 1
},
{
"source": 19,
"target": 13,
"weight": 8
},
{
"source": 19,
"target": 14,
"weight": 1
},
{
"source": 19,
"target": 2,
"weight": 7
},
{
"source": 19,
"target": 16,
"weight": 17
},
{
"source": 19,
"target": 17,
"weight": 2
},
{
"source": 19,
"target": 3,
"weight": 2
},
{
"source": 19,
"target": 11,
"weight": 3
},
{
"source": 19,
"target": 27,
"weight": 2
},
{
"source": 19,
"target": 28,
"weight": 5
},
{
"source": 19,
"target": 19,
"weight": 9
},
{
"source": 19,
"target": 5,
"weight": 1
},
{
"source": 19,
"target": 6,
"weight": 1
},
{
"source": 19,
"target": 7,
"weight": 8
},
{
"source": 20,
"target": 20,
"weight": 4
},
{
"source": 20,
"target": 8,
"weight": 1
},
{
"source": 20,
"target": 21,
"weight": 2
},
{
"source": 20,
"target": 13,
"weight": 38
},
{
"source": 20,
"target": 2,
"weight": 2
},
{
"source": 20,
"target": 23,
"weight": 1
},
{
"source": 20,
"target": 16,
"weight": 16
},
{
"source": 20,
"target": 27,
"weight": 7
},
{
"source": 20,
"target": 28,
"weight": 6
},
{
"source": 20,
"target": 5,
"weight": 2
},
{
"source": 21,
"target": 21,
"weight": 4
},
{
"source": 21,
"target": 13,
"weight": 3
},
{
"source": 21,
"target": 14,
"weight": 1
},
{
"source": 21,
"target": 2,
"weight": 1
},
{
"source": 21,
"target": 16,
"weight": 3
},
{
"source": 21,
"target": 18,
"weight": 1
},
{
"source": 21,
"target": 19,
"weight": 3
},
{
"source": 21,
"target": 8,
"weight": 2
},
{
"source": 21,
"target": 6,
"weight": 4
},
{
"source": 21,
"target": 7,
"weight": 1
},
{
"source": 22,
"target": 25,
"weight": 2
},
{
"source": 23,
"target": 1,
"weight": 1
},
{
"source": 23,
"target": 9,
"weight": 15
},
{
"source": 23,
"target": 23,
"weight": 33
},
{
"source": 23,
"target": 16,
"weight": 15
},
{
"source": 23,
"target": 24,
"weight": 1
},
{
"source": 23,
"target": 13,
"weight": 2
},
{
"source": 23,
"target": 28,
"weight": 2
},
{
"source": 23,
"target": 18,
"weight": 1
},
{
"source": 24,
"target": 20,
"weight": 1
},
{
"source": 24,
"target": 13,
"weight": 1
},
{
"source": 24,
"target": 9,
"weight": 4
},
{
"source": 24,
"target": 16,
"weight": 12
},
{
"source": 24,
"target": 24,
"weight": 2
},
{
"source": 24,
"target": 27,
"weight": 1
},
{
"source": 24,
"target": 28,
"weight": 2
},
{
"source": 24,
"target": 19,
"weight": 1
},
{
"source": 25,
"target": 22,
"weight": 1
},
{
"source": 25,
"target": 16,
"weight": 1
},
{
"source": 26,
"target": 13,
"weight": 5
},
{
"source": 26,
"target": 2,
"weight": 1
},
{
"source": 26,
"target": 26,
"weight": 5
},
{
"source": 26,
"target": 16,
"weight": 1
},
{
"source": 27,
"target": 20,
"weight": 2
},
{
"source": 27,
"target": 5,
"weight": 2
},
{
"source": 27,
"target": 2,
"weight": 4
},
{
"source": 27,
"target": 13,
"weight": 14
},
{
"source": 27,
"target": 9,
"weight": 2
},
{
"source": 27,
"target": 23,
"weight": 1
},
{
"source": 27,
"target": 16,
"weight": 37
},
{
"source": 27,
"target": 17,
"weight": 1
},
{
"source": 27,
"target": 18,
"weight": 2
},
{
"source": 27,
"target": 27,
"weight": 95
},
{
"source": 27,
"target": 28,
"weight": 12
},
{
"source": 27,
"target": 15,
"weight": 1
},
{
"source": 27,
"target": 8,
"weight": 8
},
{
"source": 27,
"target": 6,
"weight": 2
},
{
"source": 27,
"target": 19,
"weight": 4
},
{
"source": 27,
"target": 7,
"weight": 2
},
{
"source": 28,
"target": 20,
"weight": 2
},
{
"source": 28,
"target": 5,
"weight": 8
},
{
"source": 28,
"target": 0,
"weight": 2
},
{
"source": 28,
"target": 21,
"weight": 1
},
{
"source": 28,
"target": 13,
"weight": 30
},
{
"source": 28,
"target": 14,
"weight": 1
},
{
"source": 28,
"target": 2,
"weight": 7
},
{
"source": 28,
"target": 23,
"weight": 2
},
{
"source": 28,
"target": 24,
"weight": 2
},
{
"source": 28,
"target": 18,
"weight": 1
},
{
"source": 28,
"target": 16,
"weight": 110
},
{
"source": 28,
"target": 11,
"weight": 2
},
{
"source": 28,
"target": 27,
"weight": 3
},
{
"source": 28,
"target": 28,
"weight": 405
},
{
"source": 28,
"target": 19,
"weight": 9
},
{
"source": 28,
"target": 8,
"weight": 16
},
{
"source": 28,
"target": 12,
"weight": 1
},
{
"source": 28,
"target": 7,
"weight": 4
}
],
"multigraph": false
}
Raw
config.json
{"description":"chord-test-2","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"s_action.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"c_ip.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/JBlhy2f.gif"}
Raw
inlet.js
// Testing of d3.chord
// Reference: http://bl.ocks.org/mbostock/1046712
// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
width: 700,
height: 380,
textFontSize: 11,
fadedOpacity: 0.03,
innerRadius: 245,
arcThickness: 20
};
function generateMatrix(links, numNodes) {
var i, j;
var matrix = [];
for (i=0; i<numNodes; i++) {
matrix.push([]);
for (j=0; j<numNodes; j++) {
matrix[i].push(0);
}
}
for (i=0; i<links.length; i++) {
var link = links[i];
matrix[link.source][link.target] = link.weight;
}
return matrix;
}
var data = tributary.chart_data;
var matrix = generateMatrix(data.links, data.nodes.length);
console.log(matrix);
visualize(data.nodes, matrix);
function visualize(nodes, matrix) {
var svg = d3.select('svg');
var gRoot = svg.append('svg:g')
.attr('transform', 'translate(379, 383)');
var fillColorFn = d3.scale.category20c();
var chord = d3.layout.chord()
.padding(0.05)
.sortSubgroups(d3.descending)
.sortChords(d3.descending);
var arc = d3.svg.arc()
.innerRadius(config.innerRadius)
.outerRadius(config.innerRadius + config.arcThickness);
chord.matrix(matrix);
var gGroup = gRoot.selectAll('.group')
.data(chord.groups)
.enter().append('svg:g')
.attr('class', 'group');
gGroup.append('path')
.classed('arc', true)
.style('fill', function(d) { return fillColorFn(d.index); })
.style('stroke', function(d) { return fillColorFn(d.index); })
.attr('d', arc)
.on('mouseenter', function (d) {
var activeArc = {};
gRoot.selectAll('path.chord').each(function (d2) {
if (!(d2.source.index == d.index || d2.target.index == d.index)) {
d3.select(this)
.transition()
.style('opacity', config.fadedOpacity)
} else {
activeArc[d2.source.index] = true;
activeArc[d2.target.index] = true;
d3.select(this).moveToFront();
}
});
gRoot.selectAll('path.arc').each(function (d2) {
if (!activeArc[d2.index]) {
d3.select(this)
.transition()
.style('opacity', config.fadedOpacity)
d3.select('text.label-' + d2.index)
.transition()
.style('opacity', config.fadedOpacity)
}
});
})
.on('mouseleave', function (d) {
gRoot.selectAll('path.arc')
.transition()
.style('opacity', 1);
gRoot.selectAll('path.chord')
.transition()
.style('opacity', 1);
gRoot.selectAll('text.label')
.transition()
.style('opacity', 1);
});
gGroup.append('text')
.attr('class', function (d) { return 'label label-' + d.index; })
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr('dy', '.35em')
.attr('transform', function(d) {
return 'rotate(' + (d.angle * 180 / Math.PI - 90) + ')'
+ 'translate(' + (config.innerRadius + config.arcThickness + 5) + ')'
+ (d.angle > Math.PI ? 'rotate(180)' : '');
})
.style('text-anchor', function(d) { return d.angle > Math.PI ? 'end' : null; })
.style('font-size', config.textFontSize)
.text(function(d) { return nodes[d.index].id; });
gRoot.selectAll('.chord')
.data(chord.chords)
.enter().append('path')
.attr('class', 'chord')
.style('stroke', function(d) { return d3.rgb(fillColorFn(d.source.index)).darker(); })
.style('stroke-opacity', '0.4')
.style('fill', function(d) { return fillColorFn(d.source.index); })
.attr('d', d3.svg.chord().radius(config.innerRadius));
}
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment