<section id="radial-lines-2">
    <h1>Radial Lines</h1>
    <p>I mean I've seen this kind of thing before and I wanted to see if I could do it from scratch, as it were</p>

    <div class="controls">
        <button id="showNeg">Highlight negative changes</button>
        <button id="showPos">Highlight positive changes</button>
        <button id="reset">Reset</button>
    </div>

    <div id="svgOutput"></div>

    <div class="intro">
        <p>(data is hidden inside a script tag right here)</p>
        <script>
            const dataset = [{
                    "id": 1,
                    "number": 13
                },
                {
                    "id": 2,
                    "number": -13
                },
                {
                    "id": 3,
                    "number": 6
                },
                {
                    "id": 4,
                    "number": -14
                },
                {
                    "id": 5,
                    "number": 11
                },
                {
                    "id": 6,
                    "number": -11
                },
                {
                    "id": 7,
                    "number": 14
                },
                {
                    "id": 8,
                    "number": 20
                },
                {
                    "id": 9,
                    "number": 17
                },
                {
                    "id": 10,
                    "number": 8
                },
                {
                    "id": 11,
                    "number": 7
                },
                {
                    "id": 12,
                    "number": 2
                },
                {
                    "id": 13,
                    "number": 4
                },
                {
                    "id": 14,
                    "number": -12
                },
                {
                    "id": 15,
                    "number": 14
                },
                {
                    "id": 16,
                    "number": 1
                },
                {
                    "id": 17,
                    "number": -4
                },
                {
                    "id": 18,
                    "number": 3
                },
                {
                    "id": 19,
                    "number": 4
                },
                {
                    "id": 20,
                    "number": 5
                },
                {
                    "id": 21,
                    "number": -6
                },
                {
                    "id": 22,
                    "number": -5
                },
                {
                    "id": 23,
                    "number": -9
                },
                {
                    "id": 24,
                    "number": 19
                },
                {
                    "id": 25,
                    "number": 6
                },
                {
                    "id": 26,
                    "number": -10
                },
                {
                    "id": 27,
                    "number": -10
                },
                {
                    "id": 28,
                    "number": 10
                },
                {
                    "id": 29,
                    "number": 2
                },
                {
                    "id": 30,
                    "number": 11
                },
                {
                    "id": 31,
                    "number": 11
                },
                {
                    "id": 32,
                    "number": 17
                },
                {
                    "id": 33,
                    "number": -10
                },
                {
                    "id": 34,
                    "number": 1
                },
                {
                    "id": 35,
                    "number": 3
                },
                {
                    "id": 36,
                    "number": -15
                },
                {
                    "id": 37,
                    "number": 20
                },
                {
                    "id": 38,
                    "number": 11
                },
                {
                    "id": 39,
                    "number": 0
                },
                {
                    "id": 40,
                    "number": 9
                },
                {
                    "id": 41,
                    "number": 18
                },
                {
                    "id": 42,
                    "number": 4
                },
                {
                    "id": 43,
                    "number": 6
                },
                {
                    "id": 44,
                    "number": 4
                },
                {
                    "id": 45,
                    "number": -15
                },
                {
                    "id": 46,
                    "number": 5
                },
                {
                    "id": 47,
                    "number": 0
                },
                {
                    "id": 48,
                    "number": -10
                },
                {
                    "id": 49,
                    "number": 8
                },
                {
                    "id": 50,
                    "number": 11
                },
                {
                    "id": 51,
                    "number": 19
                },
                {
                    "id": 52,
                    "number": 7
                },
                {
                    "id": 53,
                    "number": 7
                },
                {
                    "id": 54,
                    "number": 13
                },
                {
                    "id": 55,
                    "number": 3
                },
                {
                    "id": 56,
                    "number": 15
                },
                {
                    "id": 57,
                    "number": 10
                },
                {
                    "id": 58,
                    "number": -3
                },
                {
                    "id": 59,
                    "number": 7
                },
                {
                    "id": 60,
                    "number": -15
                },
                {
                    "id": 61,
                    "number": 7
                },
                {
                    "id": 62,
                    "number": 15
                },
                {
                    "id": 63,
                    "number": 9
                },
                {
                    "id": 64,
                    "number": -5
                },
                {
                    "id": 65,
                    "number": -9
                },
                {
                    "id": 66,
                    "number": 2
                },
                {
                    "id": 67,
                    "number": 11
                },
                {
                    "id": 68,
                    "number": 12
                },
                {
                    "id": 69,
                    "number": -4
                },
                {
                    "id": 70,
                    "number": -8
                },
                {
                    "id": 71,
                    "number": 8
                },
                {
                    "id": 72,
                    "number": 11
                },
                {
                    "id": 73,
                    "number": -14
                },
                {
                    "id": 74,
                    "number": -14
                },
                {
                    "id": 75,
                    "number": -9
                },
                {
                    "id": 76,
                    "number": 20
                },
                {
                    "id": 77,
                    "number": -11
                },
                {
                    "id": 78,
                    "number": 10
                },
                {
                    "id": 79,
                    "number": -12
                },
                {
                    "id": 80,
                    "number": -10
                },
                {
                    "id": 81,
                    "number": -9
                },
                {
                    "id": 82,
                    "number": -11
                },
                {
                    "id": 83,
                    "number": -6
                },
                {
                    "id": 84,
                    "number": 0
                },
                {
                    "id": 85,
                    "number": 7
                },
                {
                    "id": 86,
                    "number": 6
                },
                {
                    "id": 87,
                    "number": -9
                },
                {
                    "id": 88,
                    "number": -15
                },
                {
                    "id": 89,
                    "number": 5
                },
                {
                    "id": 90,
                    "number": 14
                },
                {
                    "id": 91,
                    "number": -4
                },
                {
                    "id": 92,
                    "number": 4
                },
                {
                    "id": 93,
                    "number": 12
                },
                {
                    "id": 94,
                    "number": 1
                },
                {
                    "id": 95,
                    "number": -9
                },
                {
                    "id": 96,
                    "number": 17
                },
                {
                    "id": 97,
                    "number": 16
                },
                {
                    "id": 98,
                    "number": 16
                },
                {
                    "id": 99,
                    "number": -7
                },
                {
                    "id": 100,
                    "number": 3
                },
                {
                    "id": 101,
                    "number": -3
                },
                {
                    "id": 102,
                    "number": 14
                },
                {
                    "id": 103,
                    "number": 4
                },
                {
                    "id": 104,
                    "number": 1
                },
                {
                    "id": 105,
                    "number": -9
                },
                {
                    "id": 106,
                    "number": -8
                },
                {
                    "id": 107,
                    "number": -13
                },
                {
                    "id": 108,
                    "number": -12
                },
                {
                    "id": 109,
                    "number": -13
                },
                {
                    "id": 110,
                    "number": 3
                },
                {
                    "id": 111,
                    "number": 11
                },
                {
                    "id": 112,
                    "number": 13
                },
                {
                    "id": 113,
                    "number": 11
                },
                {
                    "id": 114,
                    "number": 1
                },
                {
                    "id": 115,
                    "number": 1
                },
                {
                    "id": 116,
                    "number": -3
                },
                {
                    "id": 117,
                    "number": -14
                },
                {
                    "id": 118,
                    "number": 8
                },
                {
                    "id": 119,
                    "number": 16
                },
                {
                    "id": 120,
                    "number": 0
                },
                {
                    "id": 121,
                    "number": 19
                },
                {
                    "id": 122,
                    "number": 10
                },
                {
                    "id": 123,
                    "number": 4
                },
                {
                    "id": 124,
                    "number": 18
                },
                {
                    "id": 125,
                    "number": 15
                },
                {
                    "id": 126,
                    "number": -8
                },
                {
                    "id": 127,
                    "number": 7
                },
                {
                    "id": 128,
                    "number": -11
                },
                {
                    "id": 129,
                    "number": -15
                },
                {
                    "id": 130,
                    "number": 11
                },
                {
                    "id": 131,
                    "number": -7
                },
                {
                    "id": 132,
                    "number": 18
                },
                {
                    "id": 133,
                    "number": -9
                },
                {
                    "id": 134,
                    "number": 12
                },
                {
                    "id": 135,
                    "number": 8
                },
                {
                    "id": 136,
                    "number": -9
                },
                {
                    "id": 137,
                    "number": 15
                },
                {
                    "id": 138,
                    "number": -13
                },
                {
                    "id": 139,
                    "number": 19
                },
                {
                    "id": 140,
                    "number": 7
                },
                {
                    "id": 141,
                    "number": 17
                },
                {
                    "id": 142,
                    "number": -8
                },
                {
                    "id": 143,
                    "number": -8
                },
                {
                    "id": 144,
                    "number": 5
                },
                {
                    "id": 145,
                    "number": 12
                },
                {
                    "id": 146,
                    "number": 7
                },
                {
                    "id": 147,
                    "number": 12
                },
                {
                    "id": 148,
                    "number": 10
                },
                {
                    "id": 149,
                    "number": -3
                },
                {
                    "id": 150,
                    "number": 2
                },
                {
                    "id": 151,
                    "number": -12
                },
                {
                    "id": 152,
                    "number": -1
                },
                {
                    "id": 153,
                    "number": 12
                },
                {
                    "id": 154,
                    "number": 3
                },
                {
                    "id": 155,
                    "number": 14
                },
                {
                    "id": 156,
                    "number": 4
                },
                {
                    "id": 157,
                    "number": 12
                },
                {
                    "id": 158,
                    "number": -10
                },
                {
                    "id": 159,
                    "number": 16
                },
                {
                    "id": 160,
                    "number": -2
                },
                {
                    "id": 161,
                    "number": -3
                },
                {
                    "id": 162,
                    "number": -2
                },
                {
                    "id": 163,
                    "number": 2
                },
                {
                    "id": 164,
                    "number": -9
                },
                {
                    "id": 165,
                    "number": -7
                },
                {
                    "id": 166,
                    "number": -3
                },
                {
                    "id": 167,
                    "number": 0
                },
                {
                    "id": 168,
                    "number": 16
                },
                {
                    "id": 169,
                    "number": 15
                },
                {
                    "id": 170,
                    "number": -10
                },
                {
                    "id": 171,
                    "number": -4
                },
                {
                    "id": 172,
                    "number": -15
                },
                {
                    "id": 173,
                    "number": -14
                },
                {
                    "id": 174,
                    "number": -3
                },
                {
                    "id": 175,
                    "number": -14
                },
                {
                    "id": 176,
                    "number": -5
                },
                {
                    "id": 177,
                    "number": 8
                },
                {
                    "id": 178,
                    "number": 15
                },
                {
                    "id": 179,
                    "number": -15
                },
                {
                    "id": 180,
                    "number": -12
                },
                {
                    "id": 181,
                    "number": -13
                },
                {
                    "id": 182,
                    "number": 20
                },
                {
                    "id": 183,
                    "number": 6
                },
                {
                    "id": 184,
                    "number": 4
                },
                {
                    "id": 185,
                    "number": 10
                },
                {
                    "id": 186,
                    "number": 16
                },
                {
                    "id": 187,
                    "number": -4
                },
                {
                    "id": 188,
                    "number": -8
                },
                {
                    "id": 189,
                    "number": -14
                },
                {
                    "id": 190,
                    "number": -3
                },
                {
                    "id": 191,
                    "number": -1
                },
                {
                    "id": 192,
                    "number": 6
                },
                {
                    "id": 193,
                    "number": 6
                },
                {
                    "id": 194,
                    "number": -11
                },
                {
                    "id": 195,
                    "number": 5
                },
                {
                    "id": 196,
                    "number": 2
                },
                {
                    "id": 197,
                    "number": -4
                },
                {
                    "id": 198,
                    "number": -3
                },
                {
                    "id": 199,
                    "number": 14
                },
                {
                    "id": 200,
                    "number": -5
                },
                {
                    "id": 201,
                    "number": 6
                },
                {
                    "id": 202,
                    "number": 6
                },
                {
                    "id": 203,
                    "number": 3
                },
                {
                    "id": 204,
                    "number": -2
                },
                {
                    "id": 205,
                    "number": 11
                },
                {
                    "id": 206,
                    "number": -7
                },
                {
                    "id": 207,
                    "number": -2
                },
                {
                    "id": 208,
                    "number": 18
                },
                {
                    "id": 209,
                    "number": -9
                },
                {
                    "id": 210,
                    "number": 5
                },
                {
                    "id": 211,
                    "number": -7
                },
                {
                    "id": 212,
                    "number": 9
                },
                {
                    "id": 213,
                    "number": 0
                },
                {
                    "id": 214,
                    "number": 4
                },
                {
                    "id": 215,
                    "number": 0
                },
                {
                    "id": 216,
                    "number": 9
                },
                {
                    "id": 217,
                    "number": 5
                },
                {
                    "id": 218,
                    "number": 3
                },
                {
                    "id": 219,
                    "number": 12
                },
                {
                    "id": 220,
                    "number": 7
                },
                {
                    "id": 221,
                    "number": -14
                },
                {
                    "id": 222,
                    "number": 18
                },
                {
                    "id": 223,
                    "number": -8
                },
                {
                    "id": 224,
                    "number": -8
                },
                {
                    "id": 225,
                    "number": 17
                },
                {
                    "id": 226,
                    "number": 3
                },
                {
                    "id": 227,
                    "number": -7
                },
                {
                    "id": 228,
                    "number": 1
                },
                {
                    "id": 229,
                    "number": 15
                },
                {
                    "id": 230,
                    "number": -1
                },
                {
                    "id": 231,
                    "number": -15
                },
                {
                    "id": 232,
                    "number": 13
                },
                {
                    "id": 233,
                    "number": -7
                },
                {
                    "id": 234,
                    "number": 3
                },
                {
                    "id": 235,
                    "number": 18
                },
                {
                    "id": 236,
                    "number": 11
                },
                {
                    "id": 237,
                    "number": -2
                },
                {
                    "id": 238,
                    "number": 17
                },
                {
                    "id": 239,
                    "number": -2
                },
                {
                    "id": 240,
                    "number": 11
                },
                {
                    "id": 241,
                    "number": 6
                },
                {
                    "id": 242,
                    "number": 15
                },
                {
                    "id": 243,
                    "number": -9
                },
                {
                    "id": 244,
                    "number": 16
                },
                {
                    "id": 245,
                    "number": 12
                },
                {
                    "id": 246,
                    "number": -14
                },
                {
                    "id": 247,
                    "number": 11
                },
                {
                    "id": 248,
                    "number": 13
                },
                {
                    "id": 249,
                    "number": 1
                },
                {
                    "id": 250,
                    "number": 5
                }
            ]
        </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-2.js"></script>
