D3 Examples - Origens-destinos dos ciclistas em CG

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>The Euro Debt Crisis</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.4.2/d3.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.4.2/d3.layout.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.4.2/d3.csv.js"></script>
    <style type="text/css">
​
        .group text {
            font: 11px sans-serif;
            pointer-events: none;
        }
​
        .group path {
            stroke: #000;
        }
​
        path.chord {
            stroke-width: .75;
            fill-opacity: .75;
        }
​
    </style>
</head>
<body>
<script type="text/javascript">
​
    // Chart dimensions.
    var w = 480,
            h = 500,
            r1 = Math.min(w, h) / 2 - 4,
            r0 = r1 - 20,
            format = d3.format(",.3r");
​
    // Square matrices, asynchronously loaded; credits is the transpose of debits.
    var debits = [],
            credits = [];
​
    // The chord layout, for computing the angles of chords and groups.
    var layout = d3.layout.chord()
            .sortGroups(d3.descending)
            .sortSubgroups(d3.descending)
            .sortChords(d3.descending)
            .padding(.04);
​
    // The color scale, for different categories of "worrisome" risk.
    var fill = d3.scale.ordinal()
            .domain([0, 1, 2])
            .range(["#DB704D", "#D2D0C6", "#ECD08D", "#F8EDD3"]);
​
    // The arc generator, for the groups.
    var arc = d3.svg.arc()
            .innerRadius(r0)
            .outerRadius(r1);
​
    // The chord generator (quadratic Bézier), for the chords.
    var chord = d3.svg.chord()
            .radius(r0);
​
    // Add an SVG element for each diagram, and translate the origin to the center.
    var svg = d3.select("body").selectAll("div")
            .data([debits])
            .enter().append("div")
            .style("display", "inline-block")
            .style("width", w + "px")
            .style("height", h + "px")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .append("svg:g")
            .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
​
    // Load our data file…
    d3.csv("contagens-origens-destinos.csv", function(data) {
        var countries = {},
                array = [],
                n = 0;
​
        // Compute a unique id for each country.
        data.forEach(function(d) {
            d.creditor = country(d.creditor);
            d.debtor = country(d.debtor);
            d.debtor.risk = d.risk;
            d.valueOf = value; // convert object to number implicitly
        });
​
        // Initialize a square matrix of debits and credits.
        for (var i = 0; i < n; i++) {
            debits[i] = [];
            credits[i] = [];
            for (var j = 0; j < n; j++) {
                debits[i][j] = 0;
                credits[i][j] = 0;
            }
        }
​
        // Populate the matrices, and stash a map from id to country.
        data.forEach(function(d) {
            debits[d.creditor.id][d.debtor.id] = d;
            credits[d.debtor.id][d.creditor.id] = d;
            array[d.creditor.id] = d.creditor;
            array[d.debtor.id] = d.debtor;
        });
​
        // For each diagram…
        svg.each(function(matrix, j) {
            var svg = d3.select(this);
​
            // Compute the chord layout.
            layout.matrix(matrix);
​
            // Add chords.
            svg.selectAll("path.chord")
                    .data(layout.chords)
                    .enter().append("svg:path")
                    .attr("class", "chord")
                    .style("fill", function(d) { return fill(d.source.value.risk); })
                    .style("stroke", function(d) { return d3.rgb(fill(d.source.value.risk)).darker(); })
                    .attr("d", chord)
                    .append("svg:title")
                    .text(function(d) { return d.source.value.debtor.name + " para " + d.source.value.creditor.name + " :" + format(d.source.value) + " ciclistas."; });
​
            // Add groups.
            var g = svg.selectAll("g.group")
                    .data(layout.groups)
                    .enter().append("svg:g")
                    .attr("class", "group");
​
            // Add the group arc.
            g.append("svg:path")
                    .style("fill", function(d) { return fill(array[d.index].risk); })
                    .attr("id", function(d, i) { return "group" + d.index + "-" + j; })
                    .attr("d", arc)
                    .append("svg:title")
                    .text(function(d) { return array[d.index].name + " " + (j ? "para" : "para") + " " + format(d.value) + " ciclistas"; });
​
            // Add the group label (but only for large groups, where it will fit).
            // An alternative labeling mechanism would be nice for the small groups.
            g.append("svg:text")
                    .attr("x", 6)
                    .attr("dy", 15)
                    .filter(function(d) { return d.value > 10; })
                    .append("svg:textPath")
                    .attr("xlink:href", function(d) { return "#group" + d.index + "-" + j; })
                    .text(function(d) { return array[d.index].name; });
        });
​
        // Memoize the specified country, computing a unique id.
        function country(d) {
            return countries[d] || (countries[d] = {
                name: d,
                id: n++
            });
        }
​
        // Converts a debit object to its primitive numeric value.
        function value() {
            return +this.amount;
        }
    });
​
</script>
</body>
</html>
    