-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (66 loc) · 2.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Connections</title>
<link href="./public/css/style.css" rel="stylesheet">
<script src="./public/js/d3.min.js"></script>
<script src="./public/js/jscolor.js"></script>
</head>
<body>
<a href="https://github.com/crashspringfield/connections"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub"></a>
<div class="top">
<div>
<h1 class="title">Connections</h1>
<p class="sub">A implementation of D3's force-directed graph layout for non-developers</p>
<p class="how-to">
Connections exist between sources and targets. Start by adding a source and its targets. Sources can have multiple targets, and items can be both sources and targets. When you're ready to see the connections rendered in the graph, click the update button.
</p>
</div>
</div>
<div class="container">
<div class="middle">
<div class="left">
<div class="graph-input">
<label class="label" for="radius">Circle radius:</label>
<input id="radius" type="text" />
</div>
<div class="graph-input">
<label class="label" for="distance">Distance between nodes:</label>
<input id="distance" type="text" />
</div>
<div class="graph-input">
<label class="label" for="color">Color:</label>
<input id="color" class="jscolor" value="44c767" />
</div>
<div>
<button class="btn update" onclick="update()">Update Diagram</button>
</div>
</div>
<div class="right">
<div id="graph-container" class="graph-container">
</div>
</div>
</div>
<hr />
<div class="bottom">
<div class="input-row">
<div class="col">
<label class="label" for="source">Source:</label>
<input class="connection-input" type="text" />
</div>
<div class="col">
<label class="label" for="target">Targets:</label>
<input class="connection-input" type="text" />
<button class="btn round plus" onclick="addTarget(this)">+</button>
</div>
</div>
<div class="row">
<button class="btn" onclick="addSource(this)">Add Source</button>
</div>
</div>
</div>
<script src="./public/js/app.js"></script>
</body>
</html>