-
Notifications
You must be signed in to change notification settings - Fork 29
Expand file tree
/
Copy pathindex.js
More file actions
121 lines (104 loc) · 2.89 KB
/
index.js
File metadata and controls
121 lines (104 loc) · 2.89 KB
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
import createScatterplot from '../src';
import createMenu from './menu';
import { checkSupport } from './utils';
const canvas = document.querySelector('#canvas');
let points = { x: [], y: [], z: [], w: [] };
let numPoints = 100000;
let pointSize = 2;
let opacity = 0.33;
let selection = [];
const lassoMinDelay = 10;
const lassoMinDist = 2;
const showReticle = true;
const reticleColor = [1, 1, 0.878431373, 0.33];
const pointoverHandler = (pointId) => {
const x = points.x[pointId];
const y = points.y[pointId];
const category = points.z[pointId];
const value = points.w[pointId];
console.log(
`Out point: ${pointId}`,
`X: ${x}\nY: ${y}\nCategory: ${category}\nValue: ${value}`
);
};
const pointoutHandler = (pointId) => {
const x = points.x[pointId];
const y = points.y[pointId];
const category = points.z[pointId];
const value = points.w[pointId];
console.log(
`Out point: ${pointId}`,
`X: ${x}\nY: ${y}\nCategory: ${category}\nValue: ${value}`
);
};
const selectHandler = ({ points: selectedPoints }) => {
selection = selectedPoints;
if (selection.length === 1) {
const x = points.x[selection[0]];
const y = points.y[selection[0]];
const category = points.z[selection[0]];
const value = points.w[selection[0]];
console.log(
`Selected: ${selectedPoints}`,
`X: ${x}\nY: ${y}\nCategory: ${category}\nValue: ${value}`
);
}
};
const deselectHandler = () => {
console.log('Deselected:', selection);
selection = [];
};
const scatterplot = createScatterplot({
canvas,
lassoMinDelay,
lassoMinDist,
pointSize,
showReticle,
reticleColor,
opacity,
lassoOnLongPress: true,
lassoType: 'brush'
});
checkSupport(scatterplot);
console.log(`Scatterplot v${scatterplot.get('version')}`);
scatterplot.subscribe('pointover', pointoverHandler);
scatterplot.subscribe('pointout', pointoutHandler);
scatterplot.subscribe('select', selectHandler);
scatterplot.subscribe('deselect', deselectHandler);
const generatePoints = (length) => ({
x: Array.from({ length }, () => -1 + Math.random() * 2),
y: Array.from({ length }, () => -1 + Math.random() * 2),
z: Array.from({ length }, () => Math.round(Math.random())), // category
w: Array.from({ length }, () => Math.random()), // value
});
const setNumPoints = (newNumPoints) => {
points = generatePoints(numPoints);
scatterplot.draw(points);
};
createMenu({ scatterplot, setNumPoints });
const colorsCat = ['#3a78aa', '#aa3a99'];
scatterplot.set({ colorBy: 'category', pointColor: colorsCat });
const colorsScale = [
'#002072', // dark blue
'#162b79',
'#233680',
'#2e4186',
'#394d8d',
'#425894',
'#4b649a',
'#5570a1',
'#5e7ca7',
'#6789ae',
'#7195b4',
'#7ba2ba',
'#85aec0',
'#90bbc6',
'#9cc7cc',
'#a9d4d2',
'#b8e0d7',
'#c8ecdc',
'#ddf7df',
'#ffffe0', // bright yellow
];
scatterplot.set({ colorBy: 'value', pointColor: colorsScale });
setNumPoints(numPoints);