Skip to content

Instantly share code, notes, and snippets.

@gniemetz

gniemetz/README.md

Last active June 7, 2020 18:56
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save gniemetz/4618602 to your computer and use it in GitHub Desktop.
Save gniemetz/4618602 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

d3js Multiline chart with brushing and mouseover

Raw
data.txt
Uhrzeit,Durchschn,Anz,Gesamt
05:00,0,0,0
05:01,0,0,0
05:02,0,0,0
05:03,0,0,0
05:04,0,0,0
05:05,0,0,0
05:06,0,0,0
05:07,0,0,0
05:08,0,0,0
05:09,0,0,0
05:10,0,0,0
05:11,0,0,0
05:12,0,0,0
05:13,0,0,0
05:14,0,0,0
05:15,0,0,0
05:16,0,0,0
05:17,0,0,0
05:18,0,0,0
05:19,0,0,0
05:20,0,0,0
05:21,0,0,0
05:22,0,0,0
05:23,11,110,1286
05:24,78,126,9857
05:25,29,113,3341
05:26,7,231,1771
05:27,7,133,964
05:28,6,214,1453
05:29,9,234,2251
05:30,5,287,1470
05:31,5,308,1559
05:32,5,307,1587
05:33,4,313,1516
05:34,5,294,1738
05:35,5,278,1396
05:36,7,110,861
05:37,4,316,1334
05:38,5,307,1645
05:39,4,337,1516
05:40,3,283,1034
05:41,9,229,2154
05:42,7,183,1343
05:43,6,250,1584
05:44,4,214,902
05:45,9,242,2337
05:46,4,181,890
05:47,133,57,7634
05:48,0,0,0
05:49,0,0,0
05:50,0,0,0
05:51,0,0,0
05:52,2,31,64
05:53,1646,2,3292
05:54,373,11,4105
05:55,6,82,515
05:56,10,170,1803
05:57,7,214,1554
05:58,80,60,4810
05:59,28,66,1854
06:00,4,150,741
06:01,0,0,0
06:02,0,0,0
06:03,3,38,118
06:04,1,107,186
06:05,3,16,48
06:06,3,46,158
06:07,2,85,224
06:08,5,71,381
06:09,0,0,0
06:10,3,41,132
06:11,1,59,107
06:12,2,43,108
06:13,4,74,315
06:14,11,101,1112
06:15,25,31,788
06:16,4,29,123
06:17,2,58,141
06:18,13,184,2516
06:19,6,206,1350
06:20,7,318,2474
06:21,6,424,2800
06:22,10,505,5232
06:23,7,346,2504
06:24,88,336,29693
06:25,4,468,2174
06:26,6,468,3077
06:27,6,446,2909
06:28,10,535,5766
06:29,19,278,5483
06:30,10,541,5868
06:31,10,496,5042
06:32,7,519,4143
06:33,8,1081,9727
06:34,10,941,9516
06:35,9,838,7678
06:36,10,617,6590
06:37,9,1382,12862
06:38,11,2089,23961
06:39,13,2437,32202
06:40,8,2477,19817
06:41,10,1877,19896
06:42,6,1832,11064
06:43,7,2502,19586
06:44,8,2725,22393
06:45,11,3062,35390
06:46,8,3462,31131
06:47,7,3616,25840
06:48,7,3564,27536
06:49,6,3429,20978
06:50,10,3143,33370
06:51,8,3640,31980
06:52,7,3221,25346
06:53,7,4397,33242
06:54,8,4766,39979
06:55,13,4828,63691
06:56,9,4483,41226
06:57,8,4825,41430
06:58,9,5527,52980
06:59,10,6763,73570
07:00,9,5581,54445
07:01,10,6641,70715
07:02,10,4944,50470
07:03,10,5750,62132
07:04,10,4613,50388
07:05,11,5352,59215
07:06,11,6185,71411
07:07,8,5876,51874
07:08,9,6014,55236
07:09,12,6542,83932
07:10,12,6716,85073
07:11,10,7035,76857
07:12,12,8312,102823
07:13,10,8880,92028
07:14,10,8330,87170
07:15,9,8266,79595
07:16,10,8527,85309
07:17,10,8240,90356
07:18,11,7786,91471
07:19,12,8116,102874
07:20,10,6594,67667
07:21,12,5804,70927
07:22,11,7733,91078
07:23,11,7269,83906
07:24,11,6334,70226
07:25,11,5641,66782
07:26,10,6465,69646
07:27,11,7963,95264
07:28,11,8461,99585
07:29,10,8495,89741
07:30,12,8830,108301
07:31,12,8923,110745
07:32,13,9056,120671
07:33,12,10893,134117
07:34,12,8630,106080
07:35,13,8351,115628
07:36,13,8644,120988
07:37,19,9638,185787
07:38,16,9977,164399
07:39,17,8660,153680
07:40,17,9207,158096
07:41,13,9012,123688
07:42,11,7577,88860
07:43,12,7794,94958
07:44,12,9842,119927
07:45,14,8885,126532
07:46,13,8802,117186
07:47,15,9955,151660
07:48,15,10583,163337
07:49,19,7760,150067
07:50,13,9981,133408
07:51,11,9955,118224
07:52,13,10343,138681
07:53,15,9881,152075
07:54,27,10198,276600
07:55,13,9962,131391
07:56,15,9972,153635
07:57,17,10368,177540
07:58,14,9828,139149
07:59,16,10040,166585
08:00,16,10338,171707
08:01,14,10368,154161
08:02,16,12138,197731
08:03,14,9692,135747
08:04,16,11240,183623
08:05,13,11049,145273
08:06,13,11178,147643
08:07,14,11081,165140
08:08,15,10615,169290
08:09,17,11251,199167
08:10,15,11349,174361
08:11,14,11663,172082
08:12,11,11429,131236
08:13,12,11433,141242
08:14,16,12132,204107
08:15,19,12589,250836
08:16,16,11526,195071
08:17,14,11115,157604
08:18,15,12055,190053
08:19,16,10728,180328
08:20,14,9897,147556
08:21,15,9173,139479
08:22,16,8427,139803
08:23,19,10621,205674
08:24,19,10053,195042
08:25,25,12782,322542
08:26,18,11285,209870
08:27,16,11602,194417
08:28,16,9779,162153
08:29,17,11092,196886
08:30,16,10956,177211
08:31,18,9230,168078
08:32,17,9335,164720
08:33,15,10739,168015
08:34,16,10612,179908
08:35,17,8480,148277
08:36,13,8739,121806
08:37,24,9906,242805
08:38,64,9497,615091
08:39,14,10050,149905
08:40,12,10380,129910
08:41,14,10159,145087
08:42,12,10145,130491
08:43,13,10276,140998
08:44,11,9591,112903
08:45,14,10249,146994
08:46,13,9323,130349
08:47,12,10484,131196
08:48,16,8538,138123
08:49,12,9296,114294
08:50,12,9301,113029
08:51,15,8324,129870
08:52,13,8658,119092
08:53,13,9522,131374
08:54,15,8512,128247
08:55,13,8130,109380
08:56,14,9113,135161
08:57,13,10636,148532
08:58,14,8725,124692
08:59,9,9963,98092
09:00,14,11543,163365
09:01,12,9259,115076
09:02,10,9860,104825
09:03,15,9471,150250
09:04,12,10360,130455
09:05,14,9205,138051
09:06,11,9510,108062
09:07,16,10313,175028
09:08,14,8125,117410
09:09,11,8607,101458
09:10,12,8538,110877
09:11,13,9804,136126
09:12,11,9717,112334
09:13,11,9313,111448
09:14,13,11207,156652
09:15,14,10481,154928
09:16,15,11532,183619
09:17,16,9296,153444
09:18,13,9655,134527
09:19,17,10932,191390
09:20,17,10030,174887
09:21,19,10652,210511
09:22,17,9794,170428
09:23,20,8542,176926
09:24,18,9370,172506
09:25,13,9494,131909
09:26,17,10711,186259
09:27,13,9789,135952
09:28,15,10116,156242
09:29,19,9011,176667
09:30,20,8235,168873
09:31,19,7980,155727
09:32,14,8784,124664
09:33,15,8936,134639
09:34,15,9402,147434
09:35,15,7734,123723
09:36,12,8480,108259
09:37,13,9063,121911
09:38,17,9025,153989
09:39,15,8734,136609
09:40,13,10118,135691
09:41,19,7278,141965
09:42,14,8391,124428
09:43,13,8304,115635
09:44,14,8801,126398
09:45,13,6368,85498
09:46,14,6773,100492
09:47,15,7588,118152
09:48,13,7889,105347
09:49,13,8180,109729
09:50,20,8528,176937
09:51,15,9807,147509
09:52,12,8343,104311
09:53,14,8738,127399
09:54,12,10650,134840
09:55,13,9375,128259
09:56,14,9402,135295
09:57,12,9710,124917
09:58,17,9375,161952
09:59,15,10196,160501
10:00,19,8743,174723
10:01,15,9260,142359
10:02,20,8676,174804
10:03,17,8887,153398
10:04,15,8828,139224
10:05,15,9135,143533
10:06,17,9459,166656
10:07,16,10211,165857
10:08,22,9473,216590
10:09,16,9028,153153
10:10,14,10964,159459
10:11,18,9899,187118
10:12,14,10324,146644
10:13,17,10296,182785
10:14,24,10803,261160
10:15,26,9722,261490
10:16,20,8081,165420
10:17,17,9780,169583
10:18,16,10358,175974
10:19,15,8292,129996
10:20,24,9194,225254
10:21,21,8646,184500
10:22,16,9992,163697
10:23,24,11098,272084
10:24,19,9922,190238
10:25,18,9341,174834
10:26,19,8462,168398
10:27,20,9231,185783
10:28,17,9656,170724
10:29,20,9982,202361
10:30,16,11341,183716
10:31,21,11338,246785
10:32,16,11393,188255
10:33,17,10395,182582
10:34,14,10003,140119
10:35,11,10069,114288
10:36,11,9673,113115
10:37,14,9724,138843
10:38,21,10021,210672
10:39,15,8823,136598
10:40,15,9039,138310
10:41,18,9805,185930
10:42,18,8894,164838
10:43,12,8426,103250
10:44,13,9270,124981
10:45,16,8890,144237
10:46,14,10509,157253
10:47,15,9227,144767
10:48,17,11110,195049
10:49,20,9273,193916
10:50,20,8988,186713
10:51,16,9763,164631
10:52,15,9611,150342
10:53,14,9131,130504
10:54,15,8580,129099
10:55,13,8244,111845
10:56,14,10002,143639
10:57,14,8782,129227
10:58,13,7547,99182
10:59,13,8110,108414
11:00,13,8563,111738
11:01,11,9637,114650
11:02,12,9022,113327
11:03,13,9784,128504
11:04,13,10790,141338
11:05,11,9889,115027
11:06,14,8535,120585
11:07,12,9720,119360
11:08,13,10679,147742
11:09,9,8697,86320
11:10,12,9715,119059
11:11,12,8713,112115
11:12,13,9121,125046
11:13,13,8771,114754
11:14,15,8695,133093
11:15,14,9051,129267
11:16,16,9598,163070
11:17,12,9707,118742
11:18,10,10350,112827
11:19,15,11059,173252
11:20,14,11583,170257
11:21,15,12304,188931
11:22,11,9316,109933
11:23,15,10560,161104
11:24,16,10819,178078
11:25,14,10246,143633
11:26,16,11116,177874
11:27,13,11144,153095
11:28,12,8580,110493
11:29,99,8948,891247
11:30,15,9039,142504
11:31,42,6597,277759
11:32,12,7478,96766
11:33,10,7682,81186
11:34,13,8527,116114
11:35,16,9185,149092
11:36,12,8782,108867
11:37,16,8098,131121
11:38,18,8566,154360
11:39,12,8028,101977
11:40,12,8410,107069
11:41,17,8922,154053
11:42,12,9183,116523
11:43,16,8642,145447
11:44,15,7328,110656
11:45,14,7764,115638
11:46,14,8663,121656
11:47,12,9919,127757
11:48,11,8917,99391
11:49,11,7796,86865
11:50,12,7453,93349
11:51,13,7729,103173
11:52,10,8510,93098
11:53,12,9574,121342
11:54,10,8023,81954
11:55,12,8955,116126
11:56,9,8464,82672
11:57,8,8035,70360
11:58,10,7886,82582
11:59,9,7331,68352
12:00,10,6675,70261
12:01,11,7476,85523
12:02,14,7508,108550
12:03,11,6685,75745
12:04,9,6279,56892
12:05,10,6359,68946
12:06,10,6050,61856
12:07,8,5300,47292
12:08,9,5975,56676
12:09,9,4723,44042
12:10,10,5802,58421
12:11,12,7256,87178
12:12,10,5867,61148
12:13,11,5682,68045
12:14,11,5988,66376
12:15,8,4885,41384
12:16,11,5162,61862
12:17,8,5327,45663
12:18,8,4785,40015
12:19,9,5200,47064
12:20,7,5836,45436
12:21,9,6442,61554
12:22,10,5176,56423
12:23,9,6704,66652
12:24,10,6480,69934
12:25,8,5956,53469
12:26,8,6134,54680
12:27,9,5601,50789
12:28,12,6299,80469
12:29,10,6301,63072
12:30,11,6545,76219
12:31,11,7259,86290
12:32,15,5481,85120
12:33,13,6492,90044
12:34,12,6159,79923
12:35,8,4950,40591
12:36,12,5400,70178
12:37,13,5002,66388
12:38,12,5558,71062
12:39,10,6306,63471
12:40,10,5344,58711
12:41,10,6079,61034
12:42,9,6389,62820
12:43,11,6765,79065
12:44,12,7307,88978
12:45,11,6945,78798
12:46,12,6268,75370
12:47,11,5726,64261
12:48,10,6972,76578
12:49,11,7172,85302
12:50,12,6034,74228
12:51,13,6701,92962
12:52,13,6069,80292
12:53,10,5726,58440
12:54,10,7351,79728
12:55,11,8017,88833
12:56,13,7305,99428
12:57,10,7550,82616
12:58,13,6887,89597
12:59,12,5954,76782
13:00,22,5496,121864
13:01,20,6649,136756
13:02,17,6588,113117
13:03,12,7034,88389
13:04,11,7748,88711
13:05,10,9323,96410
13:06,12,7515,95512
13:07,10,7331,78803
13:08,10,7205,76445
13:09,9,6292,57967
13:10,10,6320,68897
13:11,11,7307,85621
13:12,11,8010,92111
13:13,10,7328,78357
13:14,10,8197,88162
13:15,12,8857,111683
13:16,10,8739,89922
13:17,11,8310,91922
13:18,10,8080,84221
13:19,10,8195,84521
13:20,11,7568,87068
13:21,11,6838,76972
13:22,9,7020,69939
13:23,10,7281,74511
13:24,10,6646,70503
13:25,10,7277,73998
13:26,9,8450,79161
13:27,12,7004,90639
13:28,10,8117,82707
13:29,11,6413,76127
13:30,8,7025,59443
13:31,10,7608,78837
13:32,9,8042,79284
13:33,10,6694,70762
13:34,11,7319,85205
13:35,12,8677,109784
13:36,10,7790,81097
13:37,10,6455,66491
13:38,10,7603,83370
13:39,10,7874,84920
13:40,11,7993,89749
13:41,10,6598,66378
13:42,10,7110,72912
13:43,10,8193,87091
13:44,12,7651,92075
13:45,11,7898,86993
13:46,12,7008,87896
13:47,8,6932,60725
13:48,9,8091,77120
13:49,10,7113,71365
13:50,10,8625,94322
13:51,9,7392,73802
13:52,10,7925,85547
13:53,11,9123,102985
13:54,15,8078,123574
13:55,12,8057,98402
13:56,9,7831,71476
13:57,10,7506,78521
13:58,10,7288,79896
13:59,9,7391,69297
14:00,10,7069,76637
14:01,11,7032,77406
14:02,10,7192,77086
14:03,9,7437,72179
14:04,10,7543,78890
14:05,10,6661,66902
14:06,11,5425,59828
14:07,8,6087,49801
14:08,8,5736,46652
14:09,8,5842,48446
14:10,9,5822,56625
14:11,7,5529,44192
14:12,8,4604,39448
14:13,11,5685,64518
14:14,8,6110,54361
14:15,8,5204,42365
14:16,11,5987,68144
14:17,11,5620,62131
14:18,8,7495,67294
14:19,9,6562,64955
14:20,7,5700,42074
14:21,7,5871,45807
14:22,9,6979,64114
14:23,7,5973,47072
14:24,8,5358,47351
14:25,8,5324,44711
14:26,8,5267,46875
14:27,7,5055,39796
14:28,7,5152,36598
14:29,7,5281,39103
14:30,9,4778,44752
14:31,7,5184,36598
14:32,11,6510,74082
14:33,9,6406,58772
14:34,8,6307,53595
14:35,7,5841,42622
14:36,8,6064,52415
14:37,7,5411,38815
14:38,7,6348,44860
14:39,10,6419,70480
14:40,8,7266,60679
14:41,7,6054,43528
14:42,7,5752,41869
14:43,8,5804,47268
14:44,8,6288,51672
14:45,9,5766,54858
14:46,9,5996,55380
14:47,7,6582,51977
14:48,7,5670,43178
14:49,8,6291,53866
14:50,10,6408,64674
14:51,12,7360,89398
14:52,7,6268,46374
14:53,8,6294,51451
14:54,12,5095,64265
14:55,10,5613,58586
14:56,9,5070,48507
14:57,7,5382,41882
14:58,7,5663,41678
14:59,9,5405,51331
15:00,8,5664,49766
15:01,7,6068,46571
15:02,6,4906,31834
15:03,6,4001,26627
15:04,7,3639,27287
15:05,6,3769,23443
15:06,6,3258,21277
15:07,6,3932,23902
15:08,8,2825,22749
15:09,8,2710,21797
15:10,7,2914,23052
15:11,6,3439,22224
15:12,6,2877,17835
15:13,7,2610,20295
15:14,8,2369,19001
15:15,7,2849,20020
15:16,6,3242,20694
15:17,6,3356,20773
15:18,6,3712,22303
15:19,6,2795,19434
15:20,5,3215,18282
15:21,6,4069,28477
15:22,6,2848,19835
15:23,6,2879,19739
15:24,9,3515,31848
15:25,5,3124,18607
15:26,6,3212,21077
15:27,7,3397,26181
15:28,6,3066,19579
15:29,5,2515,15008
15:30,7,2780,22147
15:31,11,2805,31605
15:32,9,2543,22992
15:33,14,2556,36559
15:34,8,3421,28492
15:35,6,3062,19204
15:36,6,3225,20237
15:37,12,2152,25863
15:38,6,2626,15826
15:39,6,2524,17333
15:40,8,2024,18139
15:41,6,2102,13247
15:42,6,2212,13410
15:43,8,2342,18882
15:44,7,2392,18426
15:45,8,2111,17844
15:46,8,1779,14938
15:47,7,1785,13758
15:48,7,1870,13621
15:49,9,1772,17148
15:50,8,1938,16333
15:51,6,2440,15633
15:52,7,1839,14683
15:53,7,1229,9513
15:54,5,1708,9196
15:55,5,2072,11085
15:56,6,1683,10837
15:57,7,2053,14939
15:58,6,1685,10255
15:59,6,1740,10543
16:00,8,1639,13120
16:01,8,1763,14568
16:02,8,1464,12336
16:03,5,919,5435
16:04,6,1271,8426
16:05,6,947,6111
16:06,6,1360,9164
16:07,7,1134,9038
16:08,7,1206,8752
16:09,8,1423,11558
16:10,10,1446,14526
16:11,14,936,13188
16:12,7,1212,8687
16:13,7,1206,9464
16:14,5,824,4442
16:15,7,1500,10551
16:16,6,956,6373
16:17,5,623,3347
16:18,6,872,6077
16:19,6,905,5433
16:20,4,904,4500
16:21,5,561,2911
16:22,5,642,3699
16:23,6,468,3132
16:24,7,512,3983
16:25,10,691,7492
16:26,6,358,2455
16:27,10,298,3226
16:28,4,601,2897
16:29,5,506,2875
16:30,6,400,2442
16:31,4,340,1510
16:32,9,216,2105
16:33,8,449,3698
16:34,8,445,3728
16:35,5,611,3302
16:36,8,394,3190
16:37,6,312,1884
16:38,3,326,1302
16:39,8,234,1903
16:40,4,362,1784
16:41,12,200,2579
16:42,4,429,1893
16:43,4,692,2885
16:44,4,718,3024
16:45,13,379,5145
16:46,9,462,4214
16:47,5,709,3832
16:48,10,337,3622
16:49,6,281,1937
16:50,7,231,1631
16:51,5,243,1389
16:52,5,250,1416
16:53,6,291,1786
16:54,6,88,591
16:55,6,36,235
16:56,1,75,122
16:57,22,85,1879
16:58,7,96,726
16:59,5,117,640
17:00,9,154,1431
17:01,16,187,3090
17:02,7,122,874
17:03,13,301,4197
17:04,6,157,1033
17:05,4,49,203
17:06,18,125,2363
17:07,13,143,1868
17:08,5,133,703
17:09,4,157,633
17:10,5,175,923
17:11,4,94,404
17:12,3,87,282
17:13,7,101,716
17:14,3,147,534
17:15,4,246,988
17:16,3,201,691
17:17,3,53,211
17:18,3,58,192
17:19,3,91,278
17:20,3,68,238
17:21,2,59,169
17:22,2,38,112
17:23,2,106,269
17:24,11,45,500
17:25,5,43,247
17:26,4,52,215
17:27,8,63,544
17:28,0,6,5
17:29,16,78,1310
17:30,8,28,237
17:31,7,5,36
17:32,3,269,1001
17:33,4,163,688
17:34,0,0,0
17:35,1,25,47
17:36,1,42,80
17:37,3,69,211
17:38,0,0,0
17:39,0,0,0
17:40,7,34,246
17:41,3,115,447
17:42,4,150,608
17:43,5,64,330
17:44,1,4,5
17:45,8,34,301
17:46,5,64,359
17:47,7,30,230
17:48,3,55,183
17:49,0,0,0
17:50,6,44,303
17:51,2,31,68
17:52,3,24,86
17:53,5,32,162
17:54,4,88,386
17:55,4,118,570
17:56,3,111,377
17:57,5,49,264
17:58,4,97,394
17:59,5,107,571
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
/*
.x.axis path {
display: none;
}
*/
.line {
stroke: black;
fill: none;
stroke-width: 0.75px;
}
.line.line0 {
stroke: steelblue;
}
.line.line1 {
stroke: indianred;
}
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: none;
}
.focus circle.y0 {
stroke: blue;
}
.focus circle.y1 {
stroke: red;
}
.focus line {
stroke: purple;
shape-rendering: crispEdges;
}
.focus line.y0 {
stroke: steelblue;
stroke-dasharray: 3 3;
opacity: .5;
}
.focus line.y1 {
stroke: indianred;
stroke-dasharray: 3 3;
opacity: .5;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script>
var main_margin = {top: 20, right: 80, bottom: 100, left: 40},
mini_margin = {top: 430, right: 80, bottom: 20, left: 40},
main_width = 960 - main_margin.left - main_margin.right,
main_height = 500 - main_margin.top - main_margin.bottom,
mini_height = 500 - mini_margin.top - mini_margin.bottom;
var formatDate = d3.time.format("%H:%M"),
parseDate = formatDate.parse,
bisectDate = d3.bisector(function(d) { return d.Uhrzeit; }).left,
formatOutput0 = function(d) { return formatDate(d.Uhrzeit) + " - " + d.Durchschn + " ms"; },
formatOutput1 = function(d) { return formatDate(d.Uhrzeit) + " - " + d.Anz; };
var main_x = d3.time.scale()
.range([0, main_width]),
mini_x = d3.time.scale()
.range([0, main_width]);
var main_y0 = d3.scale.sqrt()
.range([main_height, 0]),
main_y1 = d3.scale.sqrt()
.range([main_height, 0]),
mini_y0 = d3.scale.sqrt()
.range([mini_height, 0]),
mini_y1 = d3.scale.sqrt()
.range([mini_height, 0]);
var main_xAxis = d3.svg.axis()
.scale(main_x)
.tickFormat(d3.time.format("%H:%M"))
.orient("bottom"),
mini_xAxis = d3.svg.axis()
.scale(mini_x)
.tickFormat(d3.time.format("%H:%M"))
.orient("bottom");
var main_yAxisLeft = d3.svg.axis()
.scale(main_y0)
.orient("left");
main_yAxisRight = d3.svg.axis()
.scale(main_y1)
.orient("right");
var brush = d3.svg.brush()
.x(mini_x)
.on("brush", brush);
var main_line0 = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return main_x(d.Uhrzeit); })
.y(function(d) { return main_y0(d.Durchschn); });
var main_line1 = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return main_x(d.Uhrzeit); })
.y(function(d) { return main_y1(d.Anz); });
var mini_line0 = d3.svg.line()
.x(function(d) { return mini_x(d.Uhrzeit); })
.y(function(d) { return mini_y0(d.Durchschn); });
var mini_line1 = d3.svg.line()
.x(function(d) { return mini_x(d.Uhrzeit); })
.y(function(d) { return mini_y1(d.Anz); });
var svg = d3.select("body").append("svg")
.attr("width", main_width + main_margin.left + main_margin.right)
.attr("height", main_height + main_margin.top + main_margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", main_width)
.attr("height", main_height);
var main = svg.append("g")
.attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")");
var mini = svg.append("g")
.attr("transform", "translate(" + mini_margin.left + "," + mini_margin.top + ")");
d3.csv("https://gist.github.com/gniemetz/4618602/raw/74eee5aff836de54d83715336b3bfd76dd8fb579/data.txt", function(error, data) {
data.forEach(function(d) {
d.Uhrzeit = parseDate(d.Uhrzeit);
d.Durchschn = +d.Durchschn;
d.Anz = +d.Anz;
});
data.sort(function(a, b) {
return a.Uhrzeit - b.Uhrzeit;
});
main_x.domain([data[0].Uhrzeit, data[data.length - 1].Uhrzeit]);
main_y0.domain(d3.extent(data, function(d) { return d.Durchschn; }));
//main_y0.domain([0.1, d3.max(data, function(d) { return d.Durchschn; })]);
main_y1.domain(d3.extent(data, function(d) { return d.Anz; }));
mini_x.domain(main_x.domain());
mini_y0.domain(main_y0.domain());
mini_y1.domain(main_y1.domain());
main.append("path")
.datum(data)
.attr("clip-path", "url(#clip)")
.attr("class", "line line0")
.attr("d", main_line0);
main.append("path")
.datum(data)
.attr("clip-path", "url(#clip)")
.attr("class", "line line1")
.attr("d", main_line1);
main.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + main_height + ")")
.call(main_xAxis);
main.append("g")
.attr("class", "y axis axisLeft")
.call(main_yAxisLeft)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Ø AWZ (ms)");
main.append("g")
.attr("class", "y axis axisRight")
.attr("transform", "translate(" + main_width + ", 0)")
.call(main_yAxisRight)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -12)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Anzahl");
mini.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + mini_height + ")")
.call(main_xAxis);
mini.append("path")
.datum(data)
.attr("class", "line")
.attr("d", mini_line0);
mini.append("path")
.datum(data)
.attr("class", "line")
.attr("d", mini_line1);
mini.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", mini_height + 7);
var focus = main.append("g")
.attr("class", "focus")
.style("display", "none");
// Anzeige auf der Zeitleiste
focus.append("line")
.attr("class", "x")
.attr("y1", main_y0(0) - 6)
.attr("y2", main_y0(0) + 6)
// Anzeige auf der linken Leiste
focus.append("line")
.attr("class", "y0")
.attr("x1", main_width - 6) // nach links
.attr("x2", main_width + 6); // nach rechts
// Anzeige auf der rechten Leiste
focus.append("line")
.attr("class", "y1")
.attr("x1", main_width - 6)
.attr("x2", main_width + 6);
focus.append("circle")
.attr("class", "y0")
.attr("r", 4);
focus.append("text")
.attr("class", "y0")
.attr("dy", "-1em");
focus.append("circle")
.attr("class", "y1")
.attr("r", 4);
focus.append("text")
.attr("class", "y1")
.attr("dy", "-1em");
main.append("rect")
.attr("class", "overlay")
.attr("width", main_width)
.attr("height", main_height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = main_x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.Uhrzeit > d1.Uhrzeit - x0 ? d1 : d0;
focus.select("circle.y0").attr("transform", "translate(" + main_x(d.Uhrzeit) + "," + main_y0(d.Durchschn) + ")");
focus.select("text.y0").attr("transform", "translate(" + main_x(d.Uhrzeit) + "," + main_y0(d.Durchschn) + ")").text(formatOutput0(d));
focus.select("circle.y1").attr("transform", "translate(" + main_x(d.Uhrzeit) + "," + main_y1(d.Anz) + ")");
focus.select("text.y1").attr("transform", "translate(" + main_x(d.Uhrzeit) + "," + main_y1(d.Anz) + ")").text(formatOutput1(d));
focus.select(".x").attr("transform", "translate(" + main_x(d.Uhrzeit) + ",0)");
focus.select(".y0").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Durchschn) + ")").attr("x2", main_width + main_x(d.Uhrzeit));
focus.select(".y1").attr("transform", "translate(0, " + main_y1(d.Anz) + ")").attr("x1", main_x(d.Uhrzeit));
}
});
function brush() {
main_x.domain(brush.empty() ? mini_x.domain() : brush.extent());
main.select(".line0").attr("d", main_line0);
main.select(".line1").attr("d", main_line1);
main.select(".x.axis").call(main_xAxis);
}
</script>
@betelgeuse
Copy link

@gniemetz what's the license on this code?

@gniemetz
Copy link
Author

@betelgeuse you can use it freely as you wish

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment