-
Notifications
You must be signed in to change notification settings - Fork 0
/
ass3_karina_test.html
125 lines (109 loc) · 3.38 KB
/
ass3_karina_test.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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<style>
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
</style>
<title>Assignment 3</title>
<script>
// Set up on-load initialization
d3.select(window).on('load', init);
// Define nodes
var nodes = [{'id': 'Michael JAnderson'},
{'id':'Frances Bay'},
{'id':'Scott Coffey'},
{'id':'Catherine ECoulson'},]
//{'id’:'Laura Dern'},
//{'id’:'Miguel Ferrer'},
//{'id’:'Laura Harring'},
//{'id’:'Freddie Jones'},
//{'id’:'Sheryl Lee'},
//{'id’:'Kyle MacLachlan'},
//{'id’:'Everett Mc Gill'},
//{'id’:'Jack Nance'},
//{'id’:'Harry Dean Stanton'},
//{'id’:'Naomi Watts'},
//{‘id':'Alicia Witt'},
//{'id’:'Grace Zabriskie'}]
// Define edges
var links = [{ 'source' : "Michael JAnderson" ,"target": "Frances Bay" , "value": "2"},
{ "source": "Michael JAnderson", "target": "Scott Coffey", "value": "1"}]
// Initialiation function. Called after body has loaded
function init(){
// Setup svg
var w = 400;
var h = 400;
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h);
// Create force simulation - only define force types at this point
var simulation =
d3.forceSimulation()
// This defines a force linking specific nodes
// - the actual links are specified below
.force("link", d3.forceLink().id(function(d) { return d.id; }))
// This force causes nice separation between nodes
.force("charge", d3.forceManyBody())
// This force centers the nodes to the middle of the view
.force("center", d3.forceCenter(w / 2, h / 2));
// Create link elements
var link =
svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(links)
.enter()
.append("line")
.attr("stroke-width", function(d) {
return Math.sqrt(d.value);
});
// Create node elements
var node =
svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
// Function called in each step of the simulation
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
// Assign nodes to simulation
simulation.nodes(nodes)
.on("tick", ticked)
// Assign links (edges) to simulation
simulation.force("link")
.links(links);
}
//d3.json("pizza_request_dataset.json", function(json) {
//d3.select("body")
// .append("ul")
// .select("li")
// .data(json)
// .enter()
// .append("li")
// .text(function(d){return d.request_title;})
//});
</script>
</head>
<body>
</body>
</html>