-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (112 loc) · 4.12 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
}
.button text {
pointer-events: none;
font: 10px sans-serif;
}
</style>
<body>
<script src="../personal_site/d3.v3.min.js"></script> <!-- pulls the whole d3 library into our server instance -->
<script>
console.log("Starting new script")
//*********************** Set Global Constants ***********************
var width = 960, //size constants, if you want to edit the size, change only these
height = 500
var svg = d3.select("body").append("svg") //sets size for webbrowser
.attr("width", width)
.attr("height", height);
//*********************** Force Defaults ***********************
//will gravitate nodes toward center of screen and repel them from each other
var force = d3.layout.force()
.gravity(.05)
.charge(-250)
.size([width, height]);
//*********************** Read skills.json *************************************************************************
d3.json("skills.json", function(error, json) {
if (error) throw error;
//*************************Set background color and dragging effect *****************
var drag = d3.behavior.drag().on("drag", dragged);
svg.append("rect") //sets background color
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "navy")
.call(drag);
//*********************** Force Link Distance (skill time function) Setup ***********************
force
.nodes(json.nodes)
/*.gravity(function(n) { TODO center less magnitude of skill requirement nodes more toward the center
var t = n.ls + n.lf + n.us + n.uf
return t / 500
})*/
.links(json.links)
.linkDistance(getLinkLength)
.start();
function getLinkLength(l, i) {
if (l.length > 0 ) {
return l.length
}
return 50
}
//*********************** Load and Draw Link ***********************
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.style("opacity", function(n){return n.opacity}) // set the element opacity
.attr("class", "link");
//*********************** Load and draw Node ***********************
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node");
//.call(force.drag); turns on force
node.append("circle")
.attr("r", function(d){if (d.group == 0) return 80; return 12;})
.style("opacity", node_opacity)
.style("fill", node_color)
//.on("click", node_click)
.on("dblclick",function(d){ if (d.instr != null) window.location = d.instr});
//this will drag the link and node. This is called when the background is dragged... cmd-f ".call(drag)"
function dragged(d) {
node.attr("transform", function(n) { return "translate("+ (n.x=n.x+ d3.event.dx) + "," + (n.y=n.y+d3.event.dy) + ")"; });
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; });
}
function node_color(d) {
if (d.color != null) {
return d.color
}
return "magenta" //ideally just get color of d
}
function node_opacity(n) {
if (n.group == 0)
return .5
return 1
}
node.append("text") //text for each node, size, offset, and color
.attr("dx", 12)
.attr("dy", ".35em")
.attr("fill", function(d){return d.color})//func [ node_click ] instead of "white" here for color to make the text same as
.text(function(d) { return d.name })
//.on("click", node_click)
//**************** initially places nodes using force after everything has been set up
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
});
</script>
</body>
</html>