Skip to content

Instantly share code, notes, and snippets.

@Ognami

Ognami/data.json

Last active January 23, 2017 22:08
Show Gist options
  • Save Ognami/b618434d9ab1594843e07e40bd0ed42c to your computer and use it in GitHub Desktop.
Save Ognami/b618434d9ab1594843e07e40bd0ed42c to your computer and use it in GitHub Desktop.
Download ZIP
Basic Network Chart
Raw
data.json
{
"nodes": [
{"id": "Ognami", "group": 1},
{"id": "Harvey", "group": 9},
{"id": "Gus", "group": 9},
{"id": "Pierre", "group": 6},
{"id": "Pam", "group": 9},
{"id": "Leah", "group": 9},
{"id": "Wiz", "group": 9},
{"id": "Sam", "group": 2},
{"id": "Clint", "group": 9},
{"id": "Haley", "group": 4},
{"id": "George", "group": 5},
{"id": "Emily", "group": 4},
{"id": "Linus", "group": 9},
{"id": "Willy", "group": 9},
{"id": "Sebastion", "group": 3},
{"id": "Vincent", "group": 9},
{"id": "Penny", "group": 9},
{"id": "Alex", "group": 5},
{"id": "Jodi", "group": 2},
{"id": "Robin", "group": 3},
{"id": "Caroline", "group": 6},
{"id": "Marnie", "group": 9},
{"id": "Kent", "group": 2},
{"id": "Demetrius", "group": 3},
{"id": "Maru", "group": 3},
{"id": "Lewis", "group": 9},
{"id": "Evelyn", "group": 5},
{"id": "Jas", "group": 9},
{"id": "Shane", "group": 9},
{"id": "Abigail", "group": 6},
{"id": "Elliott", "group": 9}
],
"links": [
{"source": "Ognami", "target": "Harvey", "value": 7},
{"source": "Ognami", "target": "Gus", "value": 5},
{"source": "Ognami", "target": "Pierre", "value": 4},
{"source": "Ognami", "target": "Pam", "value": 3},
{"source": "Ognami", "target": "Leah", "value": 3},
{"source": "Ognami", "target": "Wiz", "value": 3},
{"source": "Ognami", "target": "Sam", "value": 3},
{"source": "Ognami", "target": "Clint", "value": 3},
{"source": "Ognami", "target": "Haley", "value": 3},
{"source": "Ognami", "target": "George", "value": 3},
{"source": "Ognami", "target": "Emily", "value": 3},
{"source": "Ognami", "target": "Linus", "value": 3},
{"source": "Ognami", "target": "Willy", "value": 0},
{"source": "Ognami", "target": "Sebastion", "value": 0},
{"source": "Ognami", "target": "Vincent", "value": 0},
{"source": "Ognami", "target": "Penny", "value": 0},
{"source": "Ognami", "target": "Alex", "value": 0},
{"source": "Ognami", "target": "Jodi", "value": 0},
{"source": "Ognami", "target": "Robin", "value": 2},
{"source": "Ognami", "target": "Caroline", "value": 2},
{"source": "Ognami", "target": "Marnie", "value": 1},
{"source": "Ognami", "target": "Kent", "value": 1},
{"source": "Ognami", "target": "Demetrius", "value": 1},
{"source": "Ognami", "target": "Maru", "value": 1},
{"source": "Ognami", "target": "Lewis", "value": 1},
{"source": "Ognami", "target": "Evelyn", "value": 1},
{"source": "Ognami", "target": "Jas", "value": 0},
{"source": "Ognami", "target": "Shane", "value": 0},
{"source": "Ognami", "target": "Abigail", "value": 0},
{"source": "Ognami", "target": "Elliott", "value": 0},
{"source": "George", "target": "Evelyn", "value": 10},
{"source": "Robin", "target": "Demetrius", "value": 10},
{"source": "Jodi", "target": "Kent", "value": 10},
{"source": "Pierre", "target": "Caroline", "value": 10},
{"source": "Marnie", "target": "Lewis", "value": 8},
{"source": "Demetrius", "target": "Maru", "value": 19},
{"source": "Robin", "target": "Sebastion", "value": 2},
{"source": "Gus", "target": "Pam", "value": 6},
{"source": "Clint", "target": "Emily", "value": 3},
{"source": "Gus", "target": "Linus", "value": 4}
]
}
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>Basic Network</title>
<style>
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#chart {
border: 1px solid #ccc;
}
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.node circle {
stroke: #fff;
stroke-width: 1.5px;
}
.node text {
font-size: 12px;
}
</style>
</head>
<body>
<svg id="chart" width="860" height="600"></svg>
<!--<div id="information"></div>-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var info = svg.append("text")
.attr("class","info")
.attr("transform","translate(10,20)");
var radius = "20",
maxradius = "24";
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("data.json", function(error, graph) {
if (error) throw error;
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g.node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on("click", function(d) {
var information = d.id + ", cluster: " + d.group;
info.text(information);
})
.on("mouseover", function() {
d3.select(this).select("circle").attr("r", maxradius);
})
.on("mouseout", function() {
d3.select(this).select("circle").attr("r", radius);
});
node.append("circle")
.attr("r", radius)
.attr("fill", function(d) { return color(d.group); })
node.append("text")
.attr("text-anchor", "middle")
.text(function(d) { return d.id; });
/*node.append("title")
.text(function(d) { return d.id; });*/
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links)
.distance(function(d) {
return (400 / (d.value+1));
});
function ticked() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("transform", function(d) {
var boundx = Math.max(maxradius, Math.min(width - maxradius, d.x));
var boundy = Math.max(maxradius, Math.min(height - maxradius, d.y));
return "translate(" + boundx + "," + boundy + ")";
});
/*.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });*/
}
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
//d.fx = d3.event.x;
///d.fy = d3.event.y;
d.fx = Math.max(maxradius, Math.min(width - maxradius, d3.event.x));
d.fy = Math.max(maxradius, Math.min(height - maxradius, d3.event.y));
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment