Heavyweights

.block

license: mit

README.md

Built with blockbuilder.org

forked from ConorAspell's block: Rockhold vs Romero

Data.json

{
"nodes":[
{
 "name": "Ngannou",
"group":0,
"centrality":0.43478260869565216
},{
 "name": "Tybura",
"group":1,
"centrality":0.21739130434782608
},{
 "name": "Velasquez",
"group":2,
"centrality":0.21739130434782608
},{
 "name": "Hunt",
"group":3,
"centrality":0.8695652173913043
},{
 "name": "Dos Santos",
"group":4,
"centrality":1.5217391304347827
},{
 "name": "Jordan",
"group":5,
"centrality":0.21739130434782608
},{
 "name": "Silva",
"group":6,
"centrality":0.43478260869565216
},{
 "name": "Stipe",
"group":7,
"centrality":1.5217391304347827
},{
 "name": "Browne",
"group":8,
"centrality":0.21739130434782608
},{
 "name": "McCorkle",
"group":9,
"centrality":0.21739130434782608
},{
 "name": "Struve",
"group":10,
"centrality":0.8695652173913043
},{
 "name": "Nelson",
"group":11,
"centrality":0.21739130434782608
},{
 "name": "Albini",
"group":12,
"centrality":0.21739130434782608
},{
 "name": "Overeem",
"group":13,
"centrality":1.3043478260869565
},{
 "name": "Rothwell",
"group":14,
"centrality":0.21739130434782608
},{
 "name": "Mitrione",
"group":15,
"centrality":0.21739130434782608
},{
 "name": "Werdum",
"group":16,
"centrality":0.43478260869565216
},{
 "name": "Blaydes",
"group":17,
"centrality":0.6521739130434783
},{
 "name": "Oleinik",
"group":18,
"centrality":0.43478260869565216
},{
 "name": "Lewis",
"group":19,
"centrality":0.6521739130434783
},{
 "name": "Arlovski",
"group":20,
"centrality":0.21739130434782608
},{
 "name": "Volkov",
"group":21,
"centrality":0.8695652173913043
},{
 "name": "Johnson",
"group":22,
"centrality":0.21739130434782608
},{
 "name": "Omielanczuk",
"group":23,
"centrality":0.21739130434782608
}],"links": [
{"source": 0, "target": 17, "value": 9, "type": "arrow"},
{"source": 0, "target": 13, "value": 10, "type": "arrow"},
{"source": 1, "target": 20, "value": 3, "type": "arrow"},
{"source": 2, "target": 4, "value": 9, "type": "arrow"},
{"source": 3, "target": 10, "value": 8, "type": "arrow"},
{"source": 3, "target": 6, "value": 10, "type": "arrow"},
{"source": 3, "target": 14, "value": 3, "type": "arrow"},
{"source": 3, "target": 19, "value": 7, "type": "arrow"},
{"source": 4, "target": 7, "value": 3, "type": "arrow"},
{"source": 4, "target": 2, "value": 10, "type": "arrow"},
{"source": 4, "target": 11, "value": 3, "type": "arrow"},
{"source": 4, "target": 14, "value": 3, "type": "arrow"},
{"source": 4, "target": 3, "value": 8, "type": "arrow"},
{"source": 4, "target": 10, "value": 10, "type": "arrow"},
{"source": 4, "target": 16, "value": 10, "type": "arrow"},
{"source": 5, "target": 19, "value": 9, "type": "arrow"},
{"source": 6, "target": 3, "value": 0, "type": "arrow"},
{"source": 6, "target": 13, "value": 8, "type": "arrow"},
{"source": 7, "target": 13, "value": 10, "type": "arrow"},
{"source": 7, "target": 0, "value": 3, "type": "arrow"},
{"source": 7, "target": 20, "value": 10, "type": "arrow"},
{"source": 7, "target": 3, "value": 6, "type": "arrow"},
{"source": 7, "target": 11, "value": 3, "type": "arrow"},
{"source": 7, "target": 4, "value": 10, "type": "arrow"},
{"source": 7, "target": 16, "value": 10, "type": "arrow"},
{"source": 8, "target": 13, "value": 10, "type": "arrow"},
{"source": 9, "target": 3, "value": 10, "type": "arrow"},
{"source": 10, "target": 23, "value": 9, "type": "arrow"},
{"source": 10, "target": 6, "value": 10, "type": "arrow"},
{"source": 10, "target": 7, "value": 9, "type": "arrow"},
{"source": 10, "target": 9, "value": 10, "type": "arrow"},
{"source": 11, "target": 10, "value": 10, "type": "arrow"},
{"source": 12, "target": 22, "value": 10, "type": "arrow"},
{"source": 13, "target": 3, "value": 8, "type": "arrow"},
{"source": 13, "target": 16, "value": 2, "type": "arrow"},
{"source": 13, "target": 10, "value": 10, "type": "arrow"},
{"source": 13, "target": 4, "value": 9, "type": "arrow"},
{"source": 13, "target": 20, "value": 9, "type": "arrow"},
{"source": 13, "target": 11, "value": 3, "type": "arrow"},
{"source": 14, "target": 13, "value": 10, "type": "arrow"},
{"source": 15, "target": 19, "value": 10, "type": "arrow"},
{"source": 16, "target": 3, "value": 9, "type": "arrow"},
{"source": 16, "target": 1, "value": 3, "type": "arrow"},
{"source": 17, "target": 23, "value": 3, "type": "arrow"},
{"source": 17, "target": 18, "value": 9, "type": "arrow"},
{"source": 17, "target": 3, "value": 3, "type": "arrow"},
{"source": 18, "target": 8, "value": 9, "type": "arrow"},
{"source": 18, "target": 12, "value": 10, "type": "arrow"},
{"source": 19, "target": 1, "value": 8, "type": "arrow"},
{"source": 19, "target": 8, "value": 9, "type": "arrow"},
{"source": 19, "target": 11, "value": 1, "type": "arrow"},
{"source": 20, "target": 10, "value": 3, "type": "arrow"},
{"source": 21, "target": 10, "value": 8, "type": "arrow"},
{"source": 21, "target": 22, "value": 1, "type": "arrow"},
{"source": 21, "target": 16, "value": 7, "type": "arrow"},
{"source": 21, "target": 11, "value": 3, "type": "arrow"},
{"source": 22, "target": 1, "value": 3, "type": "arrow"},
{"source": 23, "target": 18, "value": 2, "type": "arrow"}
]
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>D3 Matrix Example</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head><style>
    path.link {
        fill: none;
        stroke: #666;
        
    }
  
  path.link.zero{
    		opacity: 0.1;
      	stroke-width: 0.25px;
  }

    path.link.twofive {
        opacity: 0.25;
      	stroke-width: .75px;
    }

    path.link.fivezero {
        opacity: 0.50;
      	stroke-width: 1.5px;
    }

    path.link.sevenfive {
        opacity: 0.75;
      	stroke-width: 3.0px;
    }

    path.link.onezerozero {
        opacity: 1.0;
      	stroke-width: 4.5px;
    }

    circle {
        fill: #ccc;
        stroke: #fff;
        stroke-width: 1.5px;
    }

    text {
        fill: #000;
        pointer-events: none;
    }
    #content {
        padding: 7px;
    }
