<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. */
(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);
});
})();
#line-chart-1 {
padding: 1rem;
margin: 1rem;
border: 2px dotted fuchsia;
background-color: gainsboro;
font-family: Verdana, sans-serif;
svg {
background-color: aliceblue;
}
}
No notes defined.