-
Notifications
You must be signed in to change notification settings - Fork 0
/
initial.html
373 lines (328 loc) · 20.9 KB
/
initial.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:700" rel="stylesheet">
<style>
body {
background-color: white;
background-color: #FEDEC7;
margin: 0;
padding: 0% 5%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: calc(100vw - 10%);
font-family: 'Noto Sans', sans-serif;
color: teal;
}
svg {
max-width: 200px;
/*max-height: 100%;*/
width: 100%;
height: auto;
/*position: fixed;*/
top:0;
left: 0;
cursor: pointer;
/*border: 1px solid black;*/
}
.node {
stroke: none;
/*fill: #ffffff;*/
fill: #FEDEC7;
/*opacity: .0;
transition-property: opacity;
transition-duration: .2s;
transition-timing-function: linear;
transition-delay: 0s;*/
transition-property: fill;
transition-duration: .3s;
transition-timing-function: linear;
transition-delay: 0s;
/*display: none;*/
/* transition-property: display;
transition-duration: .5s;
transition-timing-function: linear;
transition-delay: .5s;*/
}
.node.pink {
fill: #FEDEC7;
}
.node.is-inside {
/*opacity: 1;*/
fill: teal;
fill: white;
fill: tomato;
/*display: block;*/
}
.node.root-node {
/*opacity: 1;*/
/*visibility: hidden;*/
display: none;
}
g text {
display: none;
}
#lettering polygon {
stroke: blue;
fill: none;
/*visibility: hidden;*/
display: none;
}
.back-to-index {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<!-- <header style="display:block;top: 0;width: 100vw; height:80px; position: absolute;background: white;"></header> -->
<svg id="calogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<style>
.cls-1 {
font-size: 70px;
font-family: Noto Sans;
font-weight: 700;
letter-spacing: 5px;
}
</style>
</defs>
<title>lettering-noto</title>
<g id="lettering">
<g id="uppercase">
<g id="fatlettering">
<polygon points="111.6 238.8 110.2 237.8 107.1 227.4 91.7 227.4 88.6 237.8 87.2 238.8 76.3 238.8 75 236.9 91.8 188.9 93.2 188 105.6 188 106.9 188.9 123.8 236.9 122.5 238.8 111.6 238.8" />
<polygon points="142.6 238.8 141.1 237.4 141.1 199.4 129.6 199.4 128.2 198 128.2 189.6 129.6 188.2 165.7 188.2 167.1 189.6 167.1 198 165.7 199.4 154.1 199.4 154.1 237.4 152.7 238.8 142.6 238.8" />
<polygon points="181.1 238.8 179.6 237.4 179.6 189.6 181.1 188.2 191.2 188.2 192.6 189.6 192.6 227.6 210.6 227.6 212 229 212 237.4 210.6 238.8 181.1 238.8" />
<polygon points="256.2 238.8 254.8 237.8 251.7 227.4 236.3 227.4 233.2 237.8 231.8 238.8 220.9 238.8 219.6 236.9 236.4 188.9 237.8 188 250.2 188 251.5 188.9 268.4 236.9 267.1 238.8 256.2 238.8" />
<polygon points="310.7 238.8 309.4 238.1 291.2 206.4 291.6 214.8 291.6 237.4 290.2 238.8 281.1 238.8 279.7 237.4 279.7 189.6 281.1 188.2 293.9 188.2 295.1 188.9 313.3 220.2 313 212.2 313 189.6 314.4 188.2 323.5 188.2 325 189.6 325 237.4 323.5 238.8 310.7 238.8" />
<polygon points="351.9 238.8 350.5 237.4 350.5 199.4 338.9 199.4 337.5 198 337.5 189.6 338.9 188.2 375 188.2 376.4 189.6 376.4 198 375 199.4 363.5 199.4 363.5 237.4 362 238.8 351.9 238.8" />
<polygon points="390.4 238.8 389 237.4 389 189.6 390.4 188.2 417.9 188.2 419.4 189.6 419.4 197.9 417.9 199.3 402 199.3 402 207 416.7 207 418.1 208.4 418.1 216.7 416.7 218.1 402 218.1 402 227.6 417.9 227.6 419.4 229 419.4 237.4 417.9 238.8 390.4 238.8" />
<polygon points="94.2 301.4 93.9 301.4 89.1 300.1 88.8 300 85.2 298 84.9 297.8 81.8 295 81.6 294.8 79.2 291.3 79 291 77.3 286.8 77.2 286.6 76.2 281.7 76.2 281.5 75.8 275.9 75.8 275.7 76.5 268.7 76.6 268.4 78.6 262.3 78.8 262 82.1 257 82.4 256.7 86.9 253.1 87.2 252.9 92.7 250.6 93.1 250.5 99.5 249.8 99.8 249.8 106.8 250.6 107.1 250.7 114.1 253.2 115 255.1 111.7 263.3 109.8 264.1 107.1 262.9 104.6 261.9 102.1 261.3 99.7 261.1 95.2 262 92 264.8 89.8 269.5 89.1 275.9 89.7 282.1 91.8 287 95 289.6 99.7 290.4 105 289.9 111.5 288 113.3 289.4 113.3 297.9 112.3 299.2 106 301.1 105.8 301.1 98.8 301.7 98.6 301.7 94.2 301.4" />
<polygon points="159.3 301.1 158 300.1 154.8 289.7 139.5 289.7 136.3 300.1 135 301.1 124 301.1 122.7 299.2 139.6 251.2 140.9 250.3 153.3 250.3 154.6 251.2 171.6 299.2 170.2 301.1 159.3 301.1" />
<polygon points="184.3 301.1 182.9 299.7 182.9 251.9 184.3 250.5 194.4 250.5 195.8 251.9 195.8 289.9 213.8 289.9 215.2 291.3 215.2 299.7 213.8 301.1 184.3 301.1" />
<polygon points="239.7 301.1 238.3 300.1 222.1 252.3 223.5 250.5 233.7 250.5 235.1 251.5 244 279.9 245.3 284.5 246.3 280 246.3 279.9 255.4 251.5 256.7 250.5 267 250.5 268.3 252.3 252.1 300.1 250.7 301.1 239.7 301.1" />
<polygon points="277.2 301.1 275.8 299.7 275.8 293.9 276.6 292.6 281.6 290.3 281.6 261.2 276.6 258.9 275.8 257.6 275.8 251.9 277.2 250.5 298.9 250.5 300.3 251.9 300.3 257.6 299.5 258.9 294.5 261.2 294.5 290.3 299.5 292.6 300.3 293.9 300.3 299.7 298.9 301.1 277.2 301.1" />
<polygon points="344.6 301.1 343.4 300.4 325.2 268.7 325.6 277.1 325.6 299.7 324.2 301.1 315.1 301.1 313.7 299.7 313.7 251.9 315.1 250.5 327.9 250.5 329.1 251.2 347.3 282.5 347 274.5 347 251.9 348.4 250.5 357.5 250.5 358.9 251.9 358.9 299.7 357.5 301.1 344.6 301.1" />
<polygon points="398 301.7 388.3 300.1 387.7 299.9 380.6 295.1 380.1 294.6 375.7 286.9 375.5 286.4 374.1 275.8 374.1 275.4 375.5 264.9 375.7 264.4 380.1 256.7 380.6 256.2 387.8 251.5 388.3 251.3 398 249.7 398.5 249.7 408.2 251.3 408.8 251.5 415.9 256.3 416.4 256.8 420.7 264.5 420.9 265 422.4 275.5 422.4 275.9 420.9 286.4 420.7 286.9 416.3 294.6 415.9 295.1 408.7 299.9 408.1 300.1 398.4 301.7 398 301.7" />
<polygon points="105.7 217.5 100.3 200 99.4 196.8 93.2 217.5 105.7 217.5 105.7 217.5" />
<polygon points="250.3 217.5 244.9 200 244 196.8 237.8 217.5 250.3 217.5 250.3 217.5" />
<polygon points="153.4 279.8 148 262.3 147.2 259.1 141 279.8 153.4 279.8 153.4 279.8" />
<polygon points="386.1 275.7 386.8 282.7 389.1 287.8 392.9 290.8 398.2 291.8 403.5 290.8 407.3 287.8 409.7 282.2 410.3 275.7 409.7 269 407.3 263.6 398.3 259.6 393 260.6 389.2 263.6 386.8 268.7 386.1 275.7 386.1 275.7" />
</g>
<g id="lettering-2" data-name="lettering">
<polygon points="111.6 237.4 108.1 226 90.7 226 87.2 237.4 76.3 237.4 93.2 189.4 105.6 189.4 122.5 237.4 111.6 237.4 111.6 237.4" />
<polygon points="105.7 217.5 100.3 200 99.4 196.8 93.2 217.5 105.7 217.5 105.7 217.5" />
<polygon points="152.7 237.4 142.6 237.4 142.6 198 129.6 198 129.6 189.6 165.7 189.6 165.7 198 152.7 198 152.7 237.4 152.7 237.4" />
<polygon points="181.1 237.4 181.1 189.6 191.2 189.6 191.2 229 210.6 229 210.6 237.4 181.1 237.4 181.1 237.4" />
<polygon points="256.2 237.4 252.7 226 235.3 226 231.8 237.4 220.9 237.4 237.8 189.4 250.2 189.4 267.1 237.4 256.2 237.4 256.2 237.4" />
<polygon points="250.3 217.5 244.9 200 244 196.8 237.8 217.5 250.3 217.5 250.3 217.5" />
<polygon points="323.5 237.4 310.7 237.4 289.9 201.2 289.6 201.2 290.2 214.9 290.2 237.4 281.1 237.4 281.1 189.6 293.9 189.6 314.7 225.4 314.9 225.4 314.4 212.2 314.4 189.6 323.5 189.6 323.5 237.4 323.5 237.4" />
<polygon points="362 237.4 351.9 237.4 351.9 198 338.9 198 338.9 189.6 375 189.6 375 198 362 198 362 237.4 362 237.4" />
<polygon points="417.9 237.4 390.4 237.4 390.4 189.6 417.9 189.6 417.9 197.9 400.5 197.9 400.5 208.4 416.7 208.4 416.7 216.7 400.5 216.7 400.5 229 417.9 229 417.9 237.4 417.9 237.4" />
<polygon points="99.7 259.6 94.6 260.7 90.8 263.9 88.4 269.1 87.7 275.9 88.3 282.4 90.7 287.9 94.4 290.9 99.7 291.9 105.2 291.2 111.9 289.4 111.9 297.9 105.6 299.7 98.7 300.3 94.3 300 89.5 298.7 85.8 296.8 82.8 294 80.3 290.5 78.6 286.3 77.6 281.4 77.2 275.8 77.9 268.8 79.9 262.8 83.3 257.8 87.7 254.2 93.3 251.9 99.7 251.2 106.6 252 113.7 254.6 110.4 262.8 107.7 261.6 105 260.6 102.3 259.9 99.7 259.6 99.7 259.6" />
<polygon points="159.3 299.7 155.8 288.3 138.4 288.3 135 299.7 124 299.7 140.9 251.7 153.3 251.7 170.2 299.7 159.3 299.7 159.3 299.7" />
<polygon points="153.4 279.8 148 262.3 147.2 259.1 141 279.8 153.4 279.8 153.4 279.8" />
<polygon points="184.3 299.7 184.3 251.9 194.4 251.9 194.4 291.3 213.8 291.3 213.8 299.7 184.3 299.7 184.3 299.7" />
<polygon points="256.7 251.9 267 251.9 250.7 299.7 239.7 299.7 223.5 251.9 233.7 251.9 242.7 280.3 244.2 286.2 245.2 290.8 247.7 280.3 256.7 251.9 256.7 251.9" />
<polygon points="298.9 299.7 277.2 299.7 277.2 293.9 283 291.2 283 260.3 277.2 257.6 277.2 251.9 298.9 251.9 298.9 257.6 293.1 260.3 293.1 291.2 298.9 293.9 298.9 299.7 298.9 299.7" />
<polygon points="357.5 299.7 344.6 299.7 323.8 263.5 323.6 263.5 324.2 277.2 324.2 299.7 315.1 299.7 315.1 251.9 327.9 251.9 348.7 287.7 348.9 287.7 348.4 274.5 348.4 251.9 357.5 251.9 357.5 299.7 357.5 299.7" />
<polygon points="421 275.7 419.5 286.2 415.1 293.9 407.9 298.7 398.2 300.3 388.5 298.7 381.3 293.9 376.9 286.2 375.5 275.6 376.9 265.1 381.4 257.4 388.5 252.7 398.3 251.1 408 252.7 415.1 257.5 419.5 265.2 421 275.7 421 275.7" />
<polygon points="386.1 275.7 386.8 282.7 389.1 287.8 392.9 290.8 398.2 291.8 403.5 290.8 407.3 287.8 409.7 282.2 410.3 275.7 409.7 269 407.3 263.6 398.3 259.6 393 260.6 389.2 263.6 386.8 268.7 386.1 275.7 386.1 275.7" />
</g>
</g>
<g id="lowercase">
<polygon points="136.7 238.6 135.6 236 134.6 233.4 134.5 233.4 134.4 233.4 131.7 236.2 128.9 238 125.7 239 121.7 239.3 116.8 238.5 113 236.1 110.6 232.3 109.9 227.2 110.9 221.9 114.1 218.2 119.4 216 126.9 215 130.3 214.9 133.6 214.8 133.6 214 133.6 213.1 132.1 208.8 127.6 207.3 122.6 208 116.9 210.1 115.1 206.6 113.4 203.1 120.4 200.5 128 199.6 134.8 200.4 139.8 203 142.9 207.2 143.9 213.1 143.9 225.9 143.9 238.6 140.3 238.6 136.7 238.6 136.7 238.6" />
<polygon points="133.6 220.9 131.6 221 129.5 221 125.6 221.5 122.8 222.7 121.1 224.6 120.6 227.3 121.8 230.6 125.6 231.7 128.9 231.1 131.4 229.6 133 227.2 133.6 224 133.6 222.5 133.6 220.9 133.6 220.9" />
<polygon points="176.4 231 182.9 229.8 182.9 237.5 177.8 239 173.4 239.3 168.4 238.6 164.3 236.1 162 231.7 161.4 226.6 161.4 208.2 156.4 208.2 156.4 203.8 162.1 200.3 165.2 192.3 171.8 192.3 171.8 200.4 182.5 200.4 182.5 208.2 171.8 208.2 171.8 226.6 173.1 229.9 176.4 231 176.4 231" />
<polygon points="206.7 238.6 196.3 238.6 196.3 185.4 206.7 185.4 206.7 238.6 206.7 238.6" />
<polygon points="247.5 238.6 246.5 236 245.5 233.4 245.3 233.4 245.2 233.4 242.5 236.2 239.8 238 236.6 239 232.5 239.3 227.6 238.5 223.8 236.1 221.5 232.3 220.7 227.2 221.8 221.9 224.9 218.2 230.3 216 237.8 215 241.1 214.9 244.4 214.8 244.4 214 244.4 213.1 242.9 208.8 238.5 207.3 233.5 208 227.7 210.1 226 206.6 224.2 203.1 231.2 200.5 238.9 199.6 245.7 200.4 250.7 203 253.7 207.2 254.8 213.1 254.8 225.9 254.8 238.6 251.1 238.6 247.5 238.6 247.5 238.6" />
<polygon points="244.4 220.9 242.4 221 240.4 221 236.4 221.5 233.6 222.7 231.9 224.6 231.4 227.3 232.6 230.6 236.4 231.7 239.7 231.1 242.2 229.6 243.9 227.2 244.4 224 244.4 222.5 244.4 220.9 244.4 220.9" />
<polygon points="306.4 238.6 301.2 238.6 295.9 238.6 295.9 227.4 295.9 216.3 295.6 212.7 294.5 210.1 292.6 208.5 289.8 208 286 208.7 283.5 210.9 282 214.8 281.5 220.6 281.5 229.6 281.5 238.6 276.3 238.6 271.1 238.6 271.1 219.5 271.1 200.4 275.1 200.4 279.1 200.4 279.8 202.8 280.5 205.3 280.8 205.3 281 205.3 283.1 202.8 285.8 201.1 289.1 200 292.8 199.7 298.7 200.6 302.9 203.3 305.5 207.7 306.4 213.7 306.4 226.1 306.4 238.6 306.4 238.6" />
<polygon points="338.8 231 345.4 229.8 345.4 237.5 340.4 239 335.8 239.3 330.5 238.5 326.7 236.1 324.3 231.3 323.8 226.6 323.8 208.2 318.8 208.2 318.8 203.8 324.6 200.3 327.6 192.3 334.3 192.3 334.3 200.4 345 200.4 345 208.2 334.3 208.2 334.3 226.6 335.5 229.9 338.8 231 338.8 231" />
<polygon points="376 239.3 367.8 238 361.6 234.2 357.7 228 356.4 219.8 357.6 211.3 361.2 204.9 366.9 201 374.4 199.7 381.6 200.8 387.1 204.3 390.4 209.8 391.6 217 391.6 219.6 391.6 222.1 379.2 222.1 366.9 222.1 367.7 226.1 369.6 229 372.5 230.9 376.5 231.5 379.8 231.3 383 230.8 386.1 229.9 389.4 228.5 389.4 232.6 389.4 236.6 386.6 237.8 383.6 238.6 380.1 239.1 376 239.3 376 239.3" />
<polygon points="374.5 207.1 371.6 207.6 369.3 209.2 367.8 211.7 367.2 215.2 374.5 215.2 381.8 215.2 381.3 211.7 379.8 209.2 377.5 207.6 374.5 207.1 374.5 207.1" />
<polygon points="129.9 300.9 122.2 299.7 116.5 296 112.9 289.2 112 281.3 113.2 272.7 116.9 266.4 122.8 262.5 130.8 261.3 137.1 261.9 142.7 263.9 141.1 267.9 139.6 271.9 137.2 271 135 270.3 132.9 269.8 130.8 269.7 124.7 272.6 122.6 281.2 124.7 289.6 130.8 292.4 133.7 292.2 136.3 291.6 138.9 290.6 141.5 289.1 141.5 293.6 141.5 298 138.9 299.4 136.4 300.3 133.4 300.7 129.9 300.9 129.9 300.9" />
<polygon points="180.2 300.2 179.2 297.6 178.2 295 178 295 177.9 295 175.2 297.8 172.5 299.6 169.3 300.6 165.2 300.9 160.3 300.1 156.6 297.7 154.2 293.9 153.4 288.8 154.5 283.5 157.7 279.8 163 277.6 170.5 276.6 173.8 276.5 177.1 276.4 177.1 275.6 177.1 274.7 175.6 270.4 171.2 268.9 166.2 269.6 160.4 271.7 158.7 268.2 157 264.6 163.9 262.1 171.6 261.2 178.4 262 183.4 264.5 186.4 268.8 187.5 274.7 187.5 287.5 187.5 300.2 183.8 300.2 180.2 300.2 180.2 300.2" />
<polygon points="177.1 282.5 175.1 282.6 173.1 282.6 169.1 283.1 166.3 284.3 164.7 286.2 164.1 288.8 165.4 292.1 169.2 293.3 172.4 292.7 174.9 291.2 176.6 288.7 177.1 285.6 177.1 284.1 177.1 282.5 177.1 282.5" />
<polygon points="214.2 300.2 203.8 300.2 203.8 247 214.2 247 214.2 300.2 214.2 300.2" />
<polygon points="239.9 300.2 225.3 262 236.2 262 243.6 283.8 245.1 291.6 245.3 291.6 246.9 283.8 254.2 262 265.1 262 250.6 300.2 239.9 300.2 239.9 300.2" />
<polygon points="275.7 252.1 276.9 248.5 281.4 247 285.6 248.2 287.1 252.1 285.7 255.9 281.4 257.2 277.5 256.3 275.7 252.1 275.7 252.1" />
<polygon points="286.6 300.2 276.2 300.2 276.2 262 286.6 262 286.6 300.2 286.6 300.2" />
<polygon points="338.4 300.2 328 300.2 328 277.9 326.5 271.7 321.8 269.6 315.5 272.5 313.6 282.2 313.6 300.2 303.1 300.2 303.1 262 311.1 262 312.5 266.9 313.1 266.9 317.9 262.7 324.9 261.3 330.7 262.2 335 264.9 337.6 269.3 338.4 275.3 338.4 300.2 338.4 300.2" />
<polygon points="389.5 281 388.3 289.3 384.6 295.6 378.7 299.6 370.9 300.9 365.7 300.3 361.1 298.5 357.4 295.5 354.7 291.5 353 286.7 352.4 281 353.7 272.7 357.3 266.5 363.2 262.6 371.1 261.3 376.2 261.9 380.8 263.7 384.5 266.6 387.2 270.5 388.9 275.4 389.5 281 389.5 281" />
<polygon points="363.1 281 363.5 286 364.9 289.6 367.4 291.8 371 292.5 374.6 291.8 377 289.6 378.4 286 378.8 281 378.4 276.1 377 272.5 374.5 270.4 370.9 269.7 367.3 270.4 364.9 272.5 363.5 276 363.1 281 363.1 281" />
</g>
<g id="c-letter">
<polygon points="273.6 132.3 254.9 134.1 238.4 139.7 224.1 149.1 212.1 162.1 202.5 178.5 195.7 197.9 191.6 220.1 190.3 245.4 195.5 293.9 211.1 328.6 237.2 349.5 273.6 356.4 292 355.3 312.3 352 334.4 346.6 358.3 338.9 358.3 353.7 358.3 368.4 358.3 383.2 358.3 398 337.3 405.4 315.1 410.7 291.7 413.9 267 415 232.9 412.2 203.1 404 177.5 390.3 156.2 371.1 139.4 346.7 127.4 317.5 120.2 283.6 117.8 244.9 119 219.8 122.5 196.3 128.4 174.4 136.7 154.2 147.1 135.8 159.7 119.8 174.2 106 190.8 94.4 209.3 85.4 229.2 78.9 250.7 75 273.6 73.7 297.8 75.1 322.1 79.5 346.4 86.8 370.8 97.1 365.1 111.4 359.5 125.7 353.8 140 348.1 154.3 338.8 150 329.4 146 320.1 142.3 310.6 138.8 301.3 136 292 133.9 282.8 132.7 273.6 132.3 273.6 132.3" />
</g>
</g>
<g id="typography">
<text class="cls-1" transform="translate(228.4 238.6)">C</text>
<text class="cls-1" transform="translate(106.9 238.6)">atlante
<tspan x="1.9" y="61.6">calvino</tspan>
</text>
</g>
</svg>
<a class="back-to-index" href="./index.html">Back</a>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/svg-points.min.js"></script>
<script>
let svg = d3.select("svg"),
width = 500,
height = 500,
rootNode,
nodes = [],
node = svg.selectAll(".node"),
scaleFactor = 500 / width,
lettersPolygons = [];
let config = [{
nodeRadius: 16.1,
collisionMargin: 1.2,
amountNodes: 550,
radiusRootNode: 1.5,
// collisionStrength: 1,
margin: {
top: 0,
bottom: height * scaleFactor,
left: 0,
right: scaleFactor * width
}
}]
let configuration = config[0];
// configuration.margin.top = scaleFactor * height * 0.37;
// configuration.margin.bottom = scaleFactor * height * 0.61;
// configuration.margin.left = scaleFactor * width * 0.21;
// configuration.margin.right = scaleFactor * width * 0.79;
// A class for converting the poligons into an object suitable for the library svg-points.js
class polygonModel {
constructor(type, attr, element) {
this['type'] = type;
this[attr] = d3.select(element).attr(attr);
}
}
// Convert all polygons in array of coordinates, thanks to svg-points.js
svg.selectAll('#c-letter polygon').each(function() {
let thisPolygon = new polygonModel('polygon', 'points', this);
let thisPolygonPointsObjects = SVGPoints.toPoints(thisPolygon);
let thisPolygonPointsArray = [];
thisPolygonPointsObjects.forEach(function(d) {
thisPolygonPointsArray.push([d.x, d.y]);
});
lettersPolygons.push(thisPolygonPointsArray);
});
// This function checks whether the circle is or not whitin any of the letters polygon
function checkIfInside(coordinates) {
let flag = 0;
lettersPolygons.forEach(function(d) {
if (d3.polygonContains(d, coordinates)) {
flag++;
}
})
if (flag == 1) {
return true;
} else {
return false;
}
}
// A function for randomly adding circles to the nodes array
function addNodes(n) {
for (let i = 0; i < n; i++) {
let myX = d3.randomUniform(configuration.margin.left, configuration.margin.right)();
let myY = d3.randomUniform(configuration.margin.top, configuration.margin.bottom)();
// let myX = [margin.left,margin.right][Math.floor(Math.random() * 2)];
// let myY = [margin.top,margin.bottom][Math.floor(Math.random() * 2)];
let myRadius = d3.randomUniform(3, configuration.nodeRadius)();
nodes.push({ 'id': i, 'r': myRadius, 'x': myX, 'y': myY });
}
if (configuration.radiusRootNode && !rootNode) {
rootNode = nodes[0];
rootNode.x = d3.randomUniform(configuration.margin.left, configuration.margin.right)();
rootNode.y = d3.randomUniform(configuration.margin.top, configuration.margin.bottom)();
rootNode.r = width / 40;
rootNode.r = configuration.nodeRadius * configuration.radiusRootNode;
}
}
let xForce = d3.forceY(width / 2).strength(0.008);
let yForce = d3.forceX(height / 2).strength(0.008);
let chargeForce = d3.forceManyBody().strength(-1);
let collideForce = d3.forceCollide(function(d) { return d.r + configuration.collisionMargin }).iterations(1).strength(1);
//Declare simaltion
let simulation = d3.forceSimulation(nodes)
.force("x", xForce)
.force("y", yForce)
.force("charge", chargeForce)
.force("collide", null)
.alpha(1)
.alphaDecay(0.02)
.on("tick", ticked);
// Update function
function update() {
let beginTime = d3.now();
function drawGraph() {
// Apply the general update pattern to the nodes.
node = node.data(nodes, function(d) { return d.id; });
node.exit().remove();
node = node.enter().append("circle")
.merge(node)
.classed('node', true)
.classed('is-inside', function(d) { return checkIfInside([d.x, d.y]) })
.classed('root-node', function(d) { if (d.id == 0) { return true } else { return false } })
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr("r", function(d) { return d.r; });
}
drawGraph();
// Update and restart the simulation.
simulation.nodes(nodes);
simulation.alpha(1).restart();
simulation.on("end", function() {
console.log('simulation done', d3.now() - beginTime);
})
}
function ticked() {
if (simulation.alpha() < 0.35) {
simulation.force("collide", collideForce);
}
node.attr("cx", function(d) {
return d.x = Math.max(configuration.margin.left + d.r, Math.min(configuration.margin.right - d.r, d.x));
})
.attr("cy", function(d) {
return d.y = Math.max(configuration.margin.top + d.r, Math.min(configuration.margin.bottom - d.r, d.y));
})
.classed('is-inside', function(d) { return checkIfInside([d.x, d.y]) })
}
// Anticolllision on mouse move
svg.on("mousemove", function() {
let p1 = d3.mouse(this);
if (rootNode) {
rootNode.fx = p1[0];
rootNode.fy = p1[1];
simulation
.alpha(0.5)
.restart(); //reheat the simulation
}
});
// add circles on click
svg.on("click", function() {
// console.log(d3.mouse(this))
// addNodes(100);
window.location = './';
// d3.select('body').attr('bgcolor', function() {
// console.log(d3.select('body').attr('bgcolor'))
// return '#FEDEC7';
// })
// update();
});
//Add 100 nodes to the array, then draw the first time
addNodes(configuration.amountNodes);
update();
// add circles every tot seconds
// d3.interval(function() {
// if (nodes.length < 1000) {
// // console.log('interval');
// addNodes(25);
// update();
// }
// }, 50, d3.now());
</script>