<section id="area-chart-with-pattern-fill">
    <h1>Area Chart with Pattern Fills</h1>
    <p>just to see what these look like; also, worth noting the colors are baked into the (compiled?) svg patterns; alternate colors could be created separately as needed</p>

    <div class="controls">
        <select name="patternSelector" id="patternSelector">
            <option value="circles-1">circles-1</option>
            <option value="circles-2">circles-2</option>
            <option value="circles-3">circles-3</option>
            <option value="circles-4">circles-4</option>
            <option value="circles-5">circles-5</option>
            <option value="circles-6">circles-6</option>
            <option value="circles-7">circles-7</option>
            <option value="circles-8">circles-8</option>
            <option value="circles-9">circles-9</option>
            <option value="diagonal-stripe-1">diagonal-stripe-1</option>
            <option value="diagonal-stripe-2">diagonal-stripe-2</option>
            <option value="diagonal-stripe-3">diagonal-stripe-3</option>
            <option value="diagonal-stripe-4">diagonal-stripe-4</option>
            <option value="diagonal-stripe-5">diagonal-stripe-5</option>
            <option value="diagonal-stripe-6">diagonal-stripe-6</option>
            <option value="dots-1">dots-1</option>
            <option value="dots-2">dots-2</option>
            <option value="dots-3">dots-3</option>
            <option value="dots-4">dots-4</option>
            <option value="dots-5">dots-5</option>
            <option value="dots-6">dots-6</option>
            <option value="dots-7">dots-7</option>
            <option value="dots-8">dots-8</option>
            <option value="dots-9">dots-9</option>
            <option value="horizontal-stripe-1">horizontal-stripe-1</option>
            <option value="horizontal-stripe-2">horizontal-stripe-2</option>
            <option value="horizontal-stripe-3">horizontal-stripe-3</option>
            <option value="horizontal-stripe-4">horizontal-stripe-4</option>
            <option value="horizontal-stripe-5">horizontal-stripe-5</option>
            <option value="horizontal-stripe-6">horizontal-stripe-6</option>
            <option value="horizontal-stripe-7">horizontal-stripe-7</option>
            <option value="horizontal-stripe-8">horizontal-stripe-8</option>
            <option value="horizontal-stripe-9">horizontal-stripe-9</option>
            <option value="vertical-stripe-1">vertical-stripe-1</option>
            <option value="vertical-stripe-2">vertical-stripe-2</option>
            <option value="vertical-stripe-3">vertical-stripe-3</option>
            <option value="vertical-stripe-4">vertical-stripe-4</option>
            <option value="vertical-stripe-5">vertical-stripe-5</option>
            <option value="vertical-stripe-6">vertical-stripe-6</option>
            <option value="vertical-stripe-7">vertical-stripe-7</option>
            <option value="vertical-stripe-8">vertical-stripe-8</option>
            <option value="vertical-stripe-9">vertical-stripe-9</option>
            <option value="crosshatch">crosshatch</option>
            <option value="houndstooth">houndstooth</option>
            <option value="lightstripe">lightstripe</option>
            <option value="smalldot">smalldot</option>
            <option value="subtle-patch">subtle-patch</option>
            <option value="verticalstripe">verticalstripe</option>
            <option value="whitecarbon">whitecarbon</option>
        </select>

        <button id="fillerButton">Fill it</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/area-chart-with-pattern-fill.js"></script>
<section id="area-chart-with-pattern-fill">
    <h1>Area Chart with Pattern Fills</h1>
    <p>just to see what these look like; also, worth noting the colors are baked into the (compiled?) svg patterns; alternate colors could be created separately as needed</p>

    <div class="controls">
        {{> @pattern-selector-element }}

        <button id="fillerButton">Fill it</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/area-chart-with-pattern-fill.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("area-chart-with-pattern-fill active");
    
        // config
    
        const width = 1000;
        const height = 700;
        const margin = {
          "top": 20,
          "bottom": 30,
          "left": 40,
          "right": 10
        }
    
        // data input and massaging
    
        let datasetArray = [];
    
        datasetArray.push({
          id: 1,
          count: 600 + 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
          })
        }
    
        // scales
    
        const xScale = d3.scaleBand()
          .domain(datasetArray.map(d => d.id))
          .range([margin.left, width - margin.right])
          .padding(0);
    
        const yScale = d3.scaleLinear()
          .domain(d3.extent(datasetArray, d => d.count))
          .range([height - margin.bottom, margin.top]);
    
        // svg output
    
        const svg = d3.select("#svgOutput")
          .append("svg")
          .attr("viewBox", [0, 0, width, height])
          .attr("preserveAspectRatio", "xMidYMid meet");
    
        // create an area function and use it to draw an area chart
    
        const area = d3.area()
          .x(d => xScale(d.id))
          .y0(height - margin.bottom)
          .y1(d => yScale(d.count));
    
        svg.append('path')
          .attr('d', area(datasetArray))
          .attr('fill', 'mediumvioletred')
          .attr('class', 'area-fill');
    
        // plot the points as basic circles
    
        // svg.selectAll("circle.point")
        //   .data(datasetArray)
        //   .enter()
        //   .append('circle')
        //   .attr('class', 'point')
        //   .attr('cx', (d) => xScale(d.id))
        //   .attr("cy", (d) => yScale(d.count))
        //   .attr("r", () => xScale.bandwidth() / 2)
        //   .attr("fill", "white")
        //   .attr("stroke", "magenta")
        //   .attr("stroke-width", "1.5")
        //   .append('title')
        //   .text((d) => `id: ${d.id} / count: ${d.count}`);
    
        // axes
    
        const xAxis = d3.axisBottom(xScale)
          .tickValues(xScale.domain().filter(function (d, i) {
            return !(i % 10)
          }));
        const yAxis = d3.axisLeft(yScale);
    
        svg.append("g")
          .attr("transform", "translate(" + margin.left + ", 0)")
          .call(yAxis);
    
        svg.append("g")
          .attr("transform", "translate(0, " + (height - margin.bottom) + ")")
          .call(xAxis);
    
        // let us make it do a trick
    
        const fillerButton = document.querySelector('#fillerButton');
        fillerButton.addEventListener('click', function() {
          console.log("fill me up, buttercup");
    
          const newPattern = patternSelector.value;
    
          d3.select('svg')
            .selectAll('path.area-fill')
            .style('fill', 'url(#' + newPattern +')');
        })
      });
    })();
    
  • URL: /components/raw/area-chart-with-pattern-fill/area-chart-with-pattern-fill.js
  • Filesystem Path: components/01-misc/18-area-chart-with-pattern-fill/area-chart-with-pattern-fill.js
  • Size: 2.7 KB
  • Content:
    #area-chart-with-pattern-fill {
      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;
      }
    }
    
  • URL: /components/raw/area-chart-with-pattern-fill/area-chart-with-pattern-fill.scss
  • Filesystem Path: components/01-misc/18-area-chart-with-pattern-fill/area-chart-with-pattern-fill.scss
  • Size: 368 Bytes

No notes defined.