-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
80 lines (62 loc) · 1.8 KB
/
example.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
<!doctype html>
<meta charset="UTF-8">
<title>Example</title>
<style>
body {
margin: 0;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jstat.js"></script>
<script src="inst/htmlwidgets/lib/langevitour-pack.js"></script>
<!-- Test that we can cope with a scale transformation. -->
<div style="transform: scale(0.9)">
<div id="container"></div>
</div>
<!-- Check we can set and clear value. -->
<div style="margin: 20px;">
<p><button onclick="tour.renderValue(val)">tour.renderValue(val)</button></p>
<p><button onclick="tour.renderValue(null)">tour.renderValue(null)</button></p>
</div>
<script>
"use strict";
// Generate a sample dataset
let X = [ ], group = [ ], pointSize = [ ];
let r = ()=>jStat.normal.sample(0,0.02);
let n = 1000;
for(let i=0;i<n;i++) {
let a=i/n * Math.PI * 2;
X.push([ 10+Math.sin(a)/3+r(), 20+Math.sin(a*2)/3+r(), 30+Math.sin(a*3)/3, 40+Math.sin(a*4)/3, 50+Math.sin(a*5)/3 ]);
group.push( Math.floor(i*4/n) );
pointSize.push(i%10+1);
}
// Extra axes (specified as columns of a matrix)
let extraAxes = [
[1],
[2],
[0],
[0],
[0]
];
let extraAxesNames = [ 'V1+2*V2' ];
let val = {
X:X,
group:group,
center: [10,20,30,40,50],
scale: [2,1,1,1,1],
levels:['a','b','c','d'],
colnames:['V1','V2','V3','V4','V5'],
extraAxes:extraAxes,
extraAxesNames:extraAxesNames,
//pointSize: 3,
pointSize: pointSize,
};
let container = document.getElementById("container");
let tour = new langevitour.Langevitour(container, window.innerWidth, window.innerHeight);
tour.renderValue(val);
window.addEventListener('resize', ()=>tour.resize(window.innerWidth, window.innerHeight));
tour.addEventListener("change", (e)=>{
console.log(e);
});
</script>