Skip to content

Instantly share code, notes, and snippets.

@gniemetz

gniemetz/README.md

Last active June 7, 2020 18:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gniemetz/4618602 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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 2252
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">
<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;
}
.focus line.y1 {
stroke: indianred;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.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.tsv("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_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");
focus.append("line")
.attr("class", "x")
.attr("y1", main_y0(0) - 6)
.attr("y2", main_y0(0) + 6)
focus.append("line")
.attr("class", "y0")
.attr("x1", main_width - 6)
.attr("x2", main_width + 6);
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) + ")");
focus.select(".y1").attr("transform", "translate(0, " + main_y1(d.Anz) + ")");
}
});
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

betelgeuse commented Oct 15, 2015

@gniemetz what's the license on this code?

@gniemetz
Copy link
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