<section id="radial-lines-2">
    <h1>Radial Lines</h1>
    <p>I mean I've seen this kind of thing before and I wanted to see if I could do it from scratch, as it were</p>

    <div class="controls">
        <button id="showNeg">Highlight negative changes</button>
        <button id="showPos">Highlight positive changes</button>
        <button id="reset">Reset</button>
    </div>

    <div id="svgOutput"></div>

    <div class="intro">
        <p>(data is hidden inside a script tag right here)</p>
        <script>
            const dataset = [{"id": 1, "number": 13},
                {"id": 2, "number": -13},
                {"id": 3, "number": 6},
                {"id": 4, "number": -14},
                {"id": 5, "number": 11},
                {"id": 6, "number": -11},
                {"id": 7, "number": 14},
                {"id": 8, "number": 20},
                {"id": 9, "number": 17},
                {"id": 10, "number": 8},
                {"id": 11, "number": 7},
                {"id": 12, "number": 2},
                {"id": 13, "number": 4},
                {"id": 14, "number": -12},
                {"id": 15, "number": 14},
                {"id": 16, "number": 1},
                {"id": 17, "number": -4},
                {"id": 18, "number": 3},
                {"id": 19, "number": 4},
                {"id": 20, "number": 5},
                {"id": 21, "number": -6},
                {"id": 22, "number": -5},
                {"id": 23, "number": -9},
                {"id": 24, "number": 19},
                {"id": 25, "number": 6},
                {"id": 26, "number": -10},
                {"id": 27, "number": -10},
                {"id": 28, "number": 10},
                {"id": 29, "number": 2},
                {"id": 30, "number": 11},
                {"id": 31, "number": 11},
                {"id": 32, "number": 17},
                {"id": 33, "number": -10},
                {"id": 34, "number": 1},
                {"id": 35, "number": 3},
                {"id": 36, "number": -15},
                {"id": 37, "number": 20},
                {"id": 38, "number": 11},
                {"id": 39, "number": 0},
                {"id": 40, "number": 9},
                {"id": 41, "number": 18},
                {"id": 42, "number": 4},
                {"id": 43, "number": 6},
                {"id": 44, "number": 4},
                {"id": 45, "number": -15},
                {"id": 46, "number": 5},
                {"id": 47, "number": 0},
                {"id": 48, "number": -10},
                {"id": 49, "number": 8},
                {"id": 50, "number": 11},
                {"id": 51, "number": 19},
                {"id": 52, "number": 7},
                {"id": 53, "number": 7},
                {"id": 54, "number": 13},
                {"id": 55, "number": 3},
                {"id": 56, "number": 15},
                {"id": 57, "number": 10},
                {"id": 58, "number": -3},
                {"id": 59, "number": 7},
                {"id": 60, "number": -15},
                {"id": 61, "number": 7},
                {"id": 62, "number": 15},
                {"id": 63, "number": 9},
                {"id": 64, "number": -5},
                {"id": 65, "number": -9},
                {"id": 66, "number": 2},
                {"id": 67, "number": 11},
                {"id": 68, "number": 12},
                {"id": 69, "number": -4},
                {"id": 70, "number": -8},
                {"id": 71, "number": 8},
                {"id": 72, "number": 11},
                {"id": 73, "number": -14},
                {"id": 74, "number": -14},
                {"id": 75, "number": -9},
                {"id": 76, "number": 20},
                {"id": 77, "number": -11},
                {"id": 78, "number": 10},
                {"id": 79, "number": -12},
                {"id": 80, "number": -10},
                {"id": 81, "number": -9},
                {"id": 82, "number": -11},
                {"id": 83, "number": -6},
                {"id": 84, "number": 0},
                {"id": 85, "number": 7},
                {"id": 86, "number": 6},
                {"id": 87, "number": -9},
                {"id": 88, "number": -15},
                {"id": 89, "number": 5},
                {"id": 90, "number": 14},
                {"id": 91, "number": -4},
                {"id": 92, "number": 4},
                {"id": 93, "number": 12},
                {"id": 94, "number": 1},
                {"id": 95, "number": -9},
                {"id": 96, "number": 17},
                {"id": 97, "number": 16},
                {"id": 98, "number": 16},
                {"id": 99, "number": -7},
                {"id": 100, "number": 3},
                {"id": 101, "number": -3},
                {"id": 102, "number": 14},
                {"id": 103, "number": 4},
                {"id": 104, "number": 1},
                {"id": 105, "number": -9},
                {"id": 106, "number": -8},
                {"id": 107, "number": -13},
                {"id": 108, "number": -12},
                {"id": 109, "number": -13},
                {"id": 110, "number": 3},
                {"id": 111, "number": 11},
                {"id": 112, "number": 13},
                {"id": 113, "number": 11},
                {"id": 114, "number": 1},
                {"id": 115, "number": 1},
                {"id": 116, "number": -3},
                {"id": 117, "number": -14},
                {"id": 118, "number": 8},
                {"id": 119, "number": 16},
                {"id": 120, "number": 0},
                {"id": 121, "number": 19},
                {"id": 122, "number": 10},
                {"id": 123, "number": 4},
                {"id": 124, "number": 18},
                {"id": 125, "number": 15},
                {"id": 126, "number": -8},
                {"id": 127, "number": 7},
                {"id": 128, "number": -11},
                {"id": 129, "number": -15},
                {"id": 130, "number": 11},
                {"id": 131, "number": -7},
                {"id": 132, "number": 18},
                {"id": 133, "number": -9},
                {"id": 134, "number": 12},
                {"id": 135, "number": 8},
                {"id": 136, "number": -9},
                {"id": 137, "number": 15},
                {"id": 138, "number": -13},
                {"id": 139, "number": 19},
                {"id": 140, "number": 7},
                {"id": 141, "number": 17},
                {"id": 142, "number": -8},
                {"id": 143, "number": -8},
                {"id": 144, "number": 5},
                {"id": 145, "number": 12},
                {"id": 146, "number": 7},
                {"id": 147, "number": 12},
                {"id": 148, "number": 10},
                {"id": 149, "number": -3},
                {"id": 150, "number": 2},
                {"id": 151, "number": -12},
                {"id": 152, "number": -1},
                {"id": 153, "number": 12},
                {"id": 154, "number": 3},
                {"id": 155, "number": 14},
                {"id": 156, "number": 4},
                {"id": 157, "number": 12},
                {"id": 158, "number": -10},
                {"id": 159, "number": 16},
                {"id": 160, "number": -2},
                {"id": 161, "number": -3},
                {"id": 162, "number": -2},
                {"id": 163, "number": 2},
                {"id": 164, "number": -9},
                {"id": 165, "number": -7},
                {"id": 166, "number": -3},
                {"id": 167, "number": 0},
                {"id": 168, "number": 16},
                {"id": 169, "number": 15},
                {"id": 170, "number": -10},
                {"id": 171, "number": -4},
                {"id": 172, "number": -15},
                {"id": 173, "number": -14},
                {"id": 174, "number": -3},
                {"id": 175, "number": -14},
                {"id": 176, "number": -5},
                {"id": 177, "number": 8},
                {"id": 178, "number": 15},
                {"id": 179, "number": -15},
                {"id": 180, "number": -12},
                {"id": 181, "number": -13},
                {"id": 182, "number": 20},
                {"id": 183, "number": 6},
                {"id": 184, "number": 4},
                {"id": 185, "number": 10},
                {"id": 186, "number": 16},
                {"id": 187, "number": -4},
                {"id": 188, "number": -8},
                {"id": 189, "number": -14},
                {"id": 190, "number": -3},
                {"id": 191, "number": -1},
                {"id": 192, "number": 6},
                {"id": 193, "number": 6},
                {"id": 194, "number": -11},
                {"id": 195, "number": 5},
                {"id": 196, "number": 2},
                {"id": 197, "number": -4},
                {"id": 198, "number": -3},
                {"id": 199, "number": 14},
                {"id": 200, "number": -5},
                {"id": 201, "number": 6},
                {"id": 202, "number": 6},
                {"id": 203, "number": 3},
                {"id": 204, "number": -2},
                {"id": 205, "number": 11},
                {"id": 206, "number": -7},
                {"id": 207, "number": -2},
                {"id": 208, "number": 18},
                {"id": 209, "number": -9},
                {"id": 210, "number": 5},
                {"id": 211, "number": -7},
                {"id": 212, "number": 9},
                {"id": 213, "number": 0},
                {"id": 214, "number": 4},
                {"id": 215, "number": 0},
                {"id": 216, "number": 9},
                {"id": 217, "number": 5},
                {"id": 218, "number": 3},
                {"id": 219, "number": 12},
                {"id": 220, "number": 7},
                {"id": 221, "number": -14},
                {"id": 222, "number": 18},
                {"id": 223, "number": -8},
                {"id": 224, "number": -8},
                {"id": 225, "number": 17},
                {"id": 226, "number": 3},
                {"id": 227, "number": -7},
                {"id": 228, "number": 1},
                {"id": 229, "number": 15},
                {"id": 230, "number": -1},
                {"id": 231, "number": -15},
                {"id": 232, "number": 13},
                {"id": 233, "number": -7},
                {"id": 234, "number": 3},
                {"id": 235, "number": 18},
                {"id": 236, "number": 11},
                {"id": 237, "number": -2},
                {"id": 238, "number": 17},
                {"id": 239, "number": -2},
                {"id": 240, "number": 11},
                {"id": 241, "number": 6},
                {"id": 242, "number": 15},
                {"id": 243, "number": -9},
                {"id": 244, "number": 16},
                {"id": 245, "number": 12},
                {"id": 246, "number": -14},
                {"id": 247, "number": 11},
                {"id": 248, "number": 13},
                {"id": 249, "number": 1},
                {"id": 250, "number": 5}]
        </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-2.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("radial-lines-2 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 = 1200;
        const height = 800;
        const margin = {
          "top": 10,
          "bottom": 10,
          "left": 10,
          "right": 10
        }
    
        // data input and massaging
    
        let datasetArray = [];
    
        datasetArray.push({
          id: 1,
          count: 600 + dataset[0].number,
          change: dataset[0].number
        })
    
        for (let i = 1; i < dataset.length; i++) {
          datasetArray.push({
            id: dataset[i].id,
            count: datasetArray[i - 1].count + dataset[i].number,
            change: dataset[i].number
          })
        }
    
        // main svg output
    
        const svg = d3.select("#svgOutput")
          .append("svg")
          .attr("viewBox", [0, 0, width, height])
          .attr("preserveAspectRatio", "xMidYMid meet");
    
        // 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]);
    
        const angleScale = d3.scaleLinear()
          .domain([0, d3.max(datasetArray, (d) => d.id)])
          .range([-90, 270]);
    
    
        // 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;
    
    
        // 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', (d, i) => {
            return getXcoord(angleScale(d.id), lengthScale(d.count)) + centerX;
          })
          .attr('y2', (d, i) => {
            return getYcoord(angleScale(d.id), lengthScale(d.count)) + centerY;
          });
    
        // 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);
          }
        })
      });
    })();
    
  • URL: /components/raw/radial-lines-2/radial-lines-2.js
  • Filesystem Path: components/04-radial-lines-concept/20-radial-lines-2/radial-lines-2.js
  • Size: 3.9 KB
  • Content:
    #radial-lines-2 {
      padding: 1rem;
      margin: 1rem;
      border: 2px dotted fuchsia;
      background-color: gainsboro;
      font-family: Verdana, sans-serif;
    
      svg {
        background-color: aliceblue;
      }
    
      .controls {
        margin-bottom: 2rem;
      }
    
      // 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;
          }
        }
    
        &.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;
          }
        }
      }
    }
    
  • URL: /components/raw/radial-lines-2/radial-lines-2.scss
  • Filesystem Path: components/04-radial-lines-concept/20-radial-lines-2/radial-lines-2.scss
  • Size: 999 Bytes

No notes defined.