Skip to content

Instantly share code, notes, and snippets.

@ConorAspell

ConorAspell/.block

Last active December 20, 2017 18:07
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 ConorAspell/25dc2882127e6948eae9a926590ec372 to your computer and use it in GitHub Desktop.
Save ConorAspell/25dc2882127e6948eae9a926590ec372 to your computer and use it in GitHub Desktop.
Download ZIP
Johnson Versus Dillashaw: Visualised
Raw
.block
license: mit
Raw
README.md

Built with blockbuilder.org

A force directed graph uses a physics simulation to lay out a network. It has a huge amount of uses in many different fields, with this Block I decided to explore it's potential in visualising an upcoming UFC fight.

Raw
data.json
{
"nodes":[
{
"name": "Moraga",
"group":0,
"centrality":0.962962962962963
},{
"name": "Dillashaw",
"group":1,
"centrality":0.8888888888888888
},{
"name": "Lineker",
"group":2,
"centrality":0.962962962962963
},{
"name": "Johnson",
"group":3,
"centrality":0.9259259259259259
},{
"name": "Elliot",
"group":4,
"centrality":0.962962962962963
},{
"name": "Pace",
"group":5,
"centrality":0.962962962962963
},{
"name": "Easton",
"group":6,
"centrality":0.962962962962963
},{
"name": "Reis",
"group":7,
"centrality":0.962962962962963
},{
"name": "Cruz",
"group":8,
"centrality":1.0
},{
"name": "Garbrandt",
"group":9,
"centrality":0.962962962962963
},{
"name": "Page",
"group":10,
"centrality":0.962962962962963
},{
"name": "Cejudo",
"group":11,
"centrality":0.962962962962963
},{
"name": "Dodson",
"group":12,
"centrality":0.962962962962963
},{
"name": "Yamamoto",
"group":13,
"centrality":0.962962962962963
},{
"name": "Pickett",
"group":14,
"centrality":1.0
},{
"name": "Cariaso",
"group":15,
"centrality":0.962962962962963
},{
"name": "Torres",
"group":16,
"centrality":0.962962962962963
},{
"name": "Horiguchi",
"group":17,
"centrality":0.962962962962963
},{
"name": "Barao",
"group":18,
"centrality":0.962962962962963
},{
"name": "Viana",
"group":19,
"centrality":0.962962962962963
},{
"name": "Watson",
"group":20,
"centrality":0.962962962962963
},{
"name": "Assuncao",
"group":21,
"centrality":0.962962962962963
},{
"name": "Tamura",
"group":22,
"centrality":0.962962962962963
},{
"name": "Bagautinov",
"group":23,
"centrality":0.962962962962963
},{
"name": "McCall",
"group":24,
"centrality":0.962962962962963
},{
"name": "Benavidez",
"group":25,
"centrality":0.962962962962963
},{
"name": "Borg",
"group":26,
"centrality":0.962962962962963
},{
"name": "Soto",
"group":27,
"centrality":0.962962962962963
}],"links": [
{"source": 1, "target": 6, "value": 3, "type": "arrow"},
{"source": 1, "target": 19, "value": 10, "type": "arrow"},
{"source": 1, "target": 20, "value": 3, "type": "arrow"},
{"source": 1, "target": 2, "value": 3, "type": "arrow"},
{"source": 1, "target": 21, "value": 2, "type": "arrow"},
{"source": 1, "target": 22, "value": 9, "type": "arrow"},
{"source": 1, "target": 9, "value": 9, "type": "arrow"},
{"source": 1, "target": 18, "value": 13, "type": "arrow"},
{"source": 1, "target": 27, "value": 6, "type": "arrow"},
{"source": 3, "target": 0, "value": 6, "type": "arrow"},
{"source": 3, "target": 13, "value": 3, "type": "arrow"},
{"source": 3, "target": 4, "value": 3, "type": "arrow"},
{"source": 3, "target": 15, "value": 3, "type": "arrow"},
{"source": 3, "target": 16, "value": 3, "type": "arrow"},
{"source": 3, "target": 5, "value": 3, "type": "arrow"},
{"source": 3, "target": 17, "value": 6, "type": "arrow"},
{"source": 3, "target": 25, "value": 11, "type": "arrow"},
{"source": 3, "target": 7, "value": 8, "type": "arrow"},
{"source": 3, "target": 10, "value": 8, "type": "arrow"},
{"source": 3, "target": 23, "value": 3, "type": "arrow"},
{"source": 3, "target": 12, "value": 6, "type": "arrow"},
{"source": 3, "target": 24, "value": 3, "type": "arrow"},
{"source": 3, "target": 11, "value": 10, "type": "arrow"},
{"source": 3, "target": 26, "value": 6, "type": "arrow"},
{"source": 8, "target": 3, "value": 3, "type": "arrow"},
{"source": 8, "target": 1, "value": 1, "type": "arrow"},
{"source": 12, "target": 1, "value": 10, "type": "arrow"},
{"source": 14, "target": 3, "value": 0, "type": "arrow"},
{"source": 21, "target": 1, "value": 1, "type": "arrow"}
]
}
Raw
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.5px;
}
path.link.twofive {
opacity: 0.25;
stroke-width: 1.5px;
}
path.link.fivezero {
opacity: 0.50;
stroke-width: 3.0px;
}
path.link.sevenfive {
opacity: 0.75;
stroke-width: 4.5px;
}
path.link.onezerozero {
opacity: 1.0;
stroke-width: 6.0px;
}
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 = 10;
// Compute the distinct nodes from the links.
var links = graph.links;
var width = 1800,
height = 1200;
var force = d3.layout.force()
.nodes(graph.nodes)
.links(links)
.size([width, height])
.linkDistance(function(d) {
return d.value*10;
})
.charge(-5000)
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment