Skip to content

Instantly share code, notes, and snippets.

@gniemetz gniemetz/README.md
Last active May 22, 2018

Embed
What would you like to do?

d3js Multiline chart with brushing and mouseover

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
<!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

This comment has been minimized.

Copy link

betelgeuse commented Oct 15, 2015

@gniemetz what's the license on this code?

@gniemetz

This comment has been minimized.

Copy link
Owner Author

gniemetz commented Apr 19, 2016

@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
You can’t perform that action at this time.