Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              
            
          
!

CSS

            
              
            
          
!

JS

            
              const data = {
  1: {
    eventID: 4,
    size: 48818,
    children: [
      2,
      3,
      50,
      272,
      106,
      6449
    ]
  },
  2: {
    eventID: 136,
    size: 23224,
    children: [
      4,
      66,
      60,
      40,
      196,
      6438
    ],
    parentId: 1
  },
  3: {
    eventID: 4,
    size: 145,
    children: [
      7
    ],
    parentId: 1
  },
  4: {
    eventID: 136,
    size: 11751,
    children: [
      5,
      13,
      8
    ],
    parentId: 2
  },
  5: {
    eventID: 136,
    size: 4761,
    children: [
      23,
      6
    ],
    parentId: 4
  },
  6: {
    eventID: 136,
    size: 586,
    children: [
      152,
      350,
      67
    ],
    parentId: 5
  },
  7: {
    eventID: 136,
    size: 34,
    parentId: 3
  },
  8: {
    eventID: 137,
    size: 5344,
    children: [
      9,
      15
    ],
    parentId: 4
  },
  9: {
    eventID: 137,
    size: 5004,
    children: [
      10,
      34,
      27,
      20
    ],
    parentId: 8
  },
  10: {
    eventID: 136,
    size: 3552,
    children: [
      11,
      43
    ],
    parentId: 9
  },
  11: {
    eventID: 137,
    size: 2671,
    children: [
      51,
      33,
      368,
      588
    ],
    parentId: 10
  },
  13: {
    eventID: 163,
    size: 1294,
    children: [
      14
    ],
    parentId: 4
  },
  14: {
    eventID: 8,
    size: 1602,
    children: [
      2691
    ],
    parentId: 13
  },
  15: {
    eventID: 136,
    size: 312,
    children: [
      16,
      123,
      58,
      95
    ],
    parentId: 8
  },
  16: {
    eventID: 136,
    size: 166,
    children: [
      17,
      103
    ],
    parentId: 15
  },
  17: {
    eventID: 137,
    size: 100,
    children: [
      140,
      109
    ],
    parentId: 16
  },
  20: {
    eventID: 137,
    size: 249,
    children: [
      32,
      99
    ],
    parentId: 9
  },
  23: {
    eventID: 137,
    size: 4149,
    children: [
      56,
      29,
      48,
      24
    ],
    parentId: 5
  },
  24: {
    eventID: 137,
    size: 253,
    children: [
      46,
      25
    ],
    parentId: 23
  },
  25: {
    eventID: 161,
    size: 52,
    children: [
      26
    ],
    parentId: 24
  },
  26: {
    eventID: 161,
    size: 27,
    parentId: 25
  },
  27: {
    eventID: 164,
    size: 415,
    children: [
      28
    ],
    parentId: 9
  },
  28: {
    eventID: 9,
    size: 661,
    children: [
      2025,
      1800
    ],
    parentId: 27
  },
  29: {
    eventID: 136,
    size: 2772,
    children: [
      30,
      31
    ],
    parentId: 23
  },
  30: {
    eventID: 137,
    size: 2130,
    children: [
      52,
      57,
      563
    ],
    parentId: 29
  },
  31: {
    eventID: 136,
    size: 644,
    children: [
      127,
      54,
      480
    ],
    parentId: 29
  },
  32: {
    eventID: 137,
    size: 209,
    children: [
      90,
      116,
      83
    ],
    parentId: 20
  },
  33: {
    eventID: 137,
    size: 732,
    children: [
      47,
      531,
      174
    ],
    parentId: 11
  },
  34: {
    eventID: 161,
    size: 1207,
    children: [
      104,
      310,
      6471
    ],
    parentId: 9
  },
  40: {
    eventID: 163,
    size: 350,
    children: [
      41
    ],
    parentId: 2
  },
  41: {
    eventID: 163,
    size: 343,
    children: [
      42
    ],
    parentId: 40
  },
  42: {
    eventID: 8,
    size: 420,
    children: [
      2705
    ],
    parentId: 41
  },
  43: {
    eventID: 136,
    size: 883,
    children: [
      79,
      44,
      1937
    ],
    parentId: 10
  },
  44: {
    eventID: 136,
    size: 144,
    children: [
      45
    ],
    parentId: 43
  },
  45: {
    eventID: 136,
    size: 125,
    children: [
      145
    ],
    parentId: 44
  },
  46: {
    eventID: 137,
    size: 177,
    children: [
      228,
      198,
      82
    ],
    parentId: 24
  },
  47: {
    eventID: 137,
    size: 599,
    children: [
      128,
      430
    ],
    parentId: 33
  },
  48: {
    eventID: 164,
    size: 413,
    children: [
      49
    ],
    parentId: 23
  },
  49: {
    eventID: 9,
    size: 617,
    children: [
      1567,
      385
    ],
    parentId: 48
  },
  50: {
    eventID: 8,
    size: 1124,
    parentId: 1
  },
  51: {
    eventID: 141,
    size: 2613,
    children: [
      154,
      6661,
      2458,
      315
    ],
    parentId: 11
  },
  52: {
    eventID: 137,
    size: 636,
    children: [
      525,
      53,
      516
    ],
    parentId: 30
  },
  53: {
    eventID: 137,
    size: 525,
    children: [
      138,
      519
    ],
    parentId: 52
  },
  54: {
    eventID: 136,
    size: 107,
    children: [
      55
    ],
    parentId: 31
  },
  55: {
    eventID: 136,
    size: 82,
    children: [
      134
    ],
    parentId: 54
  },
  56: {
    eventID: 161,
    size: 1145,
    children: [
      119,
      130,
      6554
    ],
    parentId: 23
  },
  57: {
    eventID: 141,
    size: 2065,
    children: [
      155,
      161,
      2690,
      6613,
      637
    ],
    parentId: 30
  },
  58: {
    eventID: 161,
    size: 46,
    parentId: 15
  },
  60: {
    eventID: 137,
    size: 209,
    children: [
      61
    ],
    parentId: 2
  },
  61: {
    eventID: 137,
    size: 179,
    children: [
      355,
      62
    ],
    parentId: 60
  },
  62: {
    eventID: 137,
    size: 132,
    children: [
      204,
      63,
      77
    ],
    parentId: 61
  },
  63: {
    eventID: 161,
    size: 38,
    parentId: 62
  },
  66: {
    eventID: 8,
    size: 265,
    parentId: 2
  },
  67: {
    eventID: 136,
    size: 229,
    children: [
      591,
      295,
      137,
      606
    ],
    parentId: 6
  },
  68: {
    eventID: 163,
    size: 20,
    children: [
      69
    ],
    parentId: 5
  },
  69: {
    eventID: 8,
    size: 26,
    parentId: 68
  },
  77: {
    eventID: 136,
    size: 60,
    children: [
      78
    ],
    parentId: 62
  },
  78: {
    eventID: 137,
    size: 42,
    children: [
      153
    ],
    parentId: 77
  },
  79: {
    eventID: 141,
    size: 856,
    children: [
      609,
      129
    ],
    parentId: 43
  },
  82: {
    eventID: 161,
    size: 75,
    parentId: 46
  },
  83: {
    eventID: 137,
    size: 33,
    children: [
      84
    ],
    parentId: 32
  },
  84: {
    eventID: 137,
    size: 27,
    parentId: 83
  },
  90: {
    eventID: 136,
    size: 89,
    children: [
      278,
      91
    ],
    parentId: 32
  },
  91: {
    eventID: 137,
    size: 66,
    children: [
      144
    ],
    parentId: 90
  },
  95: {
    eventID: 164,
    size: 70,
    children: [
      96
    ],
    parentId: 15
  },
  96: {
    eventID: 9,
    size: 96,
    parentId: 95
  },
  98: {
    eventID: 9,
    size: 24,
    parentId: 97
  },
  99: {
    eventID: 161,
    size: 21,
    children: [
      100
    ],
    parentId: 20
  },
  100: {
    eventID: 161,
    size: 24,
    parentId: 99
  },
  103: {
    eventID: 136,
    size: 60,
    children: [
      250
    ],
    parentId: 16
  },
  104: {
    eventID: 136,
    size: 311,
    children: [
      105,
      348
    ],
    parentId: 34
  },
  105: {
    eventID: 137,
    size: 255,
    children: [
      150,
      283
    ],
    parentId: 104
  },
  106: {
    eventID: 137,
    size: 139,
    children: [
      107,
      187
    ],
    parentId: 1
  },
  107: {
    eventID: 137,
    size: 79,
    children: [
      108
    ],
    parentId: 106
  },
  108: {
    eventID: 137,
    size: 63,
    children: [
      256,
      248
    ],
    parentId: 107
  },
  109: {
    eventID: 137,
    size: 24,
    children: [
      110
    ],
    parentId: 17
  },
  110: {
    eventID: 137,
    size: 21,
    children: [
      167
    ],
    parentId: 109
  },
  116: {
    eventID: 161,
    size: 97,
    parentId: 32
  },
  119: {
    eventID: 161,
    size: 58,
    children: [
      120
    ],
    parentId: 56
  },
  120: {
    eventID: 161,
    size: 52,
    children: [
      1792,
      889
    ],
    parentId: 119
  },
  123: {
    eventID: 137,
    size: 53,
    children: [
      342,
      124
    ],
    parentId: 15
  },
  124: {
    eventID: 137,
    size: 21,
    parentId: 123
  },
  127: {
    eventID: 141,
    size: 624,
    children: [
      136,
      2694
    ],
    parentId: 31
  },
  128: {
    eventID: 141,
    size: 647,
    children: [
      171
    ],
    parentId: 47
  },
  129: {
    eventID: 6,
    size: 488,
    children: [
      194,
      509,
      2692,
      7151
    ],
    parentId: 79
  },
  130: {
    eventID: 136,
    size: 225,
    children: [
      131,
      141
    ],
    parentId: 56
  },
  131: {
    eventID: 137,
    size: 192,
    children: [
      227,
      132
    ],
    parentId: 130
  },
  132: {
    eventID: 137,
    size: 68,
    children: [
      133
    ],
    parentId: 131
  },
  133: {
    eventID: 137,
    size: 59,
    children: [
      164
    ],
    parentId: 132
  },
  134: {
    eventID: 141,
    size: 77,
    children: [
      135
    ],
    parentId: 55
  },
  135: {
    eventID: 6,
    size: 36,
    children: [
      549
    ],
    parentId: 134
  },
  136: {
    eventID: 6,
    size: 367,
    children: [
      7131,
      247,
      2717,
      274
    ],
    parentId: 127
  },
  137: {
    eventID: 141,
    size: 30,
    children: [
      298
    ],
    parentId: 67
  },
  138: {
    eventID: 141,
    size: 551,
    children: [
      184
    ],
    parentId: 53
  },
  140: {
    eventID: 141,
    size: 100,
    children: [
      197
    ],
    parentId: 17
  },
  141: {
    eventID: 136,
    size: 33,
    children: [
      183
    ],
    parentId: 130
  },
  144: {
    eventID: 141,
    size: 74,
    children: [
      305
    ],
    parentId: 91
  },
  145: {
    eventID: 141,
    size: 131,
    children: [
      146
    ],
    parentId: 45
  },
  146: {
    eventID: 6,
    size: 74,
    children: [
      160
    ],
    parentId: 145
  },
  150: {
    eventID: 141,
    size: 190,
    children: [
      245
    ],
    parentId: 105
  },
  152: {
    eventID: 141,
    size: 240,
    children: [
      249
    ],
    parentId: 6
  },
  153: {
    eventID: 141,
    size: 50,
    parentId: 78
  },
  154: {
    eventID: 6,
    size: 1033,
    children: [
      208,
      189,
      6538,
      1672
    ],
    parentId: 51
  },
  155: {
    eventID: 6,
    size: 721,
    children: [
      193,
      1737,
      6502,
      216
    ],
    parentId: 57
  },
  160: {
    eventID: 5,
    size: 42,
    parentId: 146
  },
  161: {
    eventID: 8,
    size: 32,
    parentId: 57
  },
  164: {
    eventID: 141,
    size: 54,
    children: [
      165
    ],
    parentId: 133
  },
  165: {
    eventID: 6,
    size: 38,
    children: [
      246
    ],
    parentId: 164
  },
  167: {
    eventID: 141,
    size: 22,
    parentId: 110
  },
  171: {
    eventID: 6,
    size: 236,
    children: [
      1644,
      210
    ],
    parentId: 128
  },
  174: {
    eventID: 141,
    size: 117,
    children: [
      175
    ],
    parentId: 33
  },
  175: {
    eventID: 6,
    size: 34,
    children: [
      559
    ],
    parentId: 174
  },
  183: {
    eventID: 141,
    size: 24,
    parentId: 141
  },
  184: {
    eventID: 6,
    size: 223,
    children: [
      287,
      593
    ],
    parentId: 138
  },
  187: {
    eventID: 141,
    size: 67,
    children: [
      188
    ],
    parentId: 106
  },
  188: {
    eventID: 6,
    size: 31,
    children: [
      411
    ],
    parentId: 187
  },
  189: {
    eventID: 19,
    size: 108,
    children: [
      190
    ],
    parentId: 154
  },
  190: {
    eventID: 21,
    size: 51,
    children: [
      236
    ],
    parentId: 189
  },
  193: {
    eventID: 5,
    size: 651,
    children: [
      6448,
      602,
      752
    ],
    parentId: 155
  },
  194: {
    eventID: 5,
    size: 377,
    children: [
      6799,
      745
    ],
    parentId: 129
  },
  195: {
    eventID: 137,
    size: 20,
    parentId: 14
  },
  196: {
    eventID: 18,
    size: 199,
    children: [
      262
    ],
    parentId: 2
  },
  197: {
    eventID: 6,
    size: 47,
    children: [
      273
    ],
    parentId: 140
  },
  198: {
    eventID: 136,
    size: 81,
    children: [
      199
    ],
    parentId: 46
  },
  199: {
    eventID: 137,
    size: 66,
    children: [
      209
    ],
    parentId: 198
  },
  204: {
    eventID: 137,
    size: 23,
    parentId: 62
  },
  208: {
    eventID: 5,
    size: 977,
    children: [
      6463,
      751,
      876
    ],
    parentId: 154
  },
  209: {
    eventID: 141,
    size: 57,
    children: [
      293
    ],
    parentId: 199
  },
  210: {
    eventID: 5,
    size: 215,
    children: [
      2448,
      6526
    ],
    parentId: 171
  },
  216: {
    eventID: 19,
    size: 66,
    children: [
      221
    ],
    parentId: 155
  },
  221: {
    eventID: 21,
    size: 22,
    children: [
      497
    ],
    parentId: 216
  },
  227: {
    eventID: 141,
    size: 143,
    children: [
      241
    ],
    parentId: 131
  },
  228: {
    eventID: 137,
    size: 32,
    children: [
      238
    ],
    parentId: 46
  },
  236: {
    eventID: 5,
    size: 47,
    parentId: 190
  },
  238: {
    eventID: 137,
    size: 29,
    parentId: 228
  },
  241: {
    eventID: 6,
    size: 94,
    children: [
      314
    ],
    parentId: 227
  },
  245: {
    eventID: 6,
    size: 138,
    children: [
      404
    ],
    parentId: 150
  },
  246: {
    eventID: 5,
    size: 47,
    parentId: 165
  },
  247: {
    eventID: 5,
    size: 240,
    children: [
      6931,
      989
    ],
    parentId: 136
  },
  248: {
    eventID: 137,
    size: 23,
    parentId: 108
  },
  249: {
    eventID: 6,
    size: 366,
    children: [
      410,
      2754
    ],
    parentId: 152
  },
  250: {
    eventID: 141,
    size: 53,
    children: [
      251
    ],
    parentId: 103
  },
  251: {
    eventID: 6,
    size: 35,
    children: [
      313
    ],
    parentId: 250
  },
  256: {
    eventID: 141,
    size: 41,
    children: [
      257
    ],
    parentId: 108
  },
  257: {
    eventID: 6,
    size: 28,
    parentId: 256
  },
  262: {
    eventID: 45,
    size: 34,
    parentId: 196
  },
  272: {
    eventID: 6,
    size: 114,
    parentId: 1
  },
  273: {
    eventID: 5,
    size: 43,
    parentId: 197
  },
  274: {
    eventID: 19,
    size: 40,
    parentId: 136
  },
  278: {
    eventID: 136,
    size: 23,
    parentId: 90
  },
  283: {
    eventID: 137,
    size: 87,
    children: [
      284
    ],
    parentId: 105
  },
  284: {
    eventID: 137,
    size: 74,
    children: [
      493
    ],
    parentId: 283
  },
  287: {
    eventID: 5,
    size: 210,
    children: [
      6552
    ],
    parentId: 184
  },
  293: {
    eventID: 6,
    size: 22,
    parentId: 209
  },
  295: {
    eventID: 136,
    size: 35,
    children: [
      538
    ],
    parentId: 67
  },
  298: {
    eventID: 6,
    size: 45,
    parentId: 137
  },
  305: {
    eventID: 6,
    size: 24,
    parentId: 144
  },
  306: {
    eventID: 141,
    size: 20,
    parentId: 278
  },
  310: {
    eventID: 161,
    size: 59,
    children: [
      353
    ],
    parentId: 34
  },
  313: {
    eventID: 5,
    size: 27,
    parentId: 251
  },
  314: {
    eventID: 5,
    size: 92,
    parentId: 241
  },
  315: {
    eventID: 18,
    size: 35,
    parentId: 51
  },
  319: {
    eventID: 136,
    size: 20,
    parentId: 24
  },
  334: {
    eventID: 161,
    size: 20,
    parentId: 238
  },
  342: {
    eventID: 141,
    size: 35,
    parentId: 123
  },
  348: {
    eventID: 136,
    size: 56,
    children: [
      349
    ],
    parentId: 104
  },
  349: {
    eventID: 141,
    size: 28,
    children: [
      578
    ],
    parentId: 348
  },
  350: {
    eventID: 137,
    size: 96,
    children: [
      589,
      3409
    ],
    parentId: 6
  },
  353: {
    eventID: 161,
    size: 54,
    children: [
      1935,
      429
    ],
    parentId: 310
  },
  355: {
    eventID: 141,
    size: 30,
    children: [
      437
    ],
    parentId: 61
  },
  368: {
    eventID: 18,
    size: 21,
    parentId: 11
  },
  384: {
    eventID: 9,
    size: 27,
    parentId: 383
  },
  385: {
    eventID: 164,
    size: 28,
    children: [
      687
    ],
    parentId: 49
  },
  404: {
    eventID: 5,
    size: 161,
    children: [
      6513
    ],
    parentId: 245
  },
  410: {
    eventID: 5,
    size: 120,
    parentId: 249
  },
  411: {
    eventID: 5,
    size: 26,
    parentId: 188
  },
  429: {
    eventID: 141,
    size: 21,
    parentId: 353
  },
  430: {
    eventID: 137,
    size: 139,
    children: [
      3458,
      528,
      968
    ],
    parentId: 47
  },
  437: {
    eventID: 6,
    size: 22,
    parentId: 355
  },
  480: {
    eventID: 137,
    size: 44,
    children: [
      2721
    ],
    parentId: 31
  },
  493: {
    eventID: 141,
    size: 67,
    children: [
      715
    ],
    parentId: 284
  },
  497: {
    eventID: 5,
    size: 25,
    parentId: 221
  },
  509: {
    eventID: 19,
    size: 58,
    parentId: 129
  },
  516: {
    eventID: 141,
    size: 91,
    children: [
      543
    ],
    parentId: 52
  },
  519: {
    eventID: 137,
    size: 125,
    children: [
      704,
      556,
      1005
    ],
    parentId: 53
  },
  525: {
    eventID: 164,
    size: 45,
    children: [
      526
    ],
    parentId: 52
  },
  526: {
    eventID: 9,
    size: 45,
    children: [
      1015
    ],
    parentId: 525
  },
  528: {
    eventID: 164,
    size: 28,
    children: [
      529
    ],
    parentId: 430
  },
  529: {
    eventID: 9,
    size: 28,
    children: [
      1016
    ],
    parentId: 528
  },
  531: {
    eventID: 164,
    size: 53,
    children: [
      532
    ],
    parentId: 33
  },
  532: {
    eventID: 9,
    size: 53,
    children: [
      1017
    ],
    parentId: 531
  },
  538: {
    eventID: 136,
    size: 22,
    parentId: 295
  },
  543: {
    eventID: 6,
    size: 26,
    children: [
      689
    ],
    parentId: 516
  },
  549: {
    eventID: 5,
    size: 22,
    parentId: 135
  },
  556: {
    eventID: 164,
    size: 24,
    children: [
      557
    ],
    parentId: 519
  },
  557: {
    eventID: 9,
    size: 24,
    children: [
      1034
    ],
    parentId: 556
  },
  559: {
    eventID: 5,
    size: 25,
    parentId: 175
  },
  563: {
    eventID: 161,
    size: 31,
    parentId: 30
  },
  575: {
    eventID: 161,
    size: 20,
    parentId: 6
  },
  578: {
    eventID: 6,
    size: 26,
    parentId: 349
  },
  588: {
    eventID: 161,
    size: 56,
    parentId: 11
  },
  589: {
    eventID: 136,
    size: 27,
    children: [
      590
    ],
    parentId: 350
  },
  590: {
    eventID: 137,
    size: 26,
    children: [
      671
    ],
    parentId: 589
  },
  591: {
    eventID: 161,
    size: 203,
    parentId: 67
  },
  593: {
    eventID: 19,
    size: 26,
    parentId: 184
  },
  602: {
    eventID: 19,
    size: 83,
    children: [
      679
    ],
    parentId: 193
  },
  606: {
    eventID: 164,
    size: 40,
    children: [
      607
    ],
    parentId: 67
  },
  607: {
    eventID: 9,
    size: 42,
    children: [
      1323
    ],
    parentId: 606
  },
  609: {
    eventID: 141,
    size: 59,
    children: [
      610
    ],
    parentId: 79
  },
  610: {
    eventID: 141,
    size: 31,
    children: [
      611
    ],
    parentId: 609
  },
  611: {
    eventID: 141,
    size: 31,
    children: [
      612
    ],
    parentId: 610
  },
  612: {
    eventID: 141,
    size: 31,
    children: [
      613
    ],
    parentId: 611
  },
  613: {
    eventID: 141,
    size: 32,
    children: [
      614
    ],
    parentId: 612
  },
  614: {
    eventID: 141,
    size: 33,
    children: [
      664
    ],
    parentId: 613
  },
  637: {
    eventID: 18,
    size: 30,
    parentId: 57
  },
  664: {
    eventID: 141,
    size: 37,
    parentId: 614
  },
  671: {
    eventID: 141,
    size: 25,
    parentId: 590
  },
  679: {
    eventID: 21,
    size: 55,
    parentId: 602
  },
  680: {
    eventID: 5,
    size: 20,
    parentId: 298
  },
  687: {
    eventID: 164,
    size: 23,
    parentId: 385
  },
  689: {
    eventID: 5,
    size: 23,
    parentId: 543
  },
  690: {
    eventID: 5,
    size: 20,
    parentId: 257
  },
  704: {
    eventID: 137,
    size: 74,
    children: [
      2336,
      5553
    ],
    parentId: 519
  },
  715: {
    eventID: 6,
    size: 50,
    children: [
      901
    ],
    parentId: 493
  },
  745: {
    eventID: 19,
    size: 68,
    children: [
      872
    ],
    parentId: 194
  },
  751: {
    eventID: 13,
    size: 115,
    children: [
      763,
      1094
    ],
    parentId: 208
  },
  752: {
    eventID: 13,
    size: 75,
    children: [
      789,
      1099
    ],
    parentId: 193
  },
  763: {
    eventID: 141,
    size: 64,
    children: [
      764
    ],
    parentId: 751
  },
  764: {
    eventID: 6,
    size: 63,
    children: [
      766
    ],
    parentId: 763
  },
  766: {
    eventID: 141,
    size: 63,
    children: [
      767
    ],
    parentId: 764
  },
  767: {
    eventID: 141,
    size: 63,
    children: [
      768
    ],
    parentId: 766
  },
  768: {
    eventID: 141,
    size: 63,
    children: [
      769
    ],
    parentId: 767
  },
  769: {
    eventID: 141,
    size: 63,
    children: [
      770
    ],
    parentId: 768
  },
  770: {
    eventID: 141,
    size: 63,
    children: [
      854
    ],
    parentId: 769
  },
  789: {
    eventID: 141,
    size: 49,
    children: [
      790
    ],
    parentId: 752
  },
  790: {
    eventID: 6,
    size: 48,
    children: [
      791
    ],
    parentId: 789
  },
  791: {
    eventID: 141,
    size: 48,
    children: [
      792
    ],
    parentId: 790
  },
  792: {
    eventID: 141,
    size: 48,
    children: [
      793
    ],
    parentId: 791
  },
  793: {
    eventID: 141,
    size: 48,
    children: [
      794
    ],
    parentId: 792
  },
  794: {
    eventID: 141,
    size: 48,
    children: [
      795
    ],
    parentId: 793
  },
  795: {
    eventID: 141,
    size: 48,
    children: [
      844
    ],
    parentId: 794
  },
  844: {
    eventID: 141,
    size: 46,
    children: [
      913
    ],
    parentId: 795
  },
  854: {
    eventID: 141,
    size: 59,
    children: [
      1199
    ],
    parentId: 770
  },
  872: {
    eventID: 21,
    size: 52,
    parentId: 745
  },
  876: {
    eventID: 19,
    size: 144,
    children: [
      883
    ],
    parentId: 208
  },
  883: {
    eventID: 21,
    size: 91,
    parentId: 876
  },
  889: {
    eventID: 161,
    size: 25,
    children: [
      1687
    ],
    parentId: 120
  },
  901: {
    eventID: 5,
    size: 48,
    parentId: 715
  },
  913: {
    eventID: 141,
    size: 26,
    children: [
      914
    ],
    parentId: 844
  },
  914: {
    eventID: 141,
    size: 26,
    children: [
      915
    ],
    childEndCount: null
  },
  915: {
    eventID: 141,
    size: 26,
    children: [
      916
    ],
    childEndCount: null
  },
  916: {
    eventID: 141,
    size: 26,
    children: [
      999
    ],
    childEndCount: null
  },
  968: {
    eventID: 141,
    size: 32,
    parentId: 430
  },
  989: {
    eventID: 19,
    size: 28,
    children: [
      1864
    ],
    parentId: 247
  },
  999: {
    eventID: 141,
    size: 28,
    childEndCount: 7
  },
  1005: {
    eventID: 141,
    size: 38,
    parentId: 519
  },
  1015: {
    eventID: 163,
    size: 77,
    parentId: 526
  },
  1016: {
    eventID: 163,
    size: 41,
    parentId: 529
  },
  1017: {
    eventID: 163,
    size: 83,
    parentId: 532
  },
  1034: {
    eventID: 163,
    size: 36,
    parentId: 557
  },
  1059: {
    eventID: 11,
    size: 22,
    parentId: 937
  },
  1094: {
    eventID: 13,
    size: 38,
    children: [
      1157
    ],
    parentId: 751
  },
  1099: {
    eventID: 13,
    size: 22,
    parentId: 752
  },
  1157: {
    eventID: 141,
    size: 32,
    children: [
      1158
    ],
    parentId: 1094
  },
  1158: {
    eventID: 6,
    size: 32,
    children: [
      1159
    ],
    parentId: 1157
  },
  1159: {
    eventID: 141,
    size: 32,
    children: [
      1160
    ],
    parentId: 1158
  },
  1160: {
    eventID: 141,
    size: 32,
    children: [
      1161
    ],
    parentId: 1159
  },
  1161: {
    eventID: 141,
    size: 32,
    children: [
      1166
    ],
    parentId: 1160
  },
  1166: {
    eventID: 141,
    size: 32,
    children: [
      1167
    ],
    parentId: 1161
  },
  1167: {
    eventID: 141,
    size: 32,
    children: [
      1194
    ],
    parentId: 1166
  },
  1194: {
    eventID: 141,
    size: 33,
    children: [
      1195
    ],
    parentId: 1167
  },
  1195: {
    eventID: 141,
    size: 23,
    children: [
      1200
    ],
    childEndCount: null
  },
  1199: {
    eventID: 141,
    size: 35,
    children: [
      1201
    ],
    parentId: 854
  },
  1200: {
    eventID: 141,
    size: 23,
    children: [
      1203
    ],
    childEndCount: null
  },
  1201: {
    eventID: 141,
    size: 35,
    children: [
      1204
    ],
    childEndCount: null
  },
  1203: {
    eventID: 141,
    size: 23,
    children: [
      1480
    ],
    childEndCount: null
  },
  1204: {
    eventID: 141,
    size: 34,
    children: [
      2348
    ],
    childEndCount: null
  },
  1323: {
    eventID: 163,
    size: 54,
    parentId: 607
  },
  1480: {
    eventID: 141,
    size: 23,
    children: [
      1583
    ],
    childEndCount: null
  },
  1567: {
    eventID: 163,
    size: 27,
    parentId: 49
  },
  1583: {
    eventID: 141,
    size: 27,
    childEndCount: 11
  },
  1644: {
    eventID: 19,
    size: 28,
    parentId: 171
  },
  1672: {
    eventID: 13,
    size: 71,
    parentId: 154
  },
  1687: {
    eventID: 161,
    size: 24,
    children: [
      2922
    ],
    parentId: 889
  },
  1737: {
    eventID: 13,
    size: 34,
    parentId: 155
  },
  1792: {
    eventID: 141,
    size: 25,
    parentId: 120
  },
  1800: {
    eventID: 163,
    size: 34,
    parentId: 28
  },
  1864: {
    eventID: 21,
    size: 25,
    parentId: 989
  },
  1935: {
    eventID: 161,
    size: 34,
    children: [
      1936
    ],
    parentId: 353
  },
  1936: {
    eventID: 161,
    size: 35,
    children: [
      1947
    ],
    parentId: 1935
  },
  1937: {
    eventID: 137,
    size: 60,
    children: [
      1938
    ],
    parentId: 43
  },
  1938: {
    eventID: 137,
    size: 46,
    children: [
      1939
    ],
    parentId: 1937
  },
  1939: {
    eventID: 137,
    size: 47,
    children: [
      2725
    ],
    parentId: 1938
  },
  1947: {
    eventID: 161,
    size: 34,
    parentId: 1936
  },
  1953: {
    eventID: 6,
    size: 20,
    parentId: 1589
  },
  1992: {
    eventID: 11,
    size: 20,
    parentId: 1670
  },
  2025: {
    eventID: 164,
    size: 35,
    children: [
      2031
    ],
    parentId: 28
  },
  2031: {
    eventID: 164,
    size: 27,
    children: [
      2037
    ],
    parentId: 2025
  },
  2037: {
    eventID: 164,
    size: 26,
    parentId: 2031
  },
  2336: {
    eventID: 141,
    size: 40,
    children: [
      2337
    ],
    parentId: 704
  },
  2337: {
    eventID: 6,
    size: 25,
    parentId: 2336
  },
  2348: {
    eventID: 141,
    size: 35,
    children: [
      2366
    ],
    childEndCount: 1
  },
  2366: {
    eventID: 141,
    size: 32,
    childEndCount: 7
  },
  2448: {
    eventID: 19,
    size: 26,
    children: [
      2452
    ],
    parentId: 210
  },
  2452: {
    eventID: 21,
    size: 24,
    parentId: 2448
  },
  2458: {
    eventID: 141,
    size: 71,
    parentId: 51
  },
  2570: {
    eventID: 164,
    size: 20,
    children: [
      2813
    ],
    parentId: 2037
  },
  2690: {
    eventID: 141,
    size: 62,
    parentId: 57
  },
  2691: {
    eventID: 163,
    size: 926,
    children: [
      2735
    ],
    parentId: 14
  },
  2692: {
    eventID: 141,
    size: 22,
    parentId: 129
  },
  2694: {
    eventID: 141,
    size: 44,
    children: [
      2709
    ],
    parentId: 127
  },
  2705: {
    eventID: 163,
    size: 240,
    children: [
      2706
    ],
    parentId: 42
  },
  2706: {
    eventID: 163,
    size: 240,
    children: [
      2990
    ],
    parentId: 2705
  },
  2709: {
    eventID: 141,
    size: 25,
    children: [
      2710
    ],
    parentId: 2694
  },
  2710: {
    eventID: 141,
    size: 25,
    children: [
      2716
    ],
    parentId: 2709
  },
  2716: {
    eventID: 141,
    size: 25,
    children: [
      2718
    ],
    parentId: 2710
  },
  2717: {
    eventID: 141,
    size: 24,
    parentId: 136
  },
  2718: {
    eventID: 141,
    size: 26,
    children: [
      2747
    ],
    parentId: 2716
  },
  2721: {
    eventID: 137,
    size: 36,
    children: [
      2722
    ],
    parentId: 480
  },
  2722: {
    eventID: 137,
    size: 35,
    children: [
      2739
    ],
    parentId: 2721
  },
  2725: {
    eventID: 137,
    size: 43,
    children: [
      2726
    ],
    parentId: 1939
  },
  2726: {
    eventID: 137,
    size: 43,
    children: [
      2795
    ],
    parentId: 2725
  },
  2735: {
    eventID: 163,
    size: 924,
    children: [
      2736
    ],
    parentId: 2691
  },
  2736: {
    eventID: 163,
    size: 921,
    children: [
      4027
    ],
    parentId: 2735
  },
  2739: {
    eventID: 137,
    size: 35,
    children: [
      2740
    ],
    parentId: 2722
  },
  2740: {
    eventID: 137,
    size: 36,
    children: [
      2814
    ],
    parentId: 2739
  },
  2747: {
    eventID: 141,
    size: 28,
    children: [
      2819
    ],
    parentId: 2718
  },
  2754: {
    eventID: 141,
    size: 21,
    parentId: 249
  },
  2795: {
    eventID: 137,
    size: 35,
    children: [
      3273
    ],
    parentId: 2726
  },
  2813: {
    eventID: 164,
    size: 24,
    parentId: 2570
  },
  2814: {
    eventID: 137,
    size: 30,
    children: [
      3314
    ],
    parentId: 2740
  },
  2819: {
    eventID: 141,
    size: 25,
    parentId: 2747
  },
  2922: {
    eventID: 161,
    size: 24,
    parentId: 1687
  },
  2990: {
    eventID: 163,
    size: 240,
    children: [
      4070
    ],
    parentId: 2706
  },
  3273: {
    eventID: 141,
    size: 38,
    parentId: 2795
  },
  3314: {
    eventID: 141,
    size: 23,
    parentId: 2814
  },
  3409: {
    eventID: 164,
    size: 34,
    children: [
      3410
    ],
    parentId: 350
  },
  3410: {
    eventID: 9,
    size: 38,
    children: [
      4825
    ],
    parentId: 3409
  },
  3458: {
    eventID: 137,
    size: 87,
    children: [
      3872,
      3879
    ],
    parentId: 430
  },
  3872: {
    eventID: 137,
    size: 57,
    children: [
      5479
    ],
    parentId: 3458
  },
  3879: {
    eventID: 141,
    size: 47,
    parentId: 3458
  },
  4027: {
    eventID: 163,
    size: 921,
    children: [
      4336
    ],
    parentId: 2736
  },
  4070: {
    eventID: 163,
    size: 240,
    children: [
      4339
    ],
    parentId: 2990
  },
  4336: {
    eventID: 163,
    size: 919,
    children: [
      4404
    ],
    parentId: 4027
  },
  4339: {
    eventID: 163,
    size: 240,
    children: [
      4406
    ],
    parentId: 4070
  },
  4404: {
    eventID: 163,
    size: 917,
    children: [
      4516
    ],
    parentId: 4336
  },
  4406: {
    eventID: 163,
    size: 240,
    children: [
      4519
    ],
    parentId: 4339
  },
  4516: {
    eventID: 163,
    size: 913,
    children: [
      4584
    ],
    parentId: 4404
  },
  4519: {
    eventID: 163,
    size: 240,
    children: [
      4587
    ],
    parentId: 4406
  },
  4584: {
    eventID: 163,
    size: 915,
    children: [
      4608
    ],
    parentId: 4516
  },
  4587: {
    eventID: 163,
    size: 240,
    children: [
      4611
    ],
    parentId: 4519
  },
  4608: {
    eventID: 163,
    size: 912,
    children: [
      4625
    ],
    parentId: 4584
  },
  4611: {
    eventID: 163,
    size: 240,
    children: [
      4628
    ],
    parentId: 4587
  },
  4625: {
    eventID: 163,
    size: 910,
    children: [
      4640
    ],
    parentId: 4608
  },
  4628: {
    eventID: 163,
    size: 241,
    children: [
      4643
    ],
    parentId: 4611
  },
  4640: {
    eventID: 163,
    size: 911,
    children: [
      4655
    ],
    parentId: 4625
  },
  4643: {
    eventID: 163,
    size: 239,
    children: [
      4658
    ],
    parentId: 4628
  },
  4655: {
    eventID: 163,
    size: 909,
    children: [
      4673
    ],
    parentId: 4640
  },
  4658: {
    eventID: 163,
    size: 239,
    children: [
      4676
    ],
    parentId: 4643
  },
  4673: {
    eventID: 163,
    size: 910,
    children: [
      4694
    ],
    parentId: 4655
  },
  4676: {
    eventID: 163,
    size: 239,
    children: [
      4697
    ],
    parentId: 4658
  },
  4694: {
    eventID: 163,
    size: 909,
    children: [
      4721
    ],
    parentId: 4673
  },
  4697: {
    eventID: 163,
    size: 239,
    children: [
      4724
    ],
    parentId: 4676
  },
  4721: {
    eventID: 163,
    size: 1735,
    children: [
      4745
    ],
    parentId: 4694
  },
  4724: {
    eventID: 163,
    size: 462,
    parentId: 4697
  },
  4726: {
    eventID: 163,
    size: 27,
    childEndCount: 12
  },
  4745: {
    eventID: 163,
    size: 57,
    children: [
      4763
    ],
    childEndCount: 1
  },
  4761: {
    eventID: 163,
    size: 21,
    childEndCount: 10
  },
  4763: {
    eventID: 163,
    size: 61,
    children: [
      4785
    ],
    childEndCount: 6
  },
  4785: {
    eventID: 163,
    size: 98,
    childEndCount: 49
  },
  4825: {
    eventID: 163,
    size: 50,
    parentId: 3410
  },
  5461: {
    eventID: 19,
    size: 20,
    parentId: 404
  },
  5479: {
    eventID: 137,
    size: 43,
    children: [
      5797
    ],
    parentId: 3872
  },
  5553: {
    eventID: 137,
    size: 47,
    children: [
      5629
    ],
    parentId: 704
  },
  5629: {
    eventID: 137,
    size: 30,
    children: [
      6284
    ],
    parentId: 5553
  },
  5797: {
    eventID: 137,
    size: 38,
    children: [
      6260
    ],
    parentId: 5479
  },
  6260: {
    eventID: 137,
    size: 33,
    children: [
      6444
    ],
    parentId: 5797
  },
  6284: {
    eventID: 137,
    size: 26,
    children: [
      6326
    ],
    parentId: 5629
  },
  6326: {
    eventID: 137,
    size: 23,
    parentId: 6284
  },
  6438: {
    eventID: 781,
    size: 45,
    children: [
      6489
    ],
    parentId: 2
  },
  6444: {
    eventID: 137,
    size: 24,
    parentId: 6260
  },
  6448: {
    eventID: 781,
    size: 114,
    children: [
      6521
    ],
    parentId: 193
  },
  6449: {
    eventID: 781,
    size: 239,
    children: [
      6450
    ],
    parentId: 1
  },
  6450: {
    eventID: 136,
    size: 103,
    children: [
      7092
    ],
    parentId: 6449
  },
  6463: {
    eventID: 781,
    size: 181,
    children: [
      6488
    ],
    parentId: 208
  },
  6471: {
    eventID: 781,
    size: 24,
    children: [
      6472
    ],
    parentId: 34
  },
  6472: {
    eventID: 781,
    size: 25,
    parentId: 6471
  },
  6488: {
    eventID: 781,
    size: 169,
    children: [
      6497,
      7086
    ],
    parentId: 6463
  },
  6489: {
    eventID: 781,
    size: 31,
    parentId: 6438
  },
  6497: {
    eventID: 19,
    size: 116,
    children: [
      6498
    ],
    parentId: 6488
  },
  6498: {
    eventID: 781,
    size: 176,
    children: [
      6594
    ],
    parentId: 6497
  },
  6502: {
    eventID: 781,
    size: 29,
    children: [
      6503
    ],
    parentId: 155
  },
  6503: {
    eventID: 781,
    size: 29,
    children: [
      6504
    ],
    parentId: 6502
  },
  6504: {
    eventID: 19,
    size: 24,
    children: [
      6505
    ],
    parentId: 6503
  },
  6505: {
    eventID: 781,
    size: 47,
    parentId: 6504
  },
  6513: {
    eventID: 781,
    size: 22,
    children: [
      6514
    ],
    parentId: 404
  },
  6514: {
    eventID: 781,
    size: 22,
    parentId: 6513
  },
  6516: {
    eventID: 781,
    size: 26,
    parentId: 6515
  },
  6521: {
    eventID: 781,
    size: 111,
    children: [
      6990,
      6550
    ],
    parentId: 6448
  },
  6526: {
    eventID: 781,
    size: 28,
    children: [
      6527
    ],
    parentId: 210
  },
  6527: {
    eventID: 781,
    size: 31,
    parentId: 6526
  },
  6529: {
    eventID: 781,
    size: 24,
    parentId: 6528
  },
  6538: {
    eventID: 781,
    size: 34,
    children: [
      6539
    ],
    parentId: 154
  },
  6539: {
    eventID: 781,
    size: 33,
    children: [
      6540
    ],
    parentId: 6538
  },
  6540: {
    eventID: 19,
    size: 31,
    children: [
      6541
    ],
    parentId: 6539
  },
  6541: {
    eventID: 781,
    size: 57,
    parentId: 6540
  },
  6550: {
    eventID: 19,
    size: 69,
    children: [
      6551
    ],
    parentId: 6521
  },
  6551: {
    eventID: 781,
    size: 109,
    children: [
      7034
    ],
    parentId: 6550
  },
  6552: {
    eventID: 781,
    size: 29,
    children: [
      6553
    ],
    parentId: 287
  },
  6553: {
    eventID: 781,
    size: 24,
    parentId: 6552
  },
  6554: {
    eventID: 781,
    size: 32,
    children: [
      6555
    ],
    parentId: 56
  },
  6555: {
    eventID: 781,
    size: 44,
    parentId: 6554
  },
  6594: {
    eventID: 781,
    size: 51,
    children: [
      6595
    ],
    parentId: 6498
  },
  6595: {
    eventID: 781,
    size: 51,
    children: [
      6596
    ],
    parentId: 6594
  },
  6596: {
    eventID: 21,
    size: 49,
    children: [
      6597
    ],
    parentId: 6595
  },
  6597: {
    eventID: 781,
    size: 93,
    parentId: 6596
  },
  6613: {
    eventID: 781,
    size: 59,
    children: [
      6614
    ],
    parentId: 57
  },
  6614: {
    eventID: 781,
    size: 52,
    children: [
      6615
    ],
    parentId: 6613
  },
  6615: {
    eventID: 6,
    size: 41,
    children: [
      6616
    ],
    parentId: 6614
  },
  6616: {
    eventID: 781,
    size: 51,
    children: [
      6684
    ],
    parentId: 6615
  },
  6620: {
    eventID: 781,
    size: 22,
    parentId: 6619
  },
  6661: {
    eventID: 781,
    size: 34,
    children: [
      6662
    ],
    parentId: 51
  },
  6662: {
    eventID: 781,
    size: 34,
    children: [
      6663
    ],
    parentId: 6661
  },
  6663: {
    eventID: 6,
    size: 27,
    children: [
      6664
    ],
    parentId: 6662
  },
  6664: {
    eventID: 781,
    size: 39,
    children: [
      6683
    ],
    parentId: 6663
  },
  6683: {
    eventID: 5,
    size: 25,
    parentId: 6664
  },
  6684: {
    eventID: 5,
    size: 54,
    parentId: 6616
  },
  6797: {
    eventID: 781,
    size: 27,
    parentId: 6796
  },
  6799: {
    eventID: 781,
    size: 40,
    children: [
      6800
    ],
    parentId: 194
  },
  6800: {
    eventID: 781,
    size: 40,
    children: [
      7123
    ],
    parentId: 6799
  },
  6931: {
    eventID: 781,
    size: 34,
    children: [
      6932
    ],
    parentId: 247
  },
  6932: {
    eventID: 781,
    size: 34,
    children: [
      6933
    ],
    parentId: 6931
  },
  6933: {
    eventID: 19,
    size: 28,
    children: [
      6934
    ],
    parentId: 6932
  },
  6934: {
    eventID: 781,
    size: 43,
    parentId: 6933
  },
  6990: {
    eventID: 781,
    size: 38,
    children: [
      7508
    ],
    parentId: 6521
  },
  7003: {
    eventID: 781,
    size: 24,
    parentId: 7002
  },
  7034: {
    eventID: 781,
    size: 27,
    children: [
      7035
    ],
    parentId: 6551
  },
  7035: {
    eventID: 781,
    size: 27,
    children: [
      7036
    ],
    parentId: 7034
  },
  7036: {
    eventID: 21,
    size: 26,
    children: [
      7037
    ],
    parentId: 7035
  },
  7037: {
    eventID: 781,
    size: 50,
    parentId: 7036
  },
  7086: {
    eventID: 781,
    size: 45,
    children: [
      7183
    ],
    parentId: 6488
  },
  7092: {
    eventID: 136,
    size: 44,
    children: [
      7093
    ],
    parentId: 6450
  },
  7093: {
    eventID: 136,
    size: 34,
    children: [
      7094
    ],
    parentId: 7092
  },
  7094: {
    eventID: 137,
    size: 34,
    parentId: 7093
  },
  7123: {
    eventID: 19,
    size: 31,
    children: [
      7124
    ],
    parentId: 6800
  },
  7124: {
    eventID: 781,
    size: 50,
    parentId: 7123
  },
  7131: {
    eventID: 781,
    size: 22,
    children: [
      7132
    ],
    parentId: 136
  },
  7132: {
    eventID: 781,
    size: 22,
    children: [
      7133
    ],
    parentId: 7131
  },
  7133: {
    eventID: 19,
    size: 22,
    children: [
      7134
    ],
    parentId: 7132
  },
  7134: {
    eventID: 781,
    size: 42,
    parentId: 7133
  },
  7151: {
    eventID: 781,
    size: 24,
    children: [
      7152
    ],
    parentId: 129
  },
  7152: {
    eventID: 781,
    size: 23,
    children: [
      7153
    ],
    parentId: 7151
  },
  7153: {
    eventID: 19,
    size: 21,
    children: [
      7154
    ],
    parentId: 7152
  },
  7154: {
    eventID: 781,
    size: 41,
    parentId: 7153
  },
  7183: {
    eventID: 781,
    size: 37,
    children: [
      7353
    ],
    parentId: 7086
  },
  7353: {
    eventID: 781,
    size: 43,
    parentId: 7183
  },
  7508: {
    eventID: 781,
    size: 26,
    children: [
      7509
    ],
    parentId: 6990
  },
  7509: {
    eventID: 781,
    size: 33,
    parentId: 7508
  },
  7631: {
    eventID: 781,
    size: 22,
    parentId: 7630
  },
  7708: {
    eventID: 781,
    size: 27,
    parentId: 7707
  },
  7736: {
    eventID: 137,
    size: 20,
    parentId: 7735
  }
};

const size = 48818;
Object.keys(data).forEach(curr => {
  const currnode = data[curr];
  const parent = currnode.parentId ? data[currnode.parentId] : {depth: -1};
  if (!parent) {
    return;
  }
  currnode.depth = parent.depth + 1;
  currnode.x = currnode.x || 0;
  let childrenX = currnode.x;
  if (currnode.children) {
    currnode.children.forEach(c => {data[c].x = childrenX; childrenX += data[c].size;});
  }
});

const nodesKey = Object.keys(data).filter(k => data[k].x >= 0 && data[k].depth >= 0);
const nodes = nodesKey.map(k => data[k]);
const color = d3.scaleOrdinal(d3.schemeCategory20c);

const svg = d3.select('body').append('svg').attr('width', 300).attr('height', 1000);
svg.selectAll('rect').data(nodes).enter().append('rect')
  .attr('x', d => 300 * d.x / size)
  .attr('height', 60)
  .attr('y', d => d.depth * 60)
  .attr('width', d => Math.max(3, 300 * d.size / size))
.style('stroke', 'white')
  .style('strokeWidth', 0.5)
  .style('fill', d => color(d.eventID)).style('fill', '#aaa');

            
          
!
999px

Console