mcircle/app.js at master · sahdev50/mcircle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var width=300,
    height=300,
    margin=10;

var svg = d3.select('#graph')
            .append('svg')
            .attr('width', width)
            .attr('height', height);

var g = svg.append('g')
            .attr('transform', 'translate(' + 0 + ',' + 0 + ')');


var data = d3.zip(
    d3.range(0, 12),
    d3.shuffle(d3.range(0, 12))),
    colors = ['red',
        'orange',
        'yellow',
        'green',
        'cyan',
        'sky',
        'blue' ,
        'indigo',
        'violet',
        'grey'];

var chord = d3.svg.chord()
            .source(function(d){ return d[0]; })
            .target(function(d){ return d[1]; })
            .radius(100)
            .startAngle(function(d){ return -2*Math.PI*(1/data.length)*d; })
            .endAngle(function(d){ return -2*Math.PI*(1/data.length)*((d-1)%data.length); });

var g4 = svg.append('g')
            .attr("transform", "translate(" + 0 + ", " + 0 + ")");

g4.append('g')
    .attr("transform", "translate(150, 150)")
    .selectAll('path')
    .data(data)
    .enter()
    .append('path')
    .attr('d', chord)
    .attr('fill', function(d, i){ return colors[i%colors.length]})
    .attr('stroke', function(d, i){ return colors[(i+1)%colors.length]});