<section id="radial-lines-5">
<div class="top-grid">
<div class="intro">
<h1>Radial Lines</h1>
<p>Now you can click on the lines and they do things</p>
<p>And also with completely gratuitous animation</p>
</div>
<div class="controls">
<div class="controls__group">
<label for="startingAngle">Starting angle (-360 to 360)</label> <input id="startingAngle" type="text">
</div>
<div class="controls__group">
<label for="maxAngle">Max angle (0 to 360, probably)</label> <input id="maxAngle" type="text">
</div>
<div class="controls__group">
<label for="dataCount">Gimme this many</label> <input id="dataCount" type="text">
<button id="dataCountFetcher">Gimme gimme gimme</button>
</div>
<div class="controls__group">
<button id="clearer">Clear results before fetching new results</button>
</div>
</div>
</div>
<div id="svgOutput"></div>
<div class="controls">
<div class="controls__group">
<button id="showNeg">Highlight negative changes</button>
<button id="showPos">Highlight positive changes</button>
<button id="reset">Reset</button>
</div>
</div>
<div class="intro">
<p>(data is hidden inside a script tag right here)</p>
<script>
const dataset = [{
"id": 1,
"number": 16
},
{
"id": 2,
"number": 10
},
{
"id": 3,
"number": -4
},
{
"id": 4,
"number": -13
},
{
"id": 5,
"number": 9
},
{
"id": 6,
"number": 10
},
{
"id": 7,
"number": 1
},
{
"id": 8,
"number": 0
},
{
"id": 9,
"number": 11
},
{
"id": 10,
"number": 11
},
{
"id": 11,
"number": 8
},
{
"id": 12,
"number": -13
},
{
"id": 13,
"number": 0
},
{
"id": 14,
"number": -1
},
{
"id": 15,
"number": -15
},
{
"id": 16,
"number": -1
},
{
"id": 17,
"number": 0
},
{
"id": 18,
"number": -5
},
{
"id": 19,
"number": 18
},
{
"id": 20,
"number": 15
},
{
"id": 21,
"number": 0
},
{
"id": 22,
"number": 20
},
{
"id": 23,
"number": 11
},
{
"id": 24,
"number": 3
},
{
"id": 25,
"number": -11
},
{
"id": 26,
"number": -5
},
{
"id": 27,
"number": 17
},
{
"id": 28,
"number": 2
},
{
"id": 29,
"number": -11
},
{
"id": 30,
"number": -12
},
{
"id": 31,
"number": 19
},
{
"id": 32,
"number": -11
},
{
"id": 33,
"number": 15
},
{
"id": 34,
"number": -13
},
{
"id": 35,
"number": 2
},
{
"id": 36,
"number": -15
},
{
"id": 37,
"number": 18
},
{
"id": 38,
"number": -7
},
{
"id": 39,
"number": 16
},
{
"id": 40,
"number": 17
},
{
"id": 41,
"number": -5
},
{
"id": 42,
"number": 5
},
{
"id": 43,
"number": 4
},
{
"id": 44,
"number": 10
},
{
"id": 45,
"number": 3
},
{
"id": 46,
"number": 18
},
{
"id": 47,
"number": 6
},
{
"id": 48,
"number": 5
},
{
"id": 49,
"number": -1
},
{
"id": 50,
"number": -15
},
{
"id": 51,
"number": -15
},
{
"id": 52,
"number": 16
},
{
"id": 53,
"number": -1
},
{
"id": 54,
"number": 12
},
{
"id": 55,
"number": -12
},
{
"id": 56,
"number": -15
},
{
"id": 57,
"number": 7
},
{
"id": 58,
"number": -1
},
{
"id": 59,
"number": -6
},
{
"id": 60,
"number": 13
},
{
"id": 61,
"number": 12
},
{
"id": 62,
"number": 2
},
{
"id": 63,
"number": -9
},
{
"id": 64,
"number": -5
},
{
"id": 65,
"number": 12
},
{
"id": 66,
"number": 4
},
{
"id": 67,
"number": 1
},
{
"id": 68,
"number": 7
},
{
"id": 69,
"number": 1
},
{
"id": 70,
"number": 16
},
{
"id": 71,
"number": -10
},
{
"id": 72,
"number": -10
},
{
"id": 73,
"number": 12
},
{
"id": 74,
"number": 0
},
{
"id": 75,
"number": -10
},
{
"id": 76,
"number": 3
},
{
"id": 77,
"number": -15
},
{
"id": 78,
"number": 20
},
{
"id": 79,
"number": -7
},
{
"id": 80,
"number": -10
},
{
"id": 81,
"number": 19
},
{
"id": 82,
"number": 11
},
{
"id": 83,
"number": 13
},
{
"id": 84,
"number": -4
},
{
"id": 85,
"number": 18
},
{
"id": 86,
"number": 16
},
{
"id": 87,
"number": 2
},
{
"id": 88,
"number": 8
},
{
"id": 89,
"number": -2
},
{
"id": 90,
"number": 14
},
{
"id": 91,
"number": 15
},
{
"id": 92,
"number": -12
},
{
"id": 93,
"number": -7
},
{
"id": 94,
"number": -1
},
{
"id": 95,
"number": 15
},
{
"id": 96,
"number": 18
},
{
"id": 97,
"number": 18
},
{
"id": 98,
"number": 5
},
{
"id": 99,
"number": -13
},
{
"id": 100,
"number": -6
},
{
"id": 101,
"number": 1
},
{
"id": 102,
"number": 8
},
{
"id": 103,
"number": 10
},
{
"id": 104,
"number": 18
},
{
"id": 105,
"number": 20
},
{
"id": 106,
"number": 17
},
{
"id": 107,
"number": 3
},
{
"id": 108,
"number": -4
},
{
"id": 109,
"number": 1
},
{
"id": 110,
"number": -1
},
{
"id": 111,
"number": 4
},
{
"id": 112,
"number": 3
},
{
"id": 113,
"number": 18
},
{
"id": 114,
"number": -10
},
{
"id": 115,
"number": -10
},
{
"id": 116,
"number": -7
},
{
"id": 117,
"number": 0
},
{
"id": 118,
"number": -14
},
{
"id": 119,
"number": -3
},
{
"id": 120,
"number": 4
},
{
"id": 121,
"number": 8
},
{
"id": 122,
"number": -12
},
{
"id": 123,
"number": -5
},
{
"id": 124,
"number": -12
},
{
"id": 125,
"number": -5
},
{
"id": 126,
"number": -11
},
{
"id": 127,
"number": 3
},
{
"id": 128,
"number": 16
},
{
"id": 129,
"number": -14
},
{
"id": 130,
"number": -14
},
{
"id": 131,
"number": 16
},
{
"id": 132,
"number": -10
},
{
"id": 133,
"number": 15
},
{
"id": 134,
"number": -11
},
{
"id": 135,
"number": -10
},
{
"id": 136,
"number": -7
},
{
"id": 137,
"number": -9
},
{
"id": 138,
"number": 4
},
{
"id": 139,
"number": 11
},
{
"id": 140,
"number": 5
},
{
"id": 141,
"number": -8
},
{
"id": 142,
"number": -10
},
{
"id": 143,
"number": 4
},
{
"id": 144,
"number": 18
},
{
"id": 145,
"number": -5
},
{
"id": 146,
"number": 20
},
{
"id": 147,
"number": -2
},
{
"id": 148,
"number": 11
},
{
"id": 149,
"number": 6
},
{
"id": 150,
"number": 9
},
{
"id": 151,
"number": 13
},
{
"id": 152,
"number": 12
},
{
"id": 153,
"number": 1
},
{
"id": 154,
"number": 20
},
{
"id": 155,
"number": 17
},
{
"id": 156,
"number": -11
},
{
"id": 157,
"number": -5
},
{
"id": 158,
"number": -3
},
{
"id": 159,
"number": -1
},
{
"id": 160,
"number": 15
},
{
"id": 161,
"number": 20
},
{
"id": 162,
"number": 9
},
{
"id": 163,
"number": 5
},
{
"id": 164,
"number": 11
},
{
"id": 165,
"number": -12
},
{
"id": 166,
"number": 17
},
{
"id": 167,
"number": 0
},
{
"id": 168,
"number": -7
},
{
"id": 169,
"number": 12
},
{
"id": 170,
"number": 18
},
{
"id": 171,
"number": -4
},
{
"id": 172,
"number": -5
},
{
"id": 173,
"number": 2
},
{
"id": 174,
"number": -9
},
{
"id": 175,
"number": -3
},
{
"id": 176,
"number": -9
},
{
"id": 177,
"number": 15
},
{
"id": 178,
"number": 8
},
{
"id": 179,
"number": -12
},
{
"id": 180,
"number": -11
},
{
"id": 181,
"number": 18
},
{
"id": 182,
"number": -5
},
{
"id": 183,
"number": 0
},
{
"id": 184,
"number": -1
},
{
"id": 185,
"number": 4
},
{
"id": 186,
"number": 20
},
{
"id": 187,
"number": -7
},
{
"id": 188,
"number": -3
},
{
"id": 189,
"number": -2
},
{
"id": 190,
"number": 13
},
{
"id": 191,
"number": -2
},
{
"id": 192,
"number": 7
},
{
"id": 193,
"number": 12
},
{
"id": 194,
"number": 18
},
{
"id": 195,
"number": -13
},
{
"id": 196,
"number": 6
},
{
"id": 197,
"number": 17
},
{
"id": 198,
"number": 12
},
{
"id": 199,
"number": 0
},
{
"id": 200,
"number": 3
},
{
"id": 201,
"number": 0
},
{
"id": 202,
"number": -13
},
{
"id": 203,
"number": 14
},
{
"id": 204,
"number": -1
},
{
"id": 205,
"number": -14
},
{
"id": 206,
"number": -7
},
{
"id": 207,
"number": -13
},
{
"id": 208,
"number": 1
},
{
"id": 209,
"number": -11
},
{
"id": 210,
"number": 10
},
{
"id": 211,
"number": -1
},
{
"id": 212,
"number": -11
},
{
"id": 213,
"number": -9
},
{
"id": 214,
"number": 17
},
{
"id": 215,
"number": 1
},
{
"id": 216,
"number": 13
},
{
"id": 217,
"number": 0
},
{
"id": 218,
"number": 14
},
{
"id": 219,
"number": -2
},
{
"id": 220,
"number": -9
},
{
"id": 221,
"number": 15
},
{
"id": 222,
"number": -9
},
{
"id": 223,
"number": 14
},
{
"id": 224,
"number": -14
},
{
"id": 225,
"number": -6
},
{
"id": 226,
"number": -1
},
{
"id": 227,
"number": -3
},
{
"id": 228,
"number": -12
},
{
"id": 229,
"number": 9
},
{
"id": 230,
"number": 6
},
{
"id": 231,
"number": 4
},
{
"id": 232,
"number": 3
},
{
"id": 233,
"number": 0
},
{
"id": 234,
"number": -4
},
{
"id": 235,
"number": -10
},
{
"id": 236,
"number": 0
},
{
"id": 237,
"number": 17
},
{
"id": 238,
"number": 15
},
{
"id": 239,
"number": 14
},
{
"id": 240,
"number": -12
},
{
"id": 241,
"number": -8
},
{
"id": 242,
"number": 7
},
{
"id": 243,
"number": 16
},
{
"id": 244,
"number": 7
},
{
"id": 245,
"number": -12
},
{
"id": 246,
"number": -4
},
{
"id": 247,
"number": 8
},
{
"id": 248,
"number": 12
},
{
"id": 249,
"number": 9
},
{
"id": 250,
"number": -15
},
{
"id": 251,
"number": 5
},
{
"id": 252,
"number": 14
},
{
"id": 253,
"number": -1
},
{
"id": 254,
"number": 4
},
{
"id": 255,
"number": 10
},
{
"id": 256,
"number": -2
},
{
"id": 257,
"number": -2
},
{
"id": 258,
"number": 6
},
{
"id": 259,
"number": 3
},
{
"id": 260,
"number": 12
},
{
"id": 261,
"number": -6
},
{
"id": 262,
"number": -3
},
{
"id": 263,
"number": -9
},
{
"id": 264,
"number": 1
},
{
"id": 265,
"number": -1
},
{
"id": 266,
"number": 9
},
{
"id": 267,
"number": 2
},
{
"id": 268,
"number": 9
},
{
"id": 269,
"number": 1
},
{
"id": 270,
"number": -7
},
{
"id": 271,
"number": -14
},
{
"id": 272,
"number": -3
},
{
"id": 273,
"number": -15
},
{
"id": 274,
"number": -3
},
{
"id": 275,
"number": -5
},
{
"id": 276,
"number": -11
},
{
"id": 277,
"number": 12
},
{
"id": 278,
"number": 6
},
{
"id": 279,
"number": 1
},
{
"id": 280,
"number": -7
},
{
"id": 281,
"number": 0
},
{
"id": 282,
"number": 1
},
{
"id": 283,
"number": 9
},
{
"id": 284,
"number": 6
},
{
"id": 285,
"number": 5
},
{
"id": 286,
"number": 1
},
{
"id": 287,
"number": 12
},
{
"id": 288,
"number": -11
},
{
"id": 289,
"number": 14
},
{
"id": 290,
"number": 11
},
{
"id": 291,
"number": -15
},
{
"id": 292,
"number": 17
},
{
"id": 293,
"number": 1
},
{
"id": 294,
"number": -1
},
{
"id": 295,
"number": 11
},
{
"id": 296,
"number": 2
},
{
"id": 297,
"number": -6
},
{
"id": 298,
"number": -14
},
{
"id": 299,
"number": 1
},
{
"id": 300,
"number": -8
},
{
"id": 301,
"number": 1
},
{
"id": 302,
"number": 0
},
{
"id": 303,
"number": 5
},
{
"id": 304,
"number": -3
},
{
"id": 305,
"number": -13
},
{
"id": 306,
"number": 7
},
{
"id": 307,
"number": -4
},
{
"id": 308,
"number": -15
},
{
"id": 309,
"number": 7
},
{
"id": 310,
"number": 0
},
{
"id": 311,
"number": -14
},
{
"id": 312,
"number": -3
},
{
"id": 313,
"number": 8
},
{
"id": 314,
"number": 5
},
{
"id": 315,
"number": -8
},
{
"id": 316,
"number": 12
},
{
"id": 317,
"number": 2
},
{
"id": 318,
"number": 17
},
{
"id": 319,
"number": -9
},
{
"id": 320,
"number": 12
},
{
"id": 321,
"number": -5
},
{
"id": 322,
"number": 19
},
{
"id": 323,
"number": -2
},
{
"id": 324,
"number": -10
},
{
"id": 325,
"number": -3
},
{
"id": 326,
"number": 15
},
{
"id": 327,
"number": 4
},
{
"id": 328,
"number": 19
},
{
"id": 329,
"number": 15
},
{
"id": 330,
"number": -6
},
{
"id": 331,
"number": -10
},
{
"id": 332,
"number": 0
},
{
"id": 333,
"number": 1
},
{
"id": 334,
"number": 0
},
{
"id": 335,
"number": 20
},
{
"id": 336,
"number": 6
},
{
"id": 337,
"number": -6
},
{
"id": 338,
"number": 6
},
{
"id": 339,
"number": 7
},
{
"id": 340,
"number": -14
},
{
"id": 341,
"number": 9
},
{
"id": 342,
"number": 13
},
{
"id": 343,
"number": 5
},
{
"id": 344,
"number": -2
},
{
"id": 345,
"number": 18
},
{
"id": 346,
"number": 17
},
{
"id": 347,
"number": 0
},
{
"id": 348,
"number": 15
},
{
"id": 349,
"number": -4
},
{
"id": 350,
"number": 17
},
{
"id": 351,
"number": 5
},
{
"id": 352,
"number": -11
},
{
"id": 353,
"number": 20
},
{
"id": 354,
"number": -4
},
{
"id": 355,
"number": -13
},
{
"id": 356,
"number": -5
},
{
"id": 357,
"number": 6
},
{
"id": 358,
"number": 20
},
{
"id": 359,
"number": -3
},
{
"id": 360,
"number": -8
},
{
"id": 361,
"number": 4
},
{
"id": 362,
"number": 4
},
{
"id": 363,
"number": 14
},
{
"id": 364,
"number": 20
},
{
"id": 365,
"number": -9
},
{
"id": 366,
"number": 7
},
{
"id": 367,
"number": -4
},
{
"id": 368,
"number": 19
},
{
"id": 369,
"number": 9
},
{
"id": 370,
"number": 10
},
{
"id": 371,
"number": 17
},
{
"id": 372,
"number": 9
},
{
"id": 373,
"number": 3
},
{
"id": 374,
"number": -2
},
{
"id": 375,
"number": 16
},
{
"id": 376,
"number": 2
},
{
"id": 377,
"number": -1
},
{
"id": 378,
"number": -10
},
{
"id": 379,
"number": -7
},
{
"id": 380,
"number": -15
},
{
"id": 381,
"number": -1
},
{
"id": 382,
"number": 11
},
{
"id": 383,
"number": 17
},
{
"id": 384,
"number": 2
},
{
"id": 385,
"number": -2
},
{
"id": 386,
"number": 15
},
{
"id": 387,
"number": 5
},
{
"id": 388,
"number": 15
},
{
"id": 389,
"number": 4
},
{
"id": 390,
"number": -15
},
{
"id": 391,
"number": -9
},
{
"id": 392,
"number": 4
},
{
"id": 393,
"number": -8
},
{
"id": 394,
"number": -12
},
{
"id": 395,
"number": 7
},
{
"id": 396,
"number": 20
},
{
"id": 397,
"number": 5
},
{
"id": 398,
"number": 2
},
{
"id": 399,
"number": -6
},
{
"id": 400,
"number": 14
},
{
"id": 401,
"number": 7
},
{
"id": 402,
"number": 10
},
{
"id": 403,
"number": -7
},
{
"id": 404,
"number": 12
},
{
"id": 405,
"number": 5
},
{
"id": 406,
"number": 13
},
{
"id": 407,
"number": -5
},
{
"id": 408,
"number": -6
},
{
"id": 409,
"number": -8
},
{
"id": 410,
"number": -2
},
{
"id": 411,
"number": 13
},
{
"id": 412,
"number": 19
},
{
"id": 413,
"number": 1
},
{
"id": 414,
"number": -7
},
{
"id": 415,
"number": -8
},
{
"id": 416,
"number": -11
},
{
"id": 417,
"number": -15
},
{
"id": 418,
"number": 10
},
{
"id": 419,
"number": -5
},
{
"id": 420,
"number": 17
},
{
"id": 421,
"number": 5
},
{
"id": 422,
"number": 0
},
{
"id": 423,
"number": -14
},
{
"id": 424,
"number": 3
},
{
"id": 425,
"number": 19
},
{
"id": 426,
"number": 1
},
{
"id": 427,
"number": -10
},
{
"id": 428,
"number": -2
},
{
"id": 429,
"number": 10
},
{
"id": 430,
"number": -11
},
{
"id": 431,
"number": -6
},
{
"id": 432,
"number": 2
},
{
"id": 433,
"number": -15
},
{
"id": 434,
"number": 13
},
{
"id": 435,
"number": 11
},
{
"id": 436,
"number": -6
},
{
"id": 437,
"number": -8
},
{
"id": 438,
"number": 2
},
{
"id": 439,
"number": 17
},
{
"id": 440,
"number": -14
},
{
"id": 441,
"number": 9
},
{
"id": 442,
"number": 19
},
{
"id": 443,
"number": -14
},
{
"id": 444,
"number": -14
},
{
"id": 445,
"number": -1
},
{
"id": 446,
"number": -3
},
{
"id": 447,
"number": 17
},
{
"id": 448,
"number": 12
},
{
"id": 449,
"number": -13
},
{
"id": 450,
"number": 17
},
{
"id": 451,
"number": -5
},
{
"id": 452,
"number": 9
},
{
"id": 453,
"number": 11
},
{
"id": 454,
"number": 4
},
{
"id": 455,
"number": 16
},
{
"id": 456,
"number": -3
},
{
"id": 457,
"number": 5
},
{
"id": 458,
"number": 9
},
{
"id": 459,
"number": 15
},
{
"id": 460,
"number": 6
},
{
"id": 461,
"number": 19
},
{
"id": 462,
"number": 19
},
{
"id": 463,
"number": -6
},
{
"id": 464,
"number": -8
},
{
"id": 465,
"number": -8
},
{
"id": 466,
"number": -11
},
{
"id": 467,
"number": 6
},
{
"id": 468,
"number": -7
},
{
"id": 469,
"number": -10
},
{
"id": 470,
"number": 16
},
{
"id": 471,
"number": 13
},
{
"id": 472,
"number": -4
},
{
"id": 473,
"number": 18
},
{
"id": 474,
"number": -9
},
{
"id": 475,
"number": -12
},
{
"id": 476,
"number": -13
},
{
"id": 477,
"number": 7
},
{
"id": 478,
"number": -3
},
{
"id": 479,
"number": -3
},
{
"id": 480,
"number": 8
},
{
"id": 481,
"number": -9
},
{
"id": 482,
"number": 16
},
{
"id": 483,
"number": 12
},
{
"id": 484,
"number": 18
},
{
"id": 485,
"number": 20
},
{
"id": 486,
"number": 16
},
{
"id": 487,
"number": 4
},
{
"id": 488,
"number": 5
},
{
"id": 489,
"number": -14
},
{
"id": 490,
"number": 11
},
{
"id": 491,
"number": -1
},
{
"id": 492,
"number": 6
},
{
"id": 493,
"number": -7
},
{
"id": 494,
"number": -13
},
{
"id": 495,
"number": -2
},
{
"id": 496,
"number": 19
},
{
"id": 497,
"number": 9
},
{
"id": 498,
"number": 2
},
{
"id": 499,
"number": -6
},
{
"id": 500,
"number": -12
},
{
"id": 501,
"number": 10
},
{
"id": 502,
"number": -2
},
{
"id": 503,
"number": -14
},
{
"id": 504,
"number": -15
},
{
"id": 505,
"number": -9
},
{
"id": 506,
"number": -7
},
{
"id": 507,
"number": 3
},
{
"id": 508,
"number": 15
},
{
"id": 509,
"number": 3
},
{
"id": 510,
"number": 20
},
{
"id": 511,
"number": 10
},
{
"id": 512,
"number": 17
},
{
"id": 513,
"number": 20
},
{
"id": 514,
"number": 5
},
{
"id": 515,
"number": -3
},
{
"id": 516,
"number": -1
},
{
"id": 517,
"number": -4
},
{
"id": 518,
"number": 8
},
{
"id": 519,
"number": 1
},
{
"id": 520,
"number": 3
},
{
"id": 521,
"number": 5
},
{
"id": 522,
"number": -3
},
{
"id": 523,
"number": -1
},
{
"id": 524,
"number": 14
},
{
"id": 525,
"number": -2
},
{
"id": 526,
"number": -8
},
{
"id": 527,
"number": 1
},
{
"id": 528,
"number": 12
},
{
"id": 529,
"number": -7
},
{
"id": 530,
"number": 17
},
{
"id": 531,
"number": 12
},
{
"id": 532,
"number": 1
},
{
"id": 533,
"number": 18
},
{
"id": 534,
"number": 18
},
{
"id": 535,
"number": -4
},
{
"id": 536,
"number": 6
},
{
"id": 537,
"number": -15
},
{
"id": 538,
"number": 10
},
{
"id": 539,
"number": -6
},
{
"id": 540,
"number": 11
},
{
"id": 541,
"number": 1
},
{
"id": 542,
"number": -4
},
{
"id": 543,
"number": 7
},
{
"id": 544,
"number": -10
},
{
"id": 545,
"number": -9
},
{
"id": 546,
"number": 8
},
{
"id": 547,
"number": 14
},
{
"id": 548,
"number": 3
},
{
"id": 549,
"number": 5
},
{
"id": 550,
"number": 20
},
{
"id": 551,
"number": -11
},
{
"id": 552,
"number": 0
},
{
"id": 553,
"number": -10
},
{
"id": 554,
"number": 18
},
{
"id": 555,
"number": 8
},
{
"id": 556,
"number": 13
},
{
"id": 557,
"number": 0
},
{
"id": 558,
"number": 8
},
{
"id": 559,
"number": 12
},
{
"id": 560,
"number": -1
},
{
"id": 561,
"number": 3
},
{
"id": 562,
"number": -2
},
{
"id": 563,
"number": 14
},
{
"id": 564,
"number": 20
},
{
"id": 565,
"number": 19
},
{
"id": 566,
"number": 20
},
{
"id": 567,
"number": 4
},
{
"id": 568,
"number": -14
},
{
"id": 569,
"number": -12
},
{
"id": 570,
"number": -8
},
{
"id": 571,
"number": 12
},
{
"id": 572,
"number": -2
},
{
"id": 573,
"number": -4
},
{
"id": 574,
"number": -13
},
{
"id": 575,
"number": -3
},
{
"id": 576,
"number": 20
},
{
"id": 577,
"number": 0
},
{
"id": 578,
"number": 9
},
{
"id": 579,
"number": -15
},
{
"id": 580,
"number": -4
},
{
"id": 581,
"number": 13
},
{
"id": 582,
"number": 19
},
{
"id": 583,
"number": -3
},
{
"id": 584,
"number": -15
},
{
"id": 585,
"number": -4
},
{
"id": 586,
"number": -12
},
{
"id": 587,
"number": -6
},
{
"id": 588,
"number": 17
},
{
"id": 589,
"number": -15
},
{
"id": 590,
"number": -14
},
{
"id": 591,
"number": 13
},
{
"id": 592,
"number": 3
},
{
"id": 593,
"number": -4
},
{
"id": 594,
"number": 0
},
{
"id": 595,
"number": -10
},
{
"id": 596,
"number": 9
},
{
"id": 597,
"number": 9
},
{
"id": 598,
"number": 3
},
{
"id": 599,
"number": 7
},
{
"id": 600,
"number": -6
},
{
"id": 601,
"number": 11
},
{
"id": 602,
"number": -5
},
{
"id": 603,
"number": 6
},
{
"id": 604,
"number": -5
},
{
"id": 605,
"number": 12
},
{
"id": 606,
"number": 8
},
{
"id": 607,
"number": -12
},
{
"id": 608,
"number": -2
},
{
"id": 609,
"number": -10
},
{
"id": 610,
"number": 3
},
{
"id": 611,
"number": -10
},
{
"id": 612,
"number": -14
},
{
"id": 613,
"number": -1
},
{
"id": 614,
"number": 2
},
{
"id": 615,
"number": 12
},
{
"id": 616,
"number": 13
},
{
"id": 617,
"number": 18
},
{
"id": 618,
"number": 14
},
{
"id": 619,
"number": -15
},
{
"id": 620,
"number": 3
},
{
"id": 621,
"number": -1
},
{
"id": 622,
"number": 5
},
{
"id": 623,
"number": 14
},
{
"id": 624,
"number": -10
},
{
"id": 625,
"number": 10
},
{
"id": 626,
"number": 15
},
{
"id": 627,
"number": -10
},
{
"id": 628,
"number": -14
},
{
"id": 629,
"number": 1
},
{
"id": 630,
"number": 9
},
{
"id": 631,
"number": 11
},
{
"id": 632,
"number": -4
},
{
"id": 633,
"number": 19
},
{
"id": 634,
"number": -1
},
{
"id": 635,
"number": 5
},
{
"id": 636,
"number": -1
},
{
"id": 637,
"number": 5
},
{
"id": 638,
"number": -2
},
{
"id": 639,
"number": -12
},
{
"id": 640,
"number": 2
},
{
"id": 641,
"number": 7
},
{
"id": 642,
"number": 17
},
{
"id": 643,
"number": 15
},
{
"id": 644,
"number": 11
},
{
"id": 645,
"number": 8
},
{
"id": 646,
"number": 5
},
{
"id": 647,
"number": -7
},
{
"id": 648,
"number": -5
},
{
"id": 649,
"number": -6
},
{
"id": 650,
"number": -1
},
{
"id": 651,
"number": -2
},
{
"id": 652,
"number": 6
},
{
"id": 653,
"number": -7
},
{
"id": 654,
"number": -1
},
{
"id": 655,
"number": 10
},
{
"id": 656,
"number": -13
},
{
"id": 657,
"number": -13
},
{
"id": 658,
"number": -9
},
{
"id": 659,
"number": 11
},
{
"id": 660,
"number": 10
},
{
"id": 661,
"number": -8
},
{
"id": 662,
"number": 5
},
{
"id": 663,
"number": 1
},
{
"id": 664,
"number": 18
},
{
"id": 665,
"number": 0
},
{
"id": 666,
"number": -14
},
{
"id": 667,
"number": 18
},
{
"id": 668,
"number": -2
},
{
"id": 669,
"number": 17
},
{
"id": 670,
"number": -7
},
{
"id": 671,
"number": 15
},
{
"id": 672,
"number": 19
},
{
"id": 673,
"number": 7
},
{
"id": 674,
"number": 16
},
{
"id": 675,
"number": -15
},
{
"id": 676,
"number": 6
},
{
"id": 677,
"number": -15
},
{
"id": 678,
"number": 7
},
{
"id": 679,
"number": -5
},
{
"id": 680,
"number": -15
},
{
"id": 681,
"number": -4
},
{
"id": 682,
"number": 19
},
{
"id": 683,
"number": -8
},
{
"id": 684,
"number": 14
},
{
"id": 685,
"number": 15
},
{
"id": 686,
"number": -8
},
{
"id": 687,
"number": 0
},
{
"id": 688,
"number": -1
},
{
"id": 689,
"number": 7
},
{
"id": 690,
"number": -2
},
{
"id": 691,
"number": -2
},
{
"id": 692,
"number": 11
},
{
"id": 693,
"number": -15
},
{
"id": 694,
"number": -5
},
{
"id": 695,
"number": 5
},
{
"id": 696,
"number": 9
},
{
"id": 697,
"number": 13
},
{
"id": 698,
"number": -3
},
{
"id": 699,
"number": 2
},
{
"id": 700,
"number": -10
},
{
"id": 701,
"number": 2
},
{
"id": 702,
"number": -11
},
{
"id": 703,
"number": -9
},
{
"id": 704,
"number": 2
},
{
"id": 705,
"number": 15
},
{
"id": 706,
"number": 13
},
{
"id": 707,
"number": 7
},
{
"id": 708,
"number": 11
},
{
"id": 709,
"number": -10
},
{
"id": 710,
"number": -12
},
{
"id": 711,
"number": -14
},
{
"id": 712,
"number": 6
},
{
"id": 713,
"number": -4
},
{
"id": 714,
"number": -2
},
{
"id": 715,
"number": 3
},
{
"id": 716,
"number": 3
},
{
"id": 717,
"number": -13
},
{
"id": 718,
"number": 1
},
{
"id": 719,
"number": -7
},
{
"id": 720,
"number": 9
},
{
"id": 721,
"number": 2
},
{
"id": 722,
"number": 12
},
{
"id": 723,
"number": 2
},
{
"id": 724,
"number": -11
},
{
"id": 725,
"number": -5
},
{
"id": 726,
"number": -14
},
{
"id": 727,
"number": -1
},
{
"id": 728,
"number": 19
},
{
"id": 729,
"number": -12
},
{
"id": 730,
"number": 18
},
{
"id": 731,
"number": 16
},
{
"id": 732,
"number": -11
},
{
"id": 733,
"number": 9
},
{
"id": 734,
"number": 14
},
{
"id": 735,
"number": 20
},
{
"id": 736,
"number": -4
},
{
"id": 737,
"number": 18
},
{
"id": 738,
"number": -12
},
{
"id": 739,
"number": -2
},
{
"id": 740,
"number": -13
},
{
"id": 741,
"number": 9
},
{
"id": 742,
"number": -7
},
{
"id": 743,
"number": 15
},
{
"id": 744,
"number": 2
},
{
"id": 745,
"number": -11
},
{
"id": 746,
"number": 10
},
{
"id": 747,
"number": 4
},
{
"id": 748,
"number": -6
},
{
"id": 749,
"number": -14
},
{
"id": 750,
"number": -1
},
{
"id": 751,
"number": 16
},
{
"id": 752,
"number": 9
},
{
"id": 753,
"number": 20
},
{
"id": 754,
"number": -1
},
{
"id": 755,
"number": -5
},
{
"id": 756,
"number": 6
},
{
"id": 757,
"number": -10
},
{
"id": 758,
"number": 18
},
{
"id": 759,
"number": 20
},
{
"id": 760,
"number": 19
},
{
"id": 761,
"number": -3
},
{
"id": 762,
"number": 3
},
{
"id": 763,
"number": 8
},
{
"id": 764,
"number": 4
},
{
"id": 765,
"number": -6
},
{
"id": 766,
"number": -10
},
{
"id": 767,
"number": -14
},
{
"id": 768,
"number": -7
},
{
"id": 769,
"number": -6
},
{
"id": 770,
"number": 1
},
{
"id": 771,
"number": 3
},
{
"id": 772,
"number": 16
},
{
"id": 773,
"number": 20
},
{
"id": 774,
"number": -6
},
{
"id": 775,
"number": 4
},
{
"id": 776,
"number": 14
},
{
"id": 777,
"number": 6
},
{
"id": 778,
"number": 4
},
{
"id": 779,
"number": 2
},
{
"id": 780,
"number": 8
},
{
"id": 781,
"number": -10
},
{
"id": 782,
"number": 11
},
{
"id": 783,
"number": -4
},
{
"id": 784,
"number": 12
},
{
"id": 785,
"number": 14
},
{
"id": 786,
"number": -4
},
{
"id": 787,
"number": 20
},
{
"id": 788,
"number": -3
},
{
"id": 789,
"number": 19
},
{
"id": 790,
"number": -13
},
{
"id": 791,
"number": 6
},
{
"id": 792,
"number": -6
},
{
"id": 793,
"number": -8
},
{
"id": 794,
"number": 20
},
{
"id": 795,
"number": -8
},
{
"id": 796,
"number": 3
},
{
"id": 797,
"number": 0
},
{
"id": 798,
"number": 15
},
{
"id": 799,
"number": -3
},
{
"id": 800,
"number": 3
},
{
"id": 801,
"number": -7
},
{
"id": 802,
"number": 14
},
{
"id": 803,
"number": 17
},
{
"id": 804,
"number": 16
},
{
"id": 805,
"number": 13
},
{
"id": 806,
"number": -6
},
{
"id": 807,
"number": -10
},
{
"id": 808,
"number": 18
},
{
"id": 809,
"number": -13
},
{
"id": 810,
"number": 18
},
{
"id": 811,
"number": 13
},
{
"id": 812,
"number": 19
},
{
"id": 813,
"number": 16
},
{
"id": 814,
"number": 15
},
{
"id": 815,
"number": 7
},
{
"id": 816,
"number": -12
},
{
"id": 817,
"number": 15
},
{
"id": 818,
"number": 3
},
{
"id": 819,
"number": 2
},
{
"id": 820,
"number": 3
},
{
"id": 821,
"number": -5
},
{
"id": 822,
"number": -8
},
{
"id": 823,
"number": 10
},
{
"id": 824,
"number": 16
},
{
"id": 825,
"number": 19
},
{
"id": 826,
"number": 6
},
{
"id": 827,
"number": 12
},
{
"id": 828,
"number": -7
},
{
"id": 829,
"number": 19
},
{
"id": 830,
"number": 12
},
{
"id": 831,
"number": -1
},
{
"id": 832,
"number": 8
},
{
"id": 833,
"number": 4
},
{
"id": 834,
"number": 5
},
{
"id": 835,
"number": -12
},
{
"id": 836,
"number": 5
},
{
"id": 837,
"number": 10
},
{
"id": 838,
"number": 7
},
{
"id": 839,
"number": 14
},
{
"id": 840,
"number": 13
},
{
"id": 841,
"number": -10
},
{
"id": 842,
"number": -14
},
{
"id": 843,
"number": -6
},
{
"id": 844,
"number": -4
},
{
"id": 845,
"number": -12
},
{
"id": 846,
"number": -8
},
{
"id": 847,
"number": -12
},
{
"id": 848,
"number": 2
},
{
"id": 849,
"number": -9
},
{
"id": 850,
"number": -8
},
{
"id": 851,
"number": 19
},
{
"id": 852,
"number": -13
},
{
"id": 853,
"number": 3
},
{
"id": 854,
"number": 10
},
{
"id": 855,
"number": -8
},
{
"id": 856,
"number": -11
},
{
"id": 857,
"number": 18
},
{
"id": 858,
"number": 3
},
{
"id": 859,
"number": 4
},
{
"id": 860,
"number": -9
},
{
"id": 861,
"number": -6
},
{
"id": 862,
"number": 10
},
{
"id": 863,
"number": 10
},
{
"id": 864,
"number": -9
},
{
"id": 865,
"number": -3
},
{
"id": 866,
"number": 1
},
{
"id": 867,
"number": -1
},
{
"id": 868,
"number": 12
},
{
"id": 869,
"number": 7
},
{
"id": 870,
"number": -12
},
{
"id": 871,
"number": 16
},
{
"id": 872,
"number": 7
},
{
"id": 873,
"number": 4
},
{
"id": 874,
"number": -2
},
{
"id": 875,
"number": 3
},
{
"id": 876,
"number": 12
},
{
"id": 877,
"number": -2
},
{
"id": 878,
"number": -12
},
{
"id": 879,
"number": -10
},
{
"id": 880,
"number": -1
},
{
"id": 881,
"number": -15
},
{
"id": 882,
"number": 10
},
{
"id": 883,
"number": 16
},
{
"id": 884,
"number": 11
},
{
"id": 885,
"number": -14
},
{
"id": 886,
"number": -14
},
{
"id": 887,
"number": 19
},
{
"id": 888,
"number": -13
},
{
"id": 889,
"number": 10
},
{
"id": 890,
"number": 7
},
{
"id": 891,
"number": -15
},
{
"id": 892,
"number": 4
},
{
"id": 893,
"number": 16
},
{
"id": 894,
"number": 3
},
{
"id": 895,
"number": 13
},
{
"id": 896,
"number": -10
},
{
"id": 897,
"number": 3
},
{
"id": 898,
"number": -15
},
{
"id": 899,
"number": 13
},
{
"id": 900,
"number": 14
},
{
"id": 901,
"number": 17
},
{
"id": 902,
"number": 9
},
{
"id": 903,
"number": 12
},
{
"id": 904,
"number": 3
},
{
"id": 905,
"number": 16
},
{
"id": 906,
"number": -15
},
{
"id": 907,
"number": 7
},
{
"id": 908,
"number": 2
},
{
"id": 909,
"number": 7
},
{
"id": 910,
"number": 0
},
{
"id": 911,
"number": 1
},
{
"id": 912,
"number": 10
},
{
"id": 913,
"number": 18
},
{
"id": 914,
"number": -10
},
{
"id": 915,
"number": -10
},
{
"id": 916,
"number": -2
},
{
"id": 917,
"number": -6
},
{
"id": 918,
"number": -7
},
{
"id": 919,
"number": 9
},
{
"id": 920,
"number": -14
},
{
"id": 921,
"number": -11
},
{
"id": 922,
"number": -15
},
{
"id": 923,
"number": 9
},
{
"id": 924,
"number": 4
},
{
"id": 925,
"number": -4
},
{
"id": 926,
"number": 6
},
{
"id": 927,
"number": 6
},
{
"id": 928,
"number": -2
},
{
"id": 929,
"number": 17
},
{
"id": 930,
"number": -9
},
{
"id": 931,
"number": 7
},
{
"id": 932,
"number": 19
},
{
"id": 933,
"number": -10
},
{
"id": 934,
"number": -13
},
{
"id": 935,
"number": -14
},
{
"id": 936,
"number": 12
},
{
"id": 937,
"number": 14
},
{
"id": 938,
"number": -12
},
{
"id": 939,
"number": 12
},
{
"id": 940,
"number": 20
},
{
"id": 941,
"number": -4
},
{
"id": 942,
"number": 19
},
{
"id": 943,
"number": 15
},
{
"id": 944,
"number": -6
},
{
"id": 945,
"number": 7
},
{
"id": 946,
"number": 15
},
{
"id": 947,
"number": -7
},
{
"id": 948,
"number": 6
},
{
"id": 949,
"number": -7
},
{
"id": 950,
"number": 13
},
{
"id": 951,
"number": 14
},
{
"id": 952,
"number": -3
},
{
"id": 953,
"number": -1
},
{
"id": 954,
"number": -10
},
{
"id": 955,
"number": 20
},
{
"id": 956,
"number": -6
},
{
"id": 957,
"number": 20
},
{
"id": 958,
"number": -10
},
{
"id": 959,
"number": 12
},
{
"id": 960,
"number": 17
},
{
"id": 961,
"number": 19
},
{
"id": 962,
"number": -2
},
{
"id": 963,
"number": 17
},
{
"id": 964,
"number": 9
},
{
"id": 965,
"number": 18
},
{
"id": 966,
"number": -3
},
{
"id": 967,
"number": -15
},
{
"id": 968,
"number": 17
},
{
"id": 969,
"number": -9
},
{
"id": 970,
"number": -3
},
{
"id": 971,
"number": 9
},
{
"id": 972,
"number": -9
},
{
"id": 973,
"number": -8
},
{
"id": 974,
"number": -11
},
{
"id": 975,
"number": 14
},
{
"id": 976,
"number": -15
},
{
"id": 977,
"number": 9
},
{
"id": 978,
"number": -10
},
{
"id": 979,
"number": 15
},
{
"id": 980,
"number": 19
},
{
"id": 981,
"number": 7
},
{
"id": 982,
"number": -15
},
{
"id": 983,
"number": 19
},
{
"id": 984,
"number": 5
},
{
"id": 985,
"number": 3
},
{
"id": 986,
"number": 17
},
{
"id": 987,
"number": -4
},
{
"id": 988,
"number": 7
},
{
"id": 989,
"number": -15
},
{
"id": 990,
"number": 1
},
{
"id": 991,
"number": -2
},
{
"id": 992,
"number": 16
},
{
"id": 993,
"number": 16
},
{
"id": 994,
"number": 8
},
{
"id": 995,
"number": 9
},
{
"id": 996,
"number": 19
},
{
"id": 997,
"number": 15
},
{
"id": 998,
"number": -14
},
{
"id": 999,
"number": -9
},
{
"id": 1000,
"number": 3
}
]
</script>
</div>
<div class="svgPatterns">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSIjMzQ4QTc4IiAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzEuNScgY3k9JzEuNScgcj0nMS41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzInIGN5PScyJyByPScyJyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzIuNScgY3k9JzIuNScgcj0nMi41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzMnIGN5PSczJyByPSczJyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzMuNScgY3k9JzMuNScgcj0nMy41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzQnIGN5PSc0JyByPSc0JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzQuNScgY3k9JzQuNScgcj0nNC41JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjZmZmZmZmJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScyJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPScyJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="diagonal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nIzM0OEE3OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScyJyBoZWlnaHQ9JzInIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSczJyBoZWlnaHQ9JzMnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc2JyBoZWlnaHQ9JzYnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc3JyBoZWlnaHQ9JzcnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="dots-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5JyBoZWlnaHQ9JzknIGZpbGw9JyNmZmZmZmYnIC8+Cjwvc3ZnPg==" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PScxJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PScyJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSczJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc0JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc1JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc2JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc3JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc4JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="horizontal-stripe-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMCcgaGVpZ2h0PSc5JyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-2" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScyJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-3" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSczJyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc0JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-5" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc1JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc2JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-7" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc3JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-8" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc4JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="vertical-stripe-9" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjMzQ4QTc4JyAvPgogIDxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPSc5JyBoZWlnaHQ9JzEwJyBmaWxsPScjZmZmZmZmJyAvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="8" width="8" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="crosshatch" patternUnits="userSpaceOnUse" width="8" height="8">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPgogIDxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmYnLz4KICA8cGF0aCBkPSdNMCAwTDggOFpNOCAwTDAgOFonIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2U9JyNhYWEnLz4KPC9zdmc+Cg==" x="0" y="0" width="8" height="8">
</image>
</pattern>
</defs>
</svg>
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="houndstooth" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+CiAgPHBhdGggZD0nTTAgMEw0IDQnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+CiAgPHBhdGggZD0nTTIuNSAwTDUgMi41TDUgNUw5IDlMNSA1TDEwIDVMMTAgMCcgc3Ryb2tlPScjYWFhJyBmaWxsPScjYWFhJyBzdHJva2Utd2lkdGg9JzEnLz4KICA8cGF0aCBkPSdNNSAxMEw1IDcuNUw3LjUgMTAnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="lightstripe" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="smalldot" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgo8cmVjdCB3aWR0aD0nNScgaGVpZ2h0PSc1JyBmaWxsPScjZmZmJy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNjY2MnLz4KPC9zdmc+" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="5" width="5" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="subtle-patch" patternUnits="userSpaceOnUse" width="5" height="5">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9JyMzNDhBNzgnIC8+CiAgPHJlY3QgeD0nMicgeT0nMicgd2lkdGg9JzEnIGhlaWdodD0nMScgZmlsbD0nI2ZmZmZmZicgLz4KPC9zdmc+" x="0" y="0" width="5" height="5">
</image>
</pattern>
</defs>
</svg>
<svg height="49" width="6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="verticalstripe" patternUnits="userSpaceOnUse" width="6" height="49">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2JyBoZWlnaHQ9JzQ5Jz4KICA8cmVjdCB3aWR0aD0nMycgaGVpZ2h0PSc1MCcgZmlsbD0nI2ZmZicvPgogIDxyZWN0IHg9JzMnIHdpZHRoPScxJyBoZWlnaHQ9JzUwJyBmaWxsPScjY2NjJy8+Cjwvc3ZnPgo=" x="0" y="0" width="6" height="49">
</image>
</pattern>
</defs>
</svg>
<svg height="6" width="6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="whitecarbon" patternUnits="userSpaceOnUse" width="6" height="6">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nNicgaGVpZ2h0PSc2Jz4KICA8cmVjdCB3aWR0aD0nNicgaGVpZ2h0PSc2JyBmaWxsPScjZWVlZWVlJy8+CiAgPGcgaWQ9J2MnPgogICAgPHJlY3Qgd2lkdGg9JzMnIGhlaWdodD0nMycgZmlsbD0nI2U2ZTZlNicvPgogICAgPHJlY3QgeT0nMScgd2lkdGg9JzMnIGhlaWdodD0nMicgZmlsbD0nI2Q4ZDhkOCcvPgogIDwvZz4KICA8dXNlIHhsaW5rOmhyZWY9JyNjJyB4PSczJyB5PSczJy8+Cjwvc3ZnPg==" x="0" y="0" width="6" height="6">
</image>
</pattern>
</defs>
</svg>
</div>
</section>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../../js/components/radial-lines-5.js"></script>
<section id="radial-lines-5">
<div class="top-grid">
<div class="intro">
<h1>Radial Lines</h1>
<p>Now you can click on the lines and they do things</p>
<p>And also with completely gratuitous animation</p>
</div>
<div class="controls">
<div class="controls__group">
<label for="startingAngle">Starting angle (-360 to 360)</label> <input id="startingAngle" type="text">
</div>
<div class="controls__group">
<label for="maxAngle">Max angle (0 to 360, probably)</label> <input id="maxAngle" type="text">
</div>
<div class="controls__group">
<label for="dataCount">Gimme this many</label> <input id="dataCount" type="text">
<button id="dataCountFetcher">Gimme gimme gimme</button>
</div>
<div class="controls__group">
<button id="clearer">Clear results before fetching new results</button>
</div>
</div>
</div>
<div id="svgOutput"></div>
<div class="controls">
<div class="controls__group">
<button id="showNeg">Highlight negative changes</button>
<button id="showPos">Highlight positive changes</button>
<button id="reset">Reset</button>
</div>
</div>
<div class="intro">
<p>(data is hidden inside a script tag right here)</p>
<script>
const dataset = [{"id": 1, "number": 16},
{"id": 2, "number": 10},
{"id": 3, "number": -4},
{"id": 4, "number": -13},
{"id": 5, "number": 9},
{"id": 6, "number": 10},
{"id": 7, "number": 1},
{"id": 8, "number": 0},
{"id": 9, "number": 11},
{"id": 10, "number": 11},
{"id": 11, "number": 8},
{"id": 12, "number": -13},
{"id": 13, "number": 0},
{"id": 14, "number": -1},
{"id": 15, "number": -15},
{"id": 16, "number": -1},
{"id": 17, "number": 0},
{"id": 18, "number": -5},
{"id": 19, "number": 18},
{"id": 20, "number": 15},
{"id": 21, "number": 0},
{"id": 22, "number": 20},
{"id": 23, "number": 11},
{"id": 24, "number": 3},
{"id": 25, "number": -11},
{"id": 26, "number": -5},
{"id": 27, "number": 17},
{"id": 28, "number": 2},
{"id": 29, "number": -11},
{"id": 30, "number": -12},
{"id": 31, "number": 19},
{"id": 32, "number": -11},
{"id": 33, "number": 15},
{"id": 34, "number": -13},
{"id": 35, "number": 2},
{"id": 36, "number": -15},
{"id": 37, "number": 18},
{"id": 38, "number": -7},
{"id": 39, "number": 16},
{"id": 40, "number": 17},
{"id": 41, "number": -5},
{"id": 42, "number": 5},
{"id": 43, "number": 4},
{"id": 44, "number": 10},
{"id": 45, "number": 3},
{"id": 46, "number": 18},
{"id": 47, "number": 6},
{"id": 48, "number": 5},
{"id": 49, "number": -1},
{"id": 50, "number": -15},
{"id": 51, "number": -15},
{"id": 52, "number": 16},
{"id": 53, "number": -1},
{"id": 54, "number": 12},
{"id": 55, "number": -12},
{"id": 56, "number": -15},
{"id": 57, "number": 7},
{"id": 58, "number": -1},
{"id": 59, "number": -6},
{"id": 60, "number": 13},
{"id": 61, "number": 12},
{"id": 62, "number": 2},
{"id": 63, "number": -9},
{"id": 64, "number": -5},
{"id": 65, "number": 12},
{"id": 66, "number": 4},
{"id": 67, "number": 1},
{"id": 68, "number": 7},
{"id": 69, "number": 1},
{"id": 70, "number": 16},
{"id": 71, "number": -10},
{"id": 72, "number": -10},
{"id": 73, "number": 12},
{"id": 74, "number": 0},
{"id": 75, "number": -10},
{"id": 76, "number": 3},
{"id": 77, "number": -15},
{"id": 78, "number": 20},
{"id": 79, "number": -7},
{"id": 80, "number": -10},
{"id": 81, "number": 19},
{"id": 82, "number": 11},
{"id": 83, "number": 13},
{"id": 84, "number": -4},
{"id": 85, "number": 18},
{"id": 86, "number": 16},
{"id": 87, "number": 2},
{"id": 88, "number": 8},
{"id": 89, "number": -2},
{"id": 90, "number": 14},
{"id": 91, "number": 15},
{"id": 92, "number": -12},
{"id": 93, "number": -7},
{"id": 94, "number": -1},
{"id": 95, "number": 15},
{"id": 96, "number": 18},
{"id": 97, "number": 18},
{"id": 98, "number": 5},
{"id": 99, "number": -13},
{"id": 100, "number": -6},
{"id": 101, "number": 1},
{"id": 102, "number": 8},
{"id": 103, "number": 10},
{"id": 104, "number": 18},
{"id": 105, "number": 20},
{"id": 106, "number": 17},
{"id": 107, "number": 3},
{"id": 108, "number": -4},
{"id": 109, "number": 1},
{"id": 110, "number": -1},
{"id": 111, "number": 4},
{"id": 112, "number": 3},
{"id": 113, "number": 18},
{"id": 114, "number": -10},
{"id": 115, "number": -10},
{"id": 116, "number": -7},
{"id": 117, "number": 0},
{"id": 118, "number": -14},
{"id": 119, "number": -3},
{"id": 120, "number": 4},
{"id": 121, "number": 8},
{"id": 122, "number": -12},
{"id": 123, "number": -5},
{"id": 124, "number": -12},
{"id": 125, "number": -5},
{"id": 126, "number": -11},
{"id": 127, "number": 3},
{"id": 128, "number": 16},
{"id": 129, "number": -14},
{"id": 130, "number": -14},
{"id": 131, "number": 16},
{"id": 132, "number": -10},
{"id": 133, "number": 15},
{"id": 134, "number": -11},
{"id": 135, "number": -10},
{"id": 136, "number": -7},
{"id": 137, "number": -9},
{"id": 138, "number": 4},
{"id": 139, "number": 11},
{"id": 140, "number": 5},
{"id": 141, "number": -8},
{"id": 142, "number": -10},
{"id": 143, "number": 4},
{"id": 144, "number": 18},
{"id": 145, "number": -5},
{"id": 146, "number": 20},
{"id": 147, "number": -2},
{"id": 148, "number": 11},
{"id": 149, "number": 6},
{"id": 150, "number": 9},
{"id": 151, "number": 13},
{"id": 152, "number": 12},
{"id": 153, "number": 1},
{"id": 154, "number": 20},
{"id": 155, "number": 17},
{"id": 156, "number": -11},
{"id": 157, "number": -5},
{"id": 158, "number": -3},
{"id": 159, "number": -1},
{"id": 160, "number": 15},
{"id": 161, "number": 20},
{"id": 162, "number": 9},
{"id": 163, "number": 5},
{"id": 164, "number": 11},
{"id": 165, "number": -12},
{"id": 166, "number": 17},
{"id": 167, "number": 0},
{"id": 168, "number": -7},
{"id": 169, "number": 12},
{"id": 170, "number": 18},
{"id": 171, "number": -4},
{"id": 172, "number": -5},
{"id": 173, "number": 2},
{"id": 174, "number": -9},
{"id": 175, "number": -3},
{"id": 176, "number": -9},
{"id": 177, "number": 15},
{"id": 178, "number": 8},
{"id": 179, "number": -12},
{"id": 180, "number": -11},
{"id": 181, "number": 18},
{"id": 182, "number": -5},
{"id": 183, "number": 0},
{"id": 184, "number": -1},
{"id": 185, "number": 4},
{"id": 186, "number": 20},
{"id": 187, "number": -7},
{"id": 188, "number": -3},
{"id": 189, "number": -2},
{"id": 190, "number": 13},
{"id": 191, "number": -2},
{"id": 192, "number": 7},
{"id": 193, "number": 12},
{"id": 194, "number": 18},
{"id": 195, "number": -13},
{"id": 196, "number": 6},
{"id": 197, "number": 17},
{"id": 198, "number": 12},
{"id": 199, "number": 0},
{"id": 200, "number": 3},
{"id": 201, "number": 0},
{"id": 202, "number": -13},
{"id": 203, "number": 14},
{"id": 204, "number": -1},
{"id": 205, "number": -14},
{"id": 206, "number": -7},
{"id": 207, "number": -13},
{"id": 208, "number": 1},
{"id": 209, "number": -11},
{"id": 210, "number": 10},
{"id": 211, "number": -1},
{"id": 212, "number": -11},
{"id": 213, "number": -9},
{"id": 214, "number": 17},
{"id": 215, "number": 1},
{"id": 216, "number": 13},
{"id": 217, "number": 0},
{"id": 218, "number": 14},
{"id": 219, "number": -2},
{"id": 220, "number": -9},
{"id": 221, "number": 15},
{"id": 222, "number": -9},
{"id": 223, "number": 14},
{"id": 224, "number": -14},
{"id": 225, "number": -6},
{"id": 226, "number": -1},
{"id": 227, "number": -3},
{"id": 228, "number": -12},
{"id": 229, "number": 9},
{"id": 230, "number": 6},
{"id": 231, "number": 4},
{"id": 232, "number": 3},
{"id": 233, "number": 0},
{"id": 234, "number": -4},
{"id": 235, "number": -10},
{"id": 236, "number": 0},
{"id": 237, "number": 17},
{"id": 238, "number": 15},
{"id": 239, "number": 14},
{"id": 240, "number": -12},
{"id": 241, "number": -8},
{"id": 242, "number": 7},
{"id": 243, "number": 16},
{"id": 244, "number": 7},
{"id": 245, "number": -12},
{"id": 246, "number": -4},
{"id": 247, "number": 8},
{"id": 248, "number": 12},
{"id": 249, "number": 9},
{"id": 250, "number": -15},
{"id": 251, "number": 5},
{"id": 252, "number": 14},
{"id": 253, "number": -1},
{"id": 254, "number": 4},
{"id": 255, "number": 10},
{"id": 256, "number": -2},
{"id": 257, "number": -2},
{"id": 258, "number": 6},
{"id": 259, "number": 3},
{"id": 260, "number": 12},
{"id": 261, "number": -6},
{"id": 262, "number": -3},
{"id": 263, "number": -9},
{"id": 264, "number": 1},
{"id": 265, "number": -1},
{"id": 266, "number": 9},
{"id": 267, "number": 2},
{"id": 268, "number": 9},
{"id": 269, "number": 1},
{"id": 270, "number": -7},
{"id": 271, "number": -14},
{"id": 272, "number": -3},
{"id": 273, "number": -15},
{"id": 274, "number": -3},
{"id": 275, "number": -5},
{"id": 276, "number": -11},
{"id": 277, "number": 12},
{"id": 278, "number": 6},
{"id": 279, "number": 1},
{"id": 280, "number": -7},
{"id": 281, "number": 0},
{"id": 282, "number": 1},
{"id": 283, "number": 9},
{"id": 284, "number": 6},
{"id": 285, "number": 5},
{"id": 286, "number": 1},
{"id": 287, "number": 12},
{"id": 288, "number": -11},
{"id": 289, "number": 14},
{"id": 290, "number": 11},
{"id": 291, "number": -15},
{"id": 292, "number": 17},
{"id": 293, "number": 1},
{"id": 294, "number": -1},
{"id": 295, "number": 11},
{"id": 296, "number": 2},
{"id": 297, "number": -6},
{"id": 298, "number": -14},
{"id": 299, "number": 1},
{"id": 300, "number": -8},
{"id": 301, "number": 1},
{"id": 302, "number": 0},
{"id": 303, "number": 5},
{"id": 304, "number": -3},
{"id": 305, "number": -13},
{"id": 306, "number": 7},
{"id": 307, "number": -4},
{"id": 308, "number": -15},
{"id": 309, "number": 7},
{"id": 310, "number": 0},
{"id": 311, "number": -14},
{"id": 312, "number": -3},
{"id": 313, "number": 8},
{"id": 314, "number": 5},
{"id": 315, "number": -8},
{"id": 316, "number": 12},
{"id": 317, "number": 2},
{"id": 318, "number": 17},
{"id": 319, "number": -9},
{"id": 320, "number": 12},
{"id": 321, "number": -5},
{"id": 322, "number": 19},
{"id": 323, "number": -2},
{"id": 324, "number": -10},
{"id": 325, "number": -3},
{"id": 326, "number": 15},
{"id": 327, "number": 4},
{"id": 328, "number": 19},
{"id": 329, "number": 15},
{"id": 330, "number": -6},
{"id": 331, "number": -10},
{"id": 332, "number": 0},
{"id": 333, "number": 1},
{"id": 334, "number": 0},
{"id": 335, "number": 20},
{"id": 336, "number": 6},
{"id": 337, "number": -6},
{"id": 338, "number": 6},
{"id": 339, "number": 7},
{"id": 340, "number": -14},
{"id": 341, "number": 9},
{"id": 342, "number": 13},
{"id": 343, "number": 5},
{"id": 344, "number": -2},
{"id": 345, "number": 18},
{"id": 346, "number": 17},
{"id": 347, "number": 0},
{"id": 348, "number": 15},
{"id": 349, "number": -4},
{"id": 350, "number": 17},
{"id": 351, "number": 5},
{"id": 352, "number": -11},
{"id": 353, "number": 20},
{"id": 354, "number": -4},
{"id": 355, "number": -13},
{"id": 356, "number": -5},
{"id": 357, "number": 6},
{"id": 358, "number": 20},
{"id": 359, "number": -3},
{"id": 360, "number": -8},
{"id": 361, "number": 4},
{"id": 362, "number": 4},
{"id": 363, "number": 14},
{"id": 364, "number": 20},
{"id": 365, "number": -9},
{"id": 366, "number": 7},
{"id": 367, "number": -4},
{"id": 368, "number": 19},
{"id": 369, "number": 9},
{"id": 370, "number": 10},
{"id": 371, "number": 17},
{"id": 372, "number": 9},
{"id": 373, "number": 3},
{"id": 374, "number": -2},
{"id": 375, "number": 16},
{"id": 376, "number": 2},
{"id": 377, "number": -1},
{"id": 378, "number": -10},
{"id": 379, "number": -7},
{"id": 380, "number": -15},
{"id": 381, "number": -1},
{"id": 382, "number": 11},
{"id": 383, "number": 17},
{"id": 384, "number": 2},
{"id": 385, "number": -2},
{"id": 386, "number": 15},
{"id": 387, "number": 5},
{"id": 388, "number": 15},
{"id": 389, "number": 4},
{"id": 390, "number": -15},
{"id": 391, "number": -9},
{"id": 392, "number": 4},
{"id": 393, "number": -8},
{"id": 394, "number": -12},
{"id": 395, "number": 7},
{"id": 396, "number": 20},
{"id": 397, "number": 5},
{"id": 398, "number": 2},
{"id": 399, "number": -6},
{"id": 400, "number": 14},
{"id": 401, "number": 7},
{"id": 402, "number": 10},
{"id": 403, "number": -7},
{"id": 404, "number": 12},
{"id": 405, "number": 5},
{"id": 406, "number": 13},
{"id": 407, "number": -5},
{"id": 408, "number": -6},
{"id": 409, "number": -8},
{"id": 410, "number": -2},
{"id": 411, "number": 13},
{"id": 412, "number": 19},
{"id": 413, "number": 1},
{"id": 414, "number": -7},
{"id": 415, "number": -8},
{"id": 416, "number": -11},
{"id": 417, "number": -15},
{"id": 418, "number": 10},
{"id": 419, "number": -5},
{"id": 420, "number": 17},
{"id": 421, "number": 5},
{"id": 422, "number": 0},
{"id": 423, "number": -14},
{"id": 424, "number": 3},
{"id": 425, "number": 19},
{"id": 426, "number": 1},
{"id": 427, "number": -10},
{"id": 428, "number": -2},
{"id": 429, "number": 10},
{"id": 430, "number": -11},
{"id": 431, "number": -6},
{"id": 432, "number": 2},
{"id": 433, "number": -15},
{"id": 434, "number": 13},
{"id": 435, "number": 11},
{"id": 436, "number": -6},
{"id": 437, "number": -8},
{"id": 438, "number": 2},
{"id": 439, "number": 17},
{"id": 440, "number": -14},
{"id": 441, "number": 9},
{"id": 442, "number": 19},
{"id": 443, "number": -14},
{"id": 444, "number": -14},
{"id": 445, "number": -1},
{"id": 446, "number": -3},
{"id": 447, "number": 17},
{"id": 448, "number": 12},
{"id": 449, "number": -13},
{"id": 450, "number": 17},
{"id": 451, "number": -5},
{"id": 452, "number": 9},
{"id": 453, "number": 11},
{"id": 454, "number": 4},
{"id": 455, "number": 16},
{"id": 456, "number": -3},
{"id": 457, "number": 5},
{"id": 458, "number": 9},
{"id": 459, "number": 15},
{"id": 460, "number": 6},
{"id": 461, "number": 19},
{"id": 462, "number": 19},
{"id": 463, "number": -6},
{"id": 464, "number": -8},
{"id": 465, "number": -8},
{"id": 466, "number": -11},
{"id": 467, "number": 6},
{"id": 468, "number": -7},
{"id": 469, "number": -10},
{"id": 470, "number": 16},
{"id": 471, "number": 13},
{"id": 472, "number": -4},
{"id": 473, "number": 18},
{"id": 474, "number": -9},
{"id": 475, "number": -12},
{"id": 476, "number": -13},
{"id": 477, "number": 7},
{"id": 478, "number": -3},
{"id": 479, "number": -3},
{"id": 480, "number": 8},
{"id": 481, "number": -9},
{"id": 482, "number": 16},
{"id": 483, "number": 12},
{"id": 484, "number": 18},
{"id": 485, "number": 20},
{"id": 486, "number": 16},
{"id": 487, "number": 4},
{"id": 488, "number": 5},
{"id": 489, "number": -14},
{"id": 490, "number": 11},
{"id": 491, "number": -1},
{"id": 492, "number": 6},
{"id": 493, "number": -7},
{"id": 494, "number": -13},
{"id": 495, "number": -2},
{"id": 496, "number": 19},
{"id": 497, "number": 9},
{"id": 498, "number": 2},
{"id": 499, "number": -6},
{"id": 500, "number": -12},
{"id": 501, "number": 10},
{"id": 502, "number": -2},
{"id": 503, "number": -14},
{"id": 504, "number": -15},
{"id": 505, "number": -9},
{"id": 506, "number": -7},
{"id": 507, "number": 3},
{"id": 508, "number": 15},
{"id": 509, "number": 3},
{"id": 510, "number": 20},
{"id": 511, "number": 10},
{"id": 512, "number": 17},
{"id": 513, "number": 20},
{"id": 514, "number": 5},
{"id": 515, "number": -3},
{"id": 516, "number": -1},
{"id": 517, "number": -4},
{"id": 518, "number": 8},
{"id": 519, "number": 1},
{"id": 520, "number": 3},
{"id": 521, "number": 5},
{"id": 522, "number": -3},
{"id": 523, "number": -1},
{"id": 524, "number": 14},
{"id": 525, "number": -2},
{"id": 526, "number": -8},
{"id": 527, "number": 1},
{"id": 528, "number": 12},
{"id": 529, "number": -7},
{"id": 530, "number": 17},
{"id": 531, "number": 12},
{"id": 532, "number": 1},
{"id": 533, "number": 18},
{"id": 534, "number": 18},
{"id": 535, "number": -4},
{"id": 536, "number": 6},
{"id": 537, "number": -15},
{"id": 538, "number": 10},
{"id": 539, "number": -6},
{"id": 540, "number": 11},
{"id": 541, "number": 1},
{"id": 542, "number": -4},
{"id": 543, "number": 7},
{"id": 544, "number": -10},
{"id": 545, "number": -9},
{"id": 546, "number": 8},
{"id": 547, "number": 14},
{"id": 548, "number": 3},
{"id": 549, "number": 5},
{"id": 550, "number": 20},
{"id": 551, "number": -11},
{"id": 552, "number": 0},
{"id": 553, "number": -10},
{"id": 554, "number": 18},
{"id": 555, "number": 8},
{"id": 556, "number": 13},
{"id": 557, "number": 0},
{"id": 558, "number": 8},
{"id": 559, "number": 12},
{"id": 560, "number": -1},
{"id": 561, "number": 3},
{"id": 562, "number": -2},
{"id": 563, "number": 14},
{"id": 564, "number": 20},
{"id": 565, "number": 19},
{"id": 566, "number": 20},
{"id": 567, "number": 4},
{"id": 568, "number": -14},
{"id": 569, "number": -12},
{"id": 570, "number": -8},
{"id": 571, "number": 12},
{"id": 572, "number": -2},
{"id": 573, "number": -4},
{"id": 574, "number": -13},
{"id": 575, "number": -3},
{"id": 576, "number": 20},
{"id": 577, "number": 0},
{"id": 578, "number": 9},
{"id": 579, "number": -15},
{"id": 580, "number": -4},
{"id": 581, "number": 13},
{"id": 582, "number": 19},
{"id": 583, "number": -3},
{"id": 584, "number": -15},
{"id": 585, "number": -4},
{"id": 586, "number": -12},
{"id": 587, "number": -6},
{"id": 588, "number": 17},
{"id": 589, "number": -15},
{"id": 590, "number": -14},
{"id": 591, "number": 13},
{"id": 592, "number": 3},
{"id": 593, "number": -4},
{"id": 594, "number": 0},
{"id": 595, "number": -10},
{"id": 596, "number": 9},
{"id": 597, "number": 9},
{"id": 598, "number": 3},
{"id": 599, "number": 7},
{"id": 600, "number": -6},
{"id": 601, "number": 11},
{"id": 602, "number": -5},
{"id": 603, "number": 6},
{"id": 604, "number": -5},
{"id": 605, "number": 12},
{"id": 606, "number": 8},
{"id": 607, "number": -12},
{"id": 608, "number": -2},
{"id": 609, "number": -10},
{"id": 610, "number": 3},
{"id": 611, "number": -10},
{"id": 612, "number": -14},
{"id": 613, "number": -1},
{"id": 614, "number": 2},
{"id": 615, "number": 12},
{"id": 616, "number": 13},
{"id": 617, "number": 18},
{"id": 618, "number": 14},
{"id": 619, "number": -15},
{"id": 620, "number": 3},
{"id": 621, "number": -1},
{"id": 622, "number": 5},
{"id": 623, "number": 14},
{"id": 624, "number": -10},
{"id": 625, "number": 10},
{"id": 626, "number": 15},
{"id": 627, "number": -10},
{"id": 628, "number": -14},
{"id": 629, "number": 1},
{"id": 630, "number": 9},
{"id": 631, "number": 11},
{"id": 632, "number": -4},
{"id": 633, "number": 19},
{"id": 634, "number": -1},
{"id": 635, "number": 5},
{"id": 636, "number": -1},
{"id": 637, "number": 5},
{"id": 638, "number": -2},
{"id": 639, "number": -12},
{"id": 640, "number": 2},
{"id": 641, "number": 7},
{"id": 642, "number": 17},
{"id": 643, "number": 15},
{"id": 644, "number": 11},
{"id": 645, "number": 8},
{"id": 646, "number": 5},
{"id": 647, "number": -7},
{"id": 648, "number": -5},
{"id": 649, "number": -6},
{"id": 650, "number": -1},
{"id": 651, "number": -2},
{"id": 652, "number": 6},
{"id": 653, "number": -7},
{"id": 654, "number": -1},
{"id": 655, "number": 10},
{"id": 656, "number": -13},
{"id": 657, "number": -13},
{"id": 658, "number": -9},
{"id": 659, "number": 11},
{"id": 660, "number": 10},
{"id": 661, "number": -8},
{"id": 662, "number": 5},
{"id": 663, "number": 1},
{"id": 664, "number": 18},
{"id": 665, "number": 0},
{"id": 666, "number": -14},
{"id": 667, "number": 18},
{"id": 668, "number": -2},
{"id": 669, "number": 17},
{"id": 670, "number": -7},
{"id": 671, "number": 15},
{"id": 672, "number": 19},
{"id": 673, "number": 7},
{"id": 674, "number": 16},
{"id": 675, "number": -15},
{"id": 676, "number": 6},
{"id": 677, "number": -15},
{"id": 678, "number": 7},
{"id": 679, "number": -5},
{"id": 680, "number": -15},
{"id": 681, "number": -4},
{"id": 682, "number": 19},
{"id": 683, "number": -8},
{"id": 684, "number": 14},
{"id": 685, "number": 15},
{"id": 686, "number": -8},
{"id": 687, "number": 0},
{"id": 688, "number": -1},
{"id": 689, "number": 7},
{"id": 690, "number": -2},
{"id": 691, "number": -2},
{"id": 692, "number": 11},
{"id": 693, "number": -15},
{"id": 694, "number": -5},
{"id": 695, "number": 5},
{"id": 696, "number": 9},
{"id": 697, "number": 13},
{"id": 698, "number": -3},
{"id": 699, "number": 2},
{"id": 700, "number": -10},
{"id": 701, "number": 2},
{"id": 702, "number": -11},
{"id": 703, "number": -9},
{"id": 704, "number": 2},
{"id": 705, "number": 15},
{"id": 706, "number": 13},
{"id": 707, "number": 7},
{"id": 708, "number": 11},
{"id": 709, "number": -10},
{"id": 710, "number": -12},
{"id": 711, "number": -14},
{"id": 712, "number": 6},
{"id": 713, "number": -4},
{"id": 714, "number": -2},
{"id": 715, "number": 3},
{"id": 716, "number": 3},
{"id": 717, "number": -13},
{"id": 718, "number": 1},
{"id": 719, "number": -7},
{"id": 720, "number": 9},
{"id": 721, "number": 2},
{"id": 722, "number": 12},
{"id": 723, "number": 2},
{"id": 724, "number": -11},
{"id": 725, "number": -5},
{"id": 726, "number": -14},
{"id": 727, "number": -1},
{"id": 728, "number": 19},
{"id": 729, "number": -12},
{"id": 730, "number": 18},
{"id": 731, "number": 16},
{"id": 732, "number": -11},
{"id": 733, "number": 9},
{"id": 734, "number": 14},
{"id": 735, "number": 20},
{"id": 736, "number": -4},
{"id": 737, "number": 18},
{"id": 738, "number": -12},
{"id": 739, "number": -2},
{"id": 740, "number": -13},
{"id": 741, "number": 9},
{"id": 742, "number": -7},
{"id": 743, "number": 15},
{"id": 744, "number": 2},
{"id": 745, "number": -11},
{"id": 746, "number": 10},
{"id": 747, "number": 4},
{"id": 748, "number": -6},
{"id": 749, "number": -14},
{"id": 750, "number": -1},
{"id": 751, "number": 16},
{"id": 752, "number": 9},
{"id": 753, "number": 20},
{"id": 754, "number": -1},
{"id": 755, "number": -5},
{"id": 756, "number": 6},
{"id": 757, "number": -10},
{"id": 758, "number": 18},
{"id": 759, "number": 20},
{"id": 760, "number": 19},
{"id": 761, "number": -3},
{"id": 762, "number": 3},
{"id": 763, "number": 8},
{"id": 764, "number": 4},
{"id": 765, "number": -6},
{"id": 766, "number": -10},
{"id": 767, "number": -14},
{"id": 768, "number": -7},
{"id": 769, "number": -6},
{"id": 770, "number": 1},
{"id": 771, "number": 3},
{"id": 772, "number": 16},
{"id": 773, "number": 20},
{"id": 774, "number": -6},
{"id": 775, "number": 4},
{"id": 776, "number": 14},
{"id": 777, "number": 6},
{"id": 778, "number": 4},
{"id": 779, "number": 2},
{"id": 780, "number": 8},
{"id": 781, "number": -10},
{"id": 782, "number": 11},
{"id": 783, "number": -4},
{"id": 784, "number": 12},
{"id": 785, "number": 14},
{"id": 786, "number": -4},
{"id": 787, "number": 20},
{"id": 788, "number": -3},
{"id": 789, "number": 19},
{"id": 790, "number": -13},
{"id": 791, "number": 6},
{"id": 792, "number": -6},
{"id": 793, "number": -8},
{"id": 794, "number": 20},
{"id": 795, "number": -8},
{"id": 796, "number": 3},
{"id": 797, "number": 0},
{"id": 798, "number": 15},
{"id": 799, "number": -3},
{"id": 800, "number": 3},
{"id": 801, "number": -7},
{"id": 802, "number": 14},
{"id": 803, "number": 17},
{"id": 804, "number": 16},
{"id": 805, "number": 13},
{"id": 806, "number": -6},
{"id": 807, "number": -10},
{"id": 808, "number": 18},
{"id": 809, "number": -13},
{"id": 810, "number": 18},
{"id": 811, "number": 13},
{"id": 812, "number": 19},
{"id": 813, "number": 16},
{"id": 814, "number": 15},
{"id": 815, "number": 7},
{"id": 816, "number": -12},
{"id": 817, "number": 15},
{"id": 818, "number": 3},
{"id": 819, "number": 2},
{"id": 820, "number": 3},
{"id": 821, "number": -5},
{"id": 822, "number": -8},
{"id": 823, "number": 10},
{"id": 824, "number": 16},
{"id": 825, "number": 19},
{"id": 826, "number": 6},
{"id": 827, "number": 12},
{"id": 828, "number": -7},
{"id": 829, "number": 19},
{"id": 830, "number": 12},
{"id": 831, "number": -1},
{"id": 832, "number": 8},
{"id": 833, "number": 4},
{"id": 834, "number": 5},
{"id": 835, "number": -12},
{"id": 836, "number": 5},
{"id": 837, "number": 10},
{"id": 838, "number": 7},
{"id": 839, "number": 14},
{"id": 840, "number": 13},
{"id": 841, "number": -10},
{"id": 842, "number": -14},
{"id": 843, "number": -6},
{"id": 844, "number": -4},
{"id": 845, "number": -12},
{"id": 846, "number": -8},
{"id": 847, "number": -12},
{"id": 848, "number": 2},
{"id": 849, "number": -9},
{"id": 850, "number": -8},
{"id": 851, "number": 19},
{"id": 852, "number": -13},
{"id": 853, "number": 3},
{"id": 854, "number": 10},
{"id": 855, "number": -8},
{"id": 856, "number": -11},
{"id": 857, "number": 18},
{"id": 858, "number": 3},
{"id": 859, "number": 4},
{"id": 860, "number": -9},
{"id": 861, "number": -6},
{"id": 862, "number": 10},
{"id": 863, "number": 10},
{"id": 864, "number": -9},
{"id": 865, "number": -3},
{"id": 866, "number": 1},
{"id": 867, "number": -1},
{"id": 868, "number": 12},
{"id": 869, "number": 7},
{"id": 870, "number": -12},
{"id": 871, "number": 16},
{"id": 872, "number": 7},
{"id": 873, "number": 4},
{"id": 874, "number": -2},
{"id": 875, "number": 3},
{"id": 876, "number": 12},
{"id": 877, "number": -2},
{"id": 878, "number": -12},
{"id": 879, "number": -10},
{"id": 880, "number": -1},
{"id": 881, "number": -15},
{"id": 882, "number": 10},
{"id": 883, "number": 16},
{"id": 884, "number": 11},
{"id": 885, "number": -14},
{"id": 886, "number": -14},
{"id": 887, "number": 19},
{"id": 888, "number": -13},
{"id": 889, "number": 10},
{"id": 890, "number": 7},
{"id": 891, "number": -15},
{"id": 892, "number": 4},
{"id": 893, "number": 16},
{"id": 894, "number": 3},
{"id": 895, "number": 13},
{"id": 896, "number": -10},
{"id": 897, "number": 3},
{"id": 898, "number": -15},
{"id": 899, "number": 13},
{"id": 900, "number": 14},
{"id": 901, "number": 17},
{"id": 902, "number": 9},
{"id": 903, "number": 12},
{"id": 904, "number": 3},
{"id": 905, "number": 16},
{"id": 906, "number": -15},
{"id": 907, "number": 7},
{"id": 908, "number": 2},
{"id": 909, "number": 7},
{"id": 910, "number": 0},
{"id": 911, "number": 1},
{"id": 912, "number": 10},
{"id": 913, "number": 18},
{"id": 914, "number": -10},
{"id": 915, "number": -10},
{"id": 916, "number": -2},
{"id": 917, "number": -6},
{"id": 918, "number": -7},
{"id": 919, "number": 9},
{"id": 920, "number": -14},
{"id": 921, "number": -11},
{"id": 922, "number": -15},
{"id": 923, "number": 9},
{"id": 924, "number": 4},
{"id": 925, "number": -4},
{"id": 926, "number": 6},
{"id": 927, "number": 6},
{"id": 928, "number": -2},
{"id": 929, "number": 17},
{"id": 930, "number": -9},
{"id": 931, "number": 7},
{"id": 932, "number": 19},
{"id": 933, "number": -10},
{"id": 934, "number": -13},
{"id": 935, "number": -14},
{"id": 936, "number": 12},
{"id": 937, "number": 14},
{"id": 938, "number": -12},
{"id": 939, "number": 12},
{"id": 940, "number": 20},
{"id": 941, "number": -4},
{"id": 942, "number": 19},
{"id": 943, "number": 15},
{"id": 944, "number": -6},
{"id": 945, "number": 7},
{"id": 946, "number": 15},
{"id": 947, "number": -7},
{"id": 948, "number": 6},
{"id": 949, "number": -7},
{"id": 950, "number": 13},
{"id": 951, "number": 14},
{"id": 952, "number": -3},
{"id": 953, "number": -1},
{"id": 954, "number": -10},
{"id": 955, "number": 20},
{"id": 956, "number": -6},
{"id": 957, "number": 20},
{"id": 958, "number": -10},
{"id": 959, "number": 12},
{"id": 960, "number": 17},
{"id": 961, "number": 19},
{"id": 962, "number": -2},
{"id": 963, "number": 17},
{"id": 964, "number": 9},
{"id": 965, "number": 18},
{"id": 966, "number": -3},
{"id": 967, "number": -15},
{"id": 968, "number": 17},
{"id": 969, "number": -9},
{"id": 970, "number": -3},
{"id": 971, "number": 9},
{"id": 972, "number": -9},
{"id": 973, "number": -8},
{"id": 974, "number": -11},
{"id": 975, "number": 14},
{"id": 976, "number": -15},
{"id": 977, "number": 9},
{"id": 978, "number": -10},
{"id": 979, "number": 15},
{"id": 980, "number": 19},
{"id": 981, "number": 7},
{"id": 982, "number": -15},
{"id": 983, "number": 19},
{"id": 984, "number": 5},
{"id": 985, "number": 3},
{"id": 986, "number": 17},
{"id": 987, "number": -4},
{"id": 988, "number": 7},
{"id": 989, "number": -15},
{"id": 990, "number": 1},
{"id": 991, "number": -2},
{"id": 992, "number": 16},
{"id": 993, "number": 16},
{"id": 994, "number": 8},
{"id": 995, "number": 9},
{"id": 996, "number": 19},
{"id": 997, "number": 15},
{"id": 998, "number": -14},
{"id": 999, "number": -9},
{"id": 1000, "number": 3}]
</script>
</div>
{{> @svg-patterns-green-and-white }}
</section>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{{ path '/js/components/radial-lines-5.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("radial-lines-5 active");
// line coordinate helper functions
const pi = Math.PI;
function getXcoord(angle, length) {
return length * Math.cos(angle * (pi / 180));
}
function getYcoord(angle, length) {
return length * Math.sin(angle * (pi / 180));
}
// config
const width = 800;
const height = 800;
const margin = {
"top": 10,
"bottom": 10,
"left": 10,
"right": 10
}
const clearer = document.querySelector("#clearer");
clearer.addEventListener('click', () => {
document.querySelector("#svgOutput").removeChild(document.querySelector('svg'));
});
const maxAngle = document.querySelector('#maxAngle');
const dataFetcher = document.querySelector('#dataCountFetcher');
const dataCount = document.querySelector('#dataCount');
dataFetcher.addEventListener('click', function () {
console.log(dataCount.value);
// data input and massaging
let datasetArray = [];
datasetArray.push({
id: 1,
count: 600 + dataset[0].number,
change: dataset[0].number
})
for (let i = 1; i < dataCount.value; i++) {
datasetArray.push({
id: dataset[i].id,
count: datasetArray[i - 1].count + dataset[i].number,
change: dataset[i].number
})
}
// main svg output
let svg = d3.select("#svgOutput")
.append("svg")
.attr("viewBox", [0, 0, width, height])
.attr("preserveAspectRatio", "xMidYMid meet");
console.dir(svg);
// colorable background rectangle
svg.append('rect')
.attr('class', 'bg')
.attr('x', margin.left)
.attr('y', margin.top)
.attr('height', height - margin.bottom - margin.top)
.attr('width', width - margin.right - margin.left)
.attr('stroke', 'darkslategray')
.attr('stroke-width', '0.25')
.attr('fill', '#ffffff');
// scales
const lengthScale = d3.scaleLinear()
.domain([0, d3.max(datasetArray, (d) => d.count)])
.range([0, (height - margin.top - margin.bottom) / 2]);
console.log(document.querySelector('#maxAngle').value);
const startingAngleValue = document.querySelector('#startingAngle').value;
const maxAngleValue = document.querySelector('#maxAngle').value;
const angleScale = d3.scaleLinear()
.domain([0, d3.max(datasetArray, (d) => d.id)])
.range([(startingAngleValue ? startingAngleValue - 180 : -180), (maxAngleValue ? maxAngleValue - 180 : 180)]);
// establish the center of the chart
const centerX = (width - margin.left - margin.right) / 2 + margin.left;
const centerY = (height - margin.top - margin.bottom) / 2 + margin.top;
const t = d3.transition()
.duration(5000)
.ease(d3.easeCircleInOut);
// draw some lines, yeah!
svg.selectAll('line.datapt')
.data(datasetArray)
.enter()
.append('line')
.attr('class', (d) => (d.change > 0) ? 'datapt datapt--positive' : 'datapt datapt--negative')
.attr('x1', centerX)
.attr('y1', centerY)
.attr('x2', centerX)
.attr('y2', centerY)
.attr('data-count', (d) => d.count)
.attr('data-id', (d) => d.id)
.on('click', lineClickHandler)
.transition(t)
.delay((d, i) => i * 20)
.attr('x2', (d, i) => {
return getXcoord(angleScale(d.id), lengthScale(d.count)) + centerX;
})
.attr('y2', (d, i) => {
return getYcoord(angleScale(d.id), lengthScale(d.count)) + centerY;
});
function lineClickHandler(d, i) {
console.log("click handled");
if (svg.select('.selected').size() > 0) {
svg.selectAll('.selected').classed('selected', false);
}
if (svg.select('.activated').size() > 0) {
svg.selectAll('.activated').classed('activated', false);
}
d3.select(this).classed('activated', true);
svg.select('text.bigLabel').remove();
svg.append('text')
.attr("x", margin.left + 8)
.attr("y", margin.top + 24)
.attr('class', 'bigLabel')
.style('font-family', 'Verdana, sans-serif')
.style('font-size', '1rem')
.style("fill", 'darkslategray')
.text(`id: ${d.id} / count: ${d.count}`);
svg.select('rect.bg')
.style('fill', d.property)
}
// console.log(getXcoord(180, 1));
// console.log(getYcoord(180, 1));
console.log(getXcoord(180, 500));
console.log(getYcoord(180, 500));
// the center will not hold
svg.append('circle')
.attr('cx', centerX)
.attr('cy', centerY)
.attr('r', '25')
.attr('stroke', 'darkslategray')
.attr('stroke-width', '0.25')
.attr('stroke-opacity', '0.25')
.attr('fill', 'white');
// let us make it do tricks
const negButton = document.querySelector('#showNeg');
const posButton = document.querySelector('#showPos');
const reset = document.querySelector('#reset');
negButton.addEventListener('click', function () {
console.log("negatives");
if (svg.select('.selected').size() > 0) {
svg.selectAll('.selected').classed('selected', false);
}
svg.selectAll('line.datapt--negative')
.classed('selected', true);
})
posButton.addEventListener('click', function () {
console.log("positives");
if (svg.select('.selected').size() > 0) {
svg.selectAll('.selected').classed('selected', false);
}
svg.selectAll('line.datapt--positive')
.classed('selected', true);
})
reset.addEventListener('click', function () {
if (svg.select('.selected').size() > 0) {
svg.selectAll('.selected').classed('selected', false);
}
})
})
});
})();
#radial-lines-5 {
padding: 1rem;
margin: 1rem;
border: 2px dotted fuchsia;
background-color: gainsboro;
font-family: Verdana, sans-serif;
svg {
background-color: aliceblue;
}
#svgOutput {
max-width: 600px;
margin: auto;
}
.top-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
}
.controls {
margin: 2rem 0;
display: grid;
grid-gap: 1rem;
button {
padding: 0.25rem;
border-radius: 0.25rem;
border-width: 1px;
font-family: "Helvetica Neue", sans-serif;
font-size: 0.875rem;
background-color: aliceblue;
}
}
// just trying to hide these from view
.svgPatterns {
height: 0;
width: 0;
overflow: hidden;
}
.datapt {
fill: none;
transition: stroke-opacity 0.25s ease-out, stroke-width 0.5s ease-in-out;
&.datapt--positive {
stroke: green;
stroke-width: 4;
stroke-opacity: 0.2;
stroke-linecap: round;
&:hover {
stroke-opacity: 1;
}
&.selected {
stroke-width: 8;
stroke-opacity: 0.5;
}
&.activated {
stroke: chartreuse;
stroke-width: 12;
stroke-opacity: 1;
}
}
&.datapt--negative {
stroke: crimson;
stroke-width: 4;
stroke-opacity: 0.2;
stroke-linecap: round;
&:hover {
stroke-opacity: 1;
}
&.selected {
stroke-width: 8;
stroke-opacity: 0.5;
}
&.activated {
stroke: deeppink;
stroke-width: 12;
stroke-opacity: 1;
}
}
}
}
No notes defined.