Skip to content

Instantly share code, notes, and snippets.

@pbexe

pbexe/index.html

Last active February 3, 2016 16:26
Show Gist options
  • Save pbexe/988619e8d82ea60c099b to your computer and use it in GitHub Desktop.
Save pbexe/988619e8d82ea60c099b to your computer and use it in GitHub Desktop.
Download ZIP
Node Graph Test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<meta charset='utf-8'>
<title>Force layout test</title>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
</head>
<body>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script>
var width = window.innerWidth - 20,
height = window.innerHeight - 20;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var graph = getData();
var nodeMap = {};
graph.nodes.forEach(function (d) {
nodeMap[d.name] = d;
});
graph.links.forEach(function (l) {
l.source = nodeMap[l.source];
l.target = nodeMap[l.target];
})
force.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function (d) {
//return Math.sqrt(d.value) + 1;
return 2;
});
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", function (s) {
return Math.sqrt(s.value) + 1
})
.style("fill", function (d) {
return color(d.group);
})
.call(force.drag);
node.append("title")
.text(function (d) {
return d.name;
});
force.on("tick", function () {
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("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
});
});
function getData() {
return {
"nodes":[{"name":"stkbl0001","group":1,"value":5},{"name":"stkbl0002","group":2,"value":7},{"name":"stkbl0003","group":3,"value":3},{"name":"stkbl0004","group":4,"value":20},{"name":"stkbl0005","group":5,"value":60},{"name":"stkbl0006","group":1,"value":5},{"name":"stkbl0007","group":6,"value":40},{"name":"Ware","group":1,"value":5},{"name":"Wooten","group":1,"value":5},{"name":"Lynch","group":1,"value":5},{"name":"Workman","group":1,"value":5},{"name":"Copeland","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Pruitt","group":1,"value":5},{"name":"Marie","group":1,"value":5},{"name":"Adkins","group":1,"value":5},{"name":"Watkins","group":1,"value":5},{"name":"Kim","group":1,"value":5},{"name":"Jeanie","group":1,"value":5},{"name":"Angelica","group":1,"value":5},{"name":"Barr","group":1,"value":5},{"name":"Vicky","group":1,"value":5},{"name":"Terry","group":1,"value":5},{"name":"Sally","group":1,"value":5},{"name":"Leona","group":1,"value":5},{"name":"Fisher","group":1,"value":5},{"name":"Jodi","group":1,"value":5},{"name":"Ford","group":1,"value":5},{"name":"Davenport","group":1,"value":5},{"name":"Sylvia","group":1,"value":5},{"name":"Sandoval","group":1,"value":5},{"name":"Lynette","group":4,"value":100},{"name":"Milagros","group":1,"value":5},{"name":"Gonzales","group":5,"value":40},{"name":"Thompson","group":3,"value":10},{"name":"Powell","group":1,"value":5},{"name":"Julie","group":1,"value":5},{"name":"Macias","group":1,"value":5},{"name":"Chaney","group":1,"value":5},{"name":"Alyce","group":1,"value":5},{"name":"Gardner","group":8,"value":10},{"name":"Jaclyn","group":1,"value":5},{"name":"Pugh","group":1,"value":5},{"name":"Lyons","group":1,"value":5},{"name":"Edwina","group":1,"value":5},{"name":"Alvarez","group":1,"value":5},{"name":"Riddle","group":1,"value":5},],"links":[{"source":"stkbl0001","target":"stkbl0005","value":100},{"source":"stkbl0002","target":"stkbl0005","value":3},{"source":"stkbl0003","target":"stkbl0005","value":3},{"source":"Lyons","target":"Riddle","value":100},{"source":"Lyons","target":"Edwina","value":100},{"source":"stkbl0004","target":"stkbl0005","value":3} ]
};
}
</script>
<div class="fixed-action-btn " style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large blue hoverable" href="http://milesbudden.com/">
<i class="large material-icons">info_outline</i>
</a>
</div>
<div style="bottom: 24px; left: 24px;position: absolute;">
<a href="//www.reddit.com/submit" onclick="window.location = '//www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false"> <img src="//www.redditstatic.com/spreddit1.gif" alt="submit to reddit" border="0" /> </a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment