-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
93 lines (77 loc) · 2.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Everything.csv</title>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="d3.tip.js"></script>
<script>
var width = screen.width,
height = screen.height;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.size([width, height]);
d3.csv("graph.csv", function(links) {
var nodesByName = {};
/* Initialize tooltip */
tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d.name; });
// Other valued rendered by the 'd' value in tool tip are
// SampleObject {
// name: "Somename",
// index: 599,
// weight: 1,
// x: 824.090367359045,
// y: 94.30975518819125,
// px: 824.090367359045,
// py: 94.30975518819125,
// fixed: 4
// }
// Create nodes for each unique source and target.
links.forEach(function(link) {
link.source = nodeByName(link.source);
link.target = nodeByName(link.target);
});
// Extract the array of nodes from the map by name.
var nodes = d3.values(nodesByName);
// Create the link lines.
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link");
/* Invoke the tip in the context of your visualization */
svg.call(tip)
// Create the node circles.
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 4.5)
/* Show and hide tip on mouse events */
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.call(force.drag);
// Start the force layout.
force
.nodes(nodes)
.links(links)
.on("tick", tick)
.start();
function tick() {
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 nodeByName(name) {
return nodesByName[name] || (nodesByName[name] = {name: name});
}
});
</script>
</body>
<!-- <div id="footer">
</div> -->
</html>