-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (84 loc) · 2.86 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
<!DOCTYPE html>
<html>
<head>
<title>tree-chart demos</title>
<meta charset="utf-8">
<style>
body {margin: 0; padding: 1em;}
.tree-demo {
padding: 1em;
border-radius: 0.5em;
border: 1px solid #777;
background: #EEE;
overflow: hidden;
margin: 1em 0;
}
</style>
</head>
<body>
<div id='state' style='float: right'></div>
<h1>tree-chart demos</h1>
<p>This library uses <a
href='https://www.npmjs.com/package/config-one'>config-one</a> for all of its
settings and overrides.</p>
<div class='tree-demo' id='boxes'></div>
<div class='tree-demo' id='words'></div>
<div class='tree-demo' id='jsobj'></div>
<script src='node_modules/config-one/dist/config1.js'></script>
<script src='node_modules/d3/d3.js'></script>
<script src='node_modules/d3-flextree/dist/d3-flextree.js'></script>
<script src='node_modules/tinycolor2/tinycolor.js'></script>
<script src='node_modules/ramda/dist/ramda.min.js'></script>
<script src='src/microcolor.js'></script>
<script src='src/tree-chart.js'></script>
<script src='src/defaults.js'></script>
<script src='src/node.js'></script>
<script src='src/cnode.js'></script>
<script src='src/d3svg.js'></script>
<script src='src/d3svg-node.js'></script>
<script src='src/d3svg-wordnode.js'></script>
<script src='src/d3svg-jsobj-node.js'></script>
<script src='src/d3svg-link.js'></script>
<script src='src/words.js'></script>
<script src='demos/demo.js'></script>
<script src='demos/demo-boxes.js'></script>
<script src='demos/demo-words.js'></script>
<script src='demos/demo-jsobj.js'></script>
<script>
demos = []; // global for convenience in debugging
(function() {
const C1 = config1;
// Function to push an array of chart-demos onto the global array
const pushDemos = newDemos => demos.push.apply(demos, newDemos);
const demoDefaults = {
scale: 0.5,
duration: 200,
speed: 2,
selector: C1(X=> '#' + X.name),
};
const demoSpecs = [
{ name: 'boxes',
start: C1(X=> () =>
pushDemos(DemoBoxes.start(X))
),
},
{ name: 'words',
start: C1(X=> () => {
TreeChart.Words.fromFetch('node_modules/word-list-json/words.json')
.then(words => {
const opts = C1.extend(X, {pickWord: words.pick});
pushDemos(DemoWords.start(opts));
})
}),
},
{ name: 'jsobj',
start: C1(X=> () =>
pushDemos(DemoJsObj.start(X))
),
},
].map(spec => C1.extend(demoDefaults, spec));
demoSpecs.map(spec => spec.start());
})();
</script>
</body>
</html>