D3 Examples - Quasar QComponents

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    body {
        font: 10px sans-serif;
        font-weight:400;
    }
    .chord {
        fill-opacity: .67;
    }
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
    var outerRadius = 700 / 2,
        innerRadius = outerRadius - 150;
​
    var fill = d3.scale.category20c();
​
    var chord = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.descending);
​
    var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(innerRadius + 20);
​
    var svg = d3.select("body").append("svg")
    .attr("width", outerRadius * 2)
    .attr("height", outerRadius * 2)
    .append("g")
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
​
    d3.json("readme.json", function(error, imports) {
        if (error) throw error;
​
        var indexByName = d3.map(),
            nameByIndex = d3.map(),
            matrix = [],
            n = 0;
​
        // Returns the Flare package name for the given class name.
        function name(name) {
            return name;
        }
        function group(group) {
            return group;
        }
​
        // Compute a unique index for each package name.
        imports.forEach(function(d) {
            if (!indexByName.has(d = name(d.name))) {
                nameByIndex.set(n, d);
                indexByName.set(d, n++);
            }
        });
​
        // Construct a square matrix counting package imports.
        imports.forEach(function(d) {
            var source = indexByName.get(name(d.name)),
                row = matrix[source];
            if (!row) {
                row = matrix[source] = [];
                for (var i = -1; ++i < n;) row[i] = 0;
            }
            d.imports.forEach(function(d) { row[indexByName.get(name(d))]++; });
        });
​
​
        chord.matrix(matrix);
​
        var g = svg.selectAll(".group")
        .data(chord.groups)
        .enter().append("g")
        .attr("class", "group");
​
        g.append("path")
        .style("fill", function(d) { return fill(d.index); })
        .style("stroke", function(d) { return fill(d.index); })
        .attr("d", arc);
​
        g.append("text")
        .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(" + (innerRadius + 26) + ")"
                + (d.angle > Math.PI ? "rotate(180)" : "");
        })
        .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
        .text(function(d) { return nameByIndex.get(d.index); });
​
        svg.selectAll(".chord")
        .data(chord.chords)
        .enter().append("path")
        .attr("class", "chord")
        .style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
        .style("fill", function(d) { return fill(d.source.index); })
        .attr("d", d3.svg.chord().radius(innerRadius));
​
    });
​
    d3.select(self.frameElement).style("height", outerRadius * 3 + "px");
​
</script>
​
    