<section id="line-chart-1">
    <h1>Line Chart 1</h1>
    <p>well, ok, first things first, starting with a clean slate, and making sure I can build back up to plotting lots of points...</p>
    <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>
</section>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../../js/components/line-chart-1.js"></script>
<section id="line-chart-1">
    <h1>Line Chart 1</h1>
    <p>well, ok, first things first, starting with a clean slate, and making sure I can build back up to plotting lots of points...</p>
    <div id="svgOutput"></div>

    <div class="intro">
        <p>(data is hidden inside a script tag right here)</p>
{{!--
        <script>
            const dataset = [
                {"id": 1, "number": -6},
                {"id": 2, "number": -4},
                {"id": 3, "number": 1},
                {"id": 4, "number": 10},
                {"id": 5, "number": 8},
                {"id": 6, "number": 8},
                {"id": 7, "number": -9},
                {"id": 8, "number": -2},
                {"id": 9, "number": -3},
                {"id": 10, "number": -1},
                {"id": 11, "number": 9},
                {"id": 12, "number": 7},
                {"id": 13, "number": 9},
                {"id": 14, "number": 10},
                {"id": 15, "number": -9},
                {"id": 16, "number": 9},
                {"id": 17, "number": 2},
                {"id": 18, "number": 2},
                {"id": 19, "number": -9},
                {"id": 20, "number": 1},
                {"id": 21, "number": -1},
                {"id": 22, "number": 8},
                {"id": 23, "number": -3},
                {"id": 24, "number": 3},
                {"id": 25, "number": -7},
                {"id": 26, "number": 8},
                {"id": 27, "number": 7},
                {"id": 28, "number": 8},
                {"id": 29, "number": 9},
                {"id": 30, "number": -2},
                {"id": 31, "number": 1},
                {"id": 32, "number": 7},
                {"id": 33, "number": -1},
                {"id": 34, "number": -6},
                {"id": 35, "number": -3},
                {"id": 36, "number": 4},
                {"id": 37, "number": -3},
                {"id": 38, "number": -3},
                {"id": 39, "number": 4},
                {"id": 40, "number": -6},
                {"id": 41, "number": -10},
                {"id": 42, "number": -6},
                {"id": 43, "number": -7},
                {"id": 44, "number": -9},
                {"id": 45, "number": 2},
                {"id": 46, "number": -9},
                {"id": 47, "number": 8},
                {"id": 48, "number": 9},
                {"id": 49, "number": -2},
                {"id": 50, "number": -6},
                {"id": 51, "number": -9},
                {"id": 52, "number": 4},
                {"id": 53, "number": 2},
                {"id": 54, "number": 5},
                {"id": 55, "number": 6},
                {"id": 56, "number": 4},
                {"id": 57, "number": -5},
                {"id": 58, "number": -3},
                {"id": 59, "number": 5},
                {"id": 60, "number": -6},
                {"id": 61, "number": -1},
                {"id": 62, "number": -2},
                {"id": 63, "number": 7},
                {"id": 64, "number": -8},
                {"id": 65, "number": -3},
                {"id": 66, "number": -3},
                {"id": 67, "number": -7},
                {"id": 68, "number": 10},
                {"id": 69, "number": -1},
                {"id": 70, "number": -3},
                {"id": 71, "number": -8},
                {"id": 72, "number": 3},
                {"id": 73, "number": 4},
                {"id": 74, "number": 3},
                {"id": 75, "number": -3},
                {"id": 76, "number": 10},
                {"id": 77, "number": 3},
                {"id": 78, "number": 2},
                {"id": 79, "number": 5},
                {"id": 80, "number": -7},
                {"id": 81, "number": -2},
                {"id": 82, "number": 8},
                {"id": 83, "number": -3},
                {"id": 84, "number": 10},
                {"id": 85, "number": 0},
                {"id": 86, "number": 5},
                {"id": 87, "number": 6},
                {"id": 88, "number": 10},
                {"id": 89, "number": -5},
                {"id": 90, "number": 1},
                {"id": 91, "number": 3},
                {"id": 92, "number": 9},
                {"id": 93, "number": 4},
                {"id": 94, "number": -3},
                {"id": 95, "number": 3},
                {"id": 96, "number": -3},
                {"id": 97, "number": -3},
                {"id": 98, "number": 9},
                {"id": 99, "number": 3},
                {"id": 100, "number": 4}
            ]
        </script>
--}}
        <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>
</section>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{{ path '/js/components/line-chart-1.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("line-chart-1 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");
    
        // 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)
          .style("fill", "navy")
          .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);
      });
    })();
    
  • URL: /components/raw/line-chart-1/line-chart-1.js
  • Filesystem Path: components/03-starter-line-charts/14-line-chart-1/line-chart-1.js
  • Size: 1.9 KB
  • Content:
    #line-chart-1 {
      padding: 1rem;
      margin: 1rem;
      border: 2px dotted fuchsia;
      background-color: gainsboro;
      font-family: Verdana, sans-serif;
    
      svg {
        background-color: aliceblue;
      }
    }
    
  • URL: /components/raw/line-chart-1/line-chart-1.scss
  • Filesystem Path: components/03-starter-line-charts/14-line-chart-1/line-chart-1.scss
  • Size: 194 Bytes
  • Handle: @line-chart-1
  • Preview:
  • Filesystem Path: components/03-starter-line-charts/14-line-chart-1/line-chart-1.hbs

No notes defined.