-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (117 loc) · 3.94 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
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Responsive Wordle Demo</title>
<script src="./js/packages/d3.min.js"></script>
<script src="./js/packages/Box2D.min.js"></script>
<script src="./js/responsiveWordle.js"></script>
<script src="./js/drawWordle.js"></script>
<script src="./js/addForceLayout.js"></script>
<style>
body {
text-align: center;
}
#vis {
position: absolute;
top: 10%;
left: 10%;
}
</style>
</head>
<body>
<div id="vis"></div>
<script>
let initWidth = document.documentElement.clientWidth
let initHeight = document.documentElement.clientHeight
const inputTags = [
{ text: 'Kobe', size: 591 },
{ text: 'Mike', size: 753 },
{ text: 'John', size: 817 },
{ text: 'James', size: 711 },
{ text: 'Kuzma', size: 802 },
{ text: 'Davis', size: 855 },
{ text: 'Howard', size: 102 },
{ text: 'Gasol', size: 190 },
{ text: 'Kevin', size: 115 },
{ text: 'Jules', size: 126 },
{ text: 'Daan', size: 142 },
{ text: 'Andrea', size: 178 },
{ text: 'Bettina', size: 164 },
{ text: 'Green', size: 125 },
{ text: 'Blue', size: 130 },
{ text: 'Tom', size: 187 },
{ text: 'Jack', size: 145 },
{ text: 'Jane', size: 175 },
{ text: 'Sage', size: 136 },
{ text: 'Inner', size: 173 },
{ text: 'Buchin', size: 145 },
{ text: 'Wulms', size: 110 },
{ text: 'Single', size: 141 },
{ text: 'Point', size: 113 },
{ text: 'Fit', size: 117 },
{ text: 'Wilson', size: 141 },
{ text: 'Warren', size: 129 },
{ text: 'Leon', size: 141 },
{ text: 'Benson', size: 154 },
{ text: 'Bruce', size: 164 },
{ text: 'Charles', size: 140 },
{ text: 'Wesley', size: 10 },
{ text: 'Andrew', size: 44 },
{ text: 'Kenny', size: 39 },
{ text: 'Evan', size: 45 },
{ text: 'Nick', size: 13 },
{ text: 'Jason', size: 24 },
{ text: 'Kelly', size: 14 },
{ text: 'Joyce', size: 44 },
{ text: 'Alonso', size: 44 },
{ text: 'Albert', size: 14 },
{ text: 'Easter', size: 48 },
{ text: 'Amy', size: 47 },
{ text: 'Alice', size: 20 },
{ text: 'Gloria', size: 33 },
{ text: 'Colin', size: 40 },
{ text: 'Edith', size: 27 },
{ text: 'Warren', size: 28 },
{ text: 'Abel', size: 32 },
{ text: 'Ben', size: 34 },
{ text: 'Edwin', size: 19 },
{ text: 'Elvis', size: 17 },
{ text: 'Aaron', size: 46 },
{ text: 'Anthony', size: 16 },
{ text: 'Paul', size: 12 },
{ text: 'Solomon', size: 21 },
{ text: 'Glen', size: 35 },
{ text: 'Alva', size: 29 },
{ text: 'Zack', size: 10 },
{ text: 'Porter', size: 18 },
]
const layout = responsiveWordle()
.size([~~(0.8 * initWidth), ~~(0.8 * initHeight)])
.words(inputTags)
.rotate(function () {
return 0
})
.font('Impact')
.fontSize(function (d) {
return d.size
})
const words = layout.start()
function changeWindowSize() {
document.getElementById('vis').innerHTML = ''
let w = document.documentElement.clientWidth
let h = document.documentElement.clientHeight
forceToWordle(words, ~~(0.4 * w), ~~(0.4 * h))
}
function debounce(func, ms) {
let timeout
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => func.apply(this, arguments), ms)
}
}
window.addEventListener('resize', debounce(changeWindowSize, 150))
changeWindowSize()
</script>
</body>
</html>