-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
115 lines (93 loc) · 3.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Examples for Purescript Wrapper for D3js</title>
<link rel="stylesheet" href="examples/psblock.css">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis--x path {
display: none;
}
</style>
</head>
<body>
<div class="container">
<header>
<span class="left">afc</span>
<span class="right"><a href="">based on...</a></span>
</header>
<div class="inner">
<h1>
<pre>purescript-d3v4</pre>
</h1>
<div class="inner-inner">
<h2>Examples:</h2>
<ul>
<li>
<h3>Five Circles</h3>
<p>Very very simple example, hello world of D3</p>
<a href="examples/fivecircles/dist/index.html">(Link)</a>
</li>
<li>
<h3>General Update Pattern</h3>
<p>For any non-static visualisation it's essential to understand the
fundamentals of how D3 structures updates to the data. Mike Bostock
has several very good tutorials on the subject but probably the
simplest one that illustrates the process is reproduced here (without
the random function for the moment). </p>
<a href="examples/gupIII/dist/index.html">(Link)</a>
</li>
<li>
<h3>Force Layout</h3>
<p>Complex inter-relations are sometimes better laid out by a process
such as force layouts - D3 provides a lot of options in this
regard.</p>
<a href="examples/forcelayout/dist/index.html">(Link)</a>
</li>
<li>
<h3>Purescript packages</h3>
<p>Using the same basic code as previous example (force layout) but
displaying the information in the purescript-packages json file (to be
retrieved via Ajax eventually)</p>
<a href="examples/packagetree/dist/index.html">(Link)</a>
</li>
<li>
<h3>Bar chart</h3>
<p></p>
<a href="examples/barchart/dist/index.html">(Link)</a>
</li>
<li>
<h3>Drag Pan Zoom</h3>
<p>Using callbacks we can specify the behaviors for drags and zooms even with these functions being written in Purescript. There's some shenanigans to get the callbacks to work - you probably don't want to look. </p>
<a href="examples/dragpanzoom/dist/index.html">(Link)</a>
</li>
<li>
<h3>Tree</h3>
<p>Simplest hierarchical data demo</p>
<a href="examples/tree/dist/index.html">(Link)</a>
</li>
<li>
<h3>Radial Cluster</h3>
<p>Projection of basic tree to radial form</p>
<a href="examples/radialcluster/dist/index.html">(Link)</a>
</li>
<li>
<h3>(Really ugly POC demo soon-to-be-retired)</h3>
<p></p>
<a href="examples/default/dist/index.html">(Link)</a>
</li>
</ul>
</div>
<footer><small>Copyleft 2016 etc etc</small></footer>
</div>
</div>
</body>
</html>