</style>
<body>

</body>


<script>

// get the data
var nodecolor = d3.scale.category20();

d3.json("Data.json", function(error, graph) {

    var nodes = {};
  	size = 20;

// Compute the distinct nodes from the links.
    var links = graph.links;

    var width = 1500,
            height = 1400;

    var force = d3.layout.force()
            .nodes(graph.nodes)
            .links(links)
            .size([width, height])
            .linkDistance(function(d) {
                return d.value*10;
            })
            .charge(-4000)
            .on("tick", tick)
            .start();

// Set the range
    var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
    v.domain([0, d3.max(links, function(d) { return d.value; })]);

// asign a type per value to encode opacity
    links.forEach(function(link) {
      console.log("happening");
      console.log(v(link.value));
       if (v(link.value) == 0) {
            link.type = "zero";
        } 
       else if (v(link.value) <= 25) {
            link.type = "twofive";
        } else if (v(link.value) <= 50 && v(link.value) > 25) {
            link.type = "fivezero";
        } else if (v(link.value) <= 75 && v(link.value) > 50) {
            link.type = "sevenfive";
        } else if (v(link.value) <= 100 && v(link.value) > 75) {
            link.type = "onezerozero";
        }
    });

    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

// build the arrow.
    svg.append("svg:defs").selectAll("marker")
            .data(["end"])      // Different link/path types can be defined here
            .enter().append("svg:marker")    // This section adds in the arrows
            .attr("id", String)
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 15)
            .attr("refY", -1.5)
            .attr("markerWidth", 6)
            .attr("markerHeight", 6)
            .attr("orient", "auto")
            .append("svg:path")
            .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
    var path = svg.append("svg:g").selectAll("path")
            .data(force.links())
    				
            .enter().append("svg:path")
            .attr("class", function(d) { return "link " + d.type; })
            .attr("marker-end", "url(#end)");

// define the nodes
    var node = svg.selectAll(".node")
            .data(force.nodes())
            .enter().append("g")
            .attr("class", "node")
            .call(force.drag);

// add the nodes
    node.append("circle")
            .attr("r", function (d) {
                return d.centrality * size;
            })
            .style("fill", function(d) {
                return nodecolor(d.group);
            });

// add the text
    node.append("text")
            .attr("x", 12)
            .attr("dy", ".35em")
            .text(function(d) { return d.name; });

// add the curvy lines
    function tick() {
        path.attr("d", function(d) {
            var dx = d.target.x - d.source.x,
                    dy = d.target.y - d.source.y,
                    dr = Math.sqrt(dx * dx + dy * dy);
            return "M" +
                    d.source.x + "," +
                    d.source.y + "A" +
                    dr + "," + dr + " 0 0,1 " +
                    d.target.x + "," +
                    d.target.y;
        });

        node
                .attr("transform", function(d) {
                    return "translate(" + d.x + "," + d.y + ")"; });
    }
});

</script>