Skip to content

Instantly share code, notes, and snippets.

@dianaow
Last active June 30, 2019 06:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dianaow/0da76b59a7dffe24abcfa55d5b9e163e to your computer and use it in GitHub Desktop.
Save dianaow/0da76b59a7dffe24abcfa55d5b9e163e to your computer and use it in GitHub Desktop.
D3 V4 Multiple-line chart: Hover tooltip
license: mit

A line chart showing Singapore's Certificate of Entitlement (COE) prices from 2010 to 2018.

As there are two COE Bidding Exercises that take place per month, i separated them into individual charts with an option to select one or the other. Lines transition after an option is selected.

Hover over a point on the chart to display a tooltip showing the premium price for each vehicle class (sorted in descending order) for the month.

month bidding_no vehicle_class premium
2010-01 1 Category A 18502
2010-01 1 Category B 19190
2010-01 1 Category C 19001
2010-01 1 Category D 889
2010-01 1 Category E 19889
2010-01 2 Category A 20501
2010-01 2 Category B 22400
2010-01 2 Category C 20090
2010-01 2 Category D 852
2010-01 2 Category E 21899
2010-02 1 Category A 19989
2010-02 1 Category B 23180
2010-02 1 Category C 21390
2010-02 1 Category D 852
2010-02 1 Category E 22401
2010-02 2 Category A 20340
2010-02 2 Category B 23889
2010-02 2 Category C 23501
2010-02 2 Category D 1001
2010-02 2 Category E 24229
2010-03 1 Category A 20802
2010-03 1 Category B 26389
2010-03 1 Category C 27001
2010-03 1 Category D 1159
2010-03 1 Category E 27590
2010-03 2 Category A 28389
2010-03 2 Category B 36089
2010-03 2 Category C 32890
2010-03 2 Category D 1200
2010-03 2 Category E 42001
2010-04 1 Category A 34001
2010-04 1 Category B 45501
2010-04 1 Category C 36511
2010-04 1 Category D 1221
2010-04 1 Category E 49000
2010-04 2 Category A 30000
2010-04 2 Category B 40001
2010-04 2 Category C 35556
2010-04 2 Category D 1253
2010-04 2 Category E 43003
2010-05 1 Category A 26102
2010-05 1 Category B 38000
2010-05 1 Category C 32501
2010-05 1 Category D 1252
2010-05 1 Category E 39002
2010-05 2 Category A 27389
2010-05 2 Category B 34600
2010-05 2 Category C 29389
2010-05 2 Category D 1312
2010-05 2 Category E 39000
2010-06 1 Category A 29501
2010-06 1 Category B 35909
2010-06 1 Category C 31389
2010-06 1 Category D 1320
2010-06 1 Category E 41010
2010-06 2 Category A 31510
2010-06 2 Category B 39911
2010-06 2 Category C 31689
2010-06 2 Category D 1454
2010-06 2 Category E 41006
2010-07 1 Category A 29501
2010-07 1 Category B 35909
2010-07 1 Category C 31389
2010-07 1 Category D 1320
2010-07 1 Category E 41010
2010-07 2 Category A 36162
2010-07 2 Category B 42889
2010-07 2 Category C 30601
2010-07 2 Category D 1290
2010-07 2 Category E 43565
2010-08 1 Category A 32104
2010-08 1 Category B 43334
2010-08 1 Category C 30112
2010-08 1 Category D 1301
2010-08 1 Category E 42901
2010-08 2 Category A 29000
2010-08 2 Category B 42810
2010-08 2 Category C 30002
2010-08 2 Category D 1251
2010-08 2 Category E 43501
2010-09 1 Category A 33089
2010-09 1 Category B 44129
2010-09 1 Category C 33000
2010-09 1 Category D 1502
2010-09 1 Category E 44001
2010-09 2 Category A 30001
2010-09 2 Category B 42501
2010-09 2 Category C 31001
2010-09 2 Category D 1452
2010-09 2 Category E 43290
2010-10 1 Category A 33132
2010-10 1 Category B 42801
2010-10 1 Category C 30889
2010-10 1 Category D 1502
2010-10 1 Category E 44090
2010-10 2 Category A 32415
2010-10 2 Category B 44600
2010-10 2 Category C 30511
2010-10 2 Category D 1689
2010-10 2 Category E 44900
2010-11 1 Category A 34001
2010-11 1 Category B 45501
2010-11 1 Category C 31006
2010-11 1 Category D 1452
2010-11 1 Category E 46001
2010-11 2 Category A 39000
2010-11 2 Category B 47890
2010-11 2 Category C 31202
2010-11 2 Category D 1502
2010-11 2 Category E 49890
2010-12 1 Category A 47604
2010-12 1 Category B 62502
2010-12 1 Category C 32001
2010-12 1 Category D 1701
2010-12 1 Category E 64900
2010-12 2 Category A 46129
2010-12 2 Category B 72001
2010-12 2 Category C 33501
2010-12 2 Category D 1551
2010-12 2 Category E 76102
2011-01 1 Category A 38889
2011-01 1 Category B 69000
2011-01 1 Category C 35111
2011-01 1 Category D 1503
2011-01 1 Category E 75789
2011-01 2 Category A 40123
2011-01 2 Category B 58910
2011-01 2 Category C 30000
2011-01 2 Category D 1690
2011-01 2 Category E 67009
2011-02 1 Category A 37124
2011-02 1 Category B 53400
2011-02 1 Category C 28589
2011-02 1 Category D 1819
2011-02 1 Category E 58890
2011-02 2 Category A 42999
2011-02 2 Category B 62000
2011-02 2 Category C 29011
2011-02 2 Category D 2001
2011-02 2 Category E 62001
2011-03 1 Category A 42600
2011-03 1 Category B 61894
2011-03 1 Category C 30001
2011-03 1 Category D 2604
2011-03 1 Category E 62010
2011-03 2 Category A 43813
2011-03 2 Category B 57002
2011-03 2 Category C 29690
2011-03 2 Category D 2534
2011-03 2 Category E 59073
2011-04 1 Category A 43212
2011-04 1 Category B 55001
2011-04 1 Category C 28189
2011-04 1 Category D 2490
2011-04 1 Category E 57100
2011-04 2 Category A 44000
2011-04 2 Category B 56801
2011-04 2 Category C 23900
2011-04 2 Category D 2502
2011-04 2 Category E 56001
2011-05 1 Category A 44790
2011-05 1 Category B 56011
2011-05 1 Category C 21889
2011-05 1 Category D 2253
2011-05 1 Category E 56490
2011-05 2 Category A 46989
2011-05 2 Category B 56300
2011-05 2 Category C 22989
2011-05 2 Category D 2013
2011-05 2 Category E 56889
2011-06 1 Category A 53390
2011-06 1 Category B 63000
2011-06 1 Category C 29006
2011-06 1 Category D 2491
2011-06 1 Category E 62000
2011-06 2 Category A 50244
2011-06 2 Category B 67700
2011-06 2 Category C 31089
2011-06 2 Category D 2290
2011-06 2 Category E 65490
2011-07 1 Category A 55989
2011-07 1 Category B 68501
2011-07 1 Category C 32590
2011-07 1 Category D 2360
2011-07 1 Category E 68811
2011-07 2 Category A 56002
2011-07 2 Category B 72501
2011-07 2 Category C 34502
2011-07 2 Category D 2012
2011-07 2 Category E 74490
2011-08 1 Category A 48801
2011-08 1 Category B 70890
2011-08 1 Category C 34009
2011-08 1 Category D 1890
2011-08 1 Category E 70117
2011-08 2 Category A 49301
2011-08 2 Category B 65521
2011-08 2 Category C 32289
2011-08 2 Category D 1999
2011-08 2 Category E 67000
2011-09 1 Category A 51000
2011-09 1 Category B 63002
2011-09 1 Category C 31900
2011-09 1 Category D 2339
2011-09 1 Category E 65589
2011-09 2 Category A 48006
2011-09 2 Category B 64889
2011-09 2 Category C 30089
2011-09 2 Category D 2109
2011-09 2 Category E 62502
2011-10 1 Category A 50289
2011-10 1 Category B 63600
2011-10 1 Category C 32801
2011-10 1 Category D 2078
2011-10 1 Category E 65058
2011-10 2 Category A 56112
2011-10 2 Category B 75889
2011-10 2 Category C 37011
2011-10 2 Category D 2091
2011-10 2 Category E 73600
2011-11 1 Category A 55997
2011-11 1 Category B 77000
2011-11 1 Category C 40803
2011-11 1 Category D 2012
2011-11 1 Category E 78001
2011-11 2 Category A 54887
2011-11 2 Category B 77340
2011-11 2 Category C 40189
2011-11 2 Category D 1889
2011-11 2 Category E 75889
2011-12 1 Category A 52392
2011-12 1 Category B 72350
2011-12 1 Category C 40009
2011-12 1 Category D 1902
2011-12 1 Category E 74340
2011-12 2 Category A 50001
2011-12 2 Category B 70003
2011-12 2 Category C 39589
2011-12 2 Category D 1481
2011-12 2 Category E 71000
2012-01 1 Category A 46889
2012-01 1 Category B 65801
2012-01 1 Category C 38699
2012-01 1 Category D 1682
2012-01 1 Category E 65700
2012-01 2 Category A 48112
2012-01 2 Category B 67889
2012-01 2 Category C 44001
2012-01 2 Category D 1552
2012-01 2 Category E 67101
2012-02 1 Category A 52809
2012-02 1 Category B 73890
2012-02 1 Category C 49801
2012-02 1 Category D 1802
2012-02 1 Category E 73801
2012-02 2 Category A 57009
2012-02 2 Category B 78189
2012-02 2 Category C 52004
2012-02 2 Category D 2012
2012-02 2 Category E 78000
2012-03 1 Category A 56551
2012-03 1 Category B 79304
2012-03 1 Category C 50009
2012-03 1 Category D 1490
2012-03 1 Category E 76881
2012-03 2 Category A 56501
2012-03 2 Category B 82003
2012-03 2 Category C 51511
2012-03 2 Category D 2000
2012-03 2 Category E 80101
2012-04 1 Category A 58501
2012-04 1 Category B 83700
2012-04 1 Category C 53989
2012-04 1 Category D 1896
2012-04 1 Category E 84590
2012-04 2 Category A 64201
2012-04 2 Category B 91000
2012-04 2 Category C 57589
2012-04 2 Category D 1924
2012-04 2 Category E 92010
2012-05 1 Category A 62600
2012-05 1 Category B 92050
2012-05 1 Category C 58553
2012-05 1 Category D 2021
2012-05 1 Category E 88990
2012-05 2 Category A 58001
2012-05 2 Category B 85216
2012-05 2 Category C 57106
2012-05 2 Category D 1890
2012-05 2 Category E 86889
2012-06 1 Category A 59003
2012-06 1 Category B 83000
2012-06 1 Category C 54522
2012-06 1 Category D 1912
2012-06 1 Category E 85889
2012-06 2 Category A 59004
2012-06 2 Category B 85400
2012-06 2 Category C 54502
2012-06 2 Category D 1712
2012-06 2 Category E 84389
2012-07 1 Category A 59421
2012-07 1 Category B 82289
2012-07 1 Category C 55556
2012-07 1 Category D 1760
2012-07 1 Category E 86999
2012-07 2 Category A 68656
2012-07 2 Category B 90501
2012-07 2 Category C 55805
2012-07 2 Category D 1859
2012-07 2 Category E 92700
2012-08 1 Category A 73501
2012-08 1 Category B 94502
2012-08 1 Category C 57001
2012-08 1 Category D 2081
2012-08 1 Category E 95034
2012-08 2 Category A 66889
2012-08 2 Category B 88002
2012-08 2 Category C 59334
2012-08 2 Category D 2013
2012-08 2 Category E 93990
2012-09 1 Category A 68000
2012-09 1 Category B 80191
2012-09 1 Category C 57334
2012-09 1 Category D 1801
2012-09 1 Category E 87999
2012-09 2 Category A 63000
2012-09 2 Category B 88500
2012-09 2 Category C 57809
2012-09 2 Category D 1852
2012-09 2 Category E 89990
2012-10 1 Category A 69000
2012-10 1 Category B 80001
2012-10 1 Category C 56001
2012-10 1 Category D 1912
2012-10 1 Category E 86889
2012-10 2 Category A 71001
2012-10 2 Category B 85801
2012-10 2 Category C 57889
2012-10 2 Category D 1920
2012-10 2 Category E 87000
2012-11 1 Category A 77201
2012-11 1 Category B 92400
2012-11 1 Category C 59111
2012-11 1 Category D 1959
2012-11 1 Category E 92100
2012-11 2 Category A 77291
2012-11 2 Category B 93004
2012-11 2 Category C 60235
2012-11 2 Category D 1689
2012-11 2 Category E 93990
2012-12 1 Category A 78523
2012-12 1 Category B 90200
2012-12 1 Category C 63035
2012-12 1 Category D 1612
2012-12 1 Category E 97000
2012-12 2 Category A 81889
2012-12 2 Category B 93501
2012-12 2 Category C 62201
2012-12 2 Category D 1701
2012-12 2 Category E 95990
2013-01 1 Category A 92100
2013-01 1 Category B 96210
2013-01 1 Category C 60000
2013-01 1 Category D 1933
2013-01 1 Category E 96101
2013-01 2 Category A 91010
2013-01 2 Category B 95501
2013-01 2 Category C 57051
2013-01 2 Category D 1781
2013-01 2 Category E 97889
2013-02 1 Category A 87109
2013-02 1 Category B 92901
2013-02 1 Category C 54989
2013-02 1 Category D 1782
2013-02 1 Category E 94890
2013-02 2 Category A 78301
2013-02 2 Category B 92667
2013-02 2 Category C 53489
2013-02 2 Category D 1512
2013-02 2 Category E 91910
2013-03 1 Category A 74689
2013-03 1 Category B 58090
2013-03 1 Category C 53900
2013-03 1 Category D 1895
2013-03 1 Category E 65001
2013-03 2 Category A 64209
2013-03 2 Category B 73900
2013-03 2 Category C 54111
2013-03 2 Category D 1909
2013-03 2 Category E 73301
2013-04 1 Category A 61029
2013-04 1 Category B 67010
2013-04 1 Category C 56011
2013-04 1 Category D 1812
2013-04 1 Category E 66989
2013-04 2 Category A 62497
2013-04 2 Category B 62000
2013-04 2 Category C 58502
2013-04 2 Category D 1791
2013-04 2 Category E 62000
2013-05 1 Category A 62999
2013-05 1 Category B 61700
2013-05 1 Category C 57051
2013-05 1 Category D 1700
2013-05 1 Category E 62301
2013-05 2 Category A 64839
2013-05 2 Category B 67304
2013-05 2 Category C 56889
2013-05 2 Category D 1663
2013-05 2 Category E 66701
2013-06 1 Category A 67301
2013-06 1 Category B 75000
2013-06 1 Category C 57989
2013-06 1 Category D 1701
2013-06 1 Category E 76000
2013-06 2 Category A 69903
2013-06 2 Category B 81751
2013-06 2 Category C 59001
2013-06 2 Category D 1712
2013-06 2 Category E 83001
2013-07 1 Category A 73100
2013-07 1 Category B 77110
2013-07 1 Category C 61011
2013-07 1 Category D 1610
2013-07 1 Category E 77000
2013-07 2 Category A 73989
2013-07 2 Category B 76389
2013-07 2 Category C 65036
2013-07 2 Category D 1712
2013-07 2 Category E 76802
2013-08 1 Category A 75556
2013-08 1 Category B 77600
2013-08 1 Category C 68251
2013-08 1 Category D 1792
2013-08 1 Category E 77989
2013-08 2 Category A 76223
2013-08 2 Category B 76607
2013-08 2 Category C 71001
2013-08 2 Category D 1722
2013-08 2 Category E 79223
2013-09 1 Category A 77304
2013-09 1 Category B 77100
2013-09 1 Category C 73999
2013-09 1 Category D 1660
2013-09 1 Category E 80000
2013-09 2 Category A 83751
2013-09 2 Category B 86239
2013-09 2 Category C 76001
2013-09 2 Category D 1703
2013-09 2 Category E 87001
2013-10 1 Category A 85000
2013-10 1 Category B 93500
2013-10 1 Category C 76310
2013-10 1 Category D 1961
2013-10 1 Category E 93889
2013-10 2 Category A 76889
2013-10 2 Category B 87910
2013-10 2 Category C 68002
2013-10 2 Category D 1804
2013-10 2 Category E 92289
2013-11 1 Category A 72609
2013-11 1 Category B 84578
2013-11 1 Category C 55503
2013-11 1 Category D 1710
2013-11 1 Category E 89001
2013-11 2 Category A 74991
2013-11 2 Category B 79300
2013-11 2 Category C 55002
2013-11 2 Category D 1712
2013-11 2 Category E 83000
2013-12 1 Category A 73160
2013-12 1 Category B 73010
2013-12 1 Category C 51112
2013-12 1 Category D 1782
2013-12 1 Category E 76901
2013-12 2 Category A 74002
2013-12 2 Category B 75700
2013-12 2 Category C 48001
2013-12 2 Category D 1812
2013-12 2 Category E 77501
2014-01 1 Category A 72369
2014-01 1 Category B 78700
2014-01 1 Category C 48889
2014-01 1 Category D 1989
2014-01 1 Category E 79000
2014-01 2 Category A 72290
2014-01 2 Category B 79000
2014-01 2 Category C 50001
2014-01 2 Category D 2704
2014-01 2 Category E 78810
2014-02 1 Category A 71564
2014-02 1 Category B 75300
2014-02 1 Category C 51002
2014-02 1 Category D 3051
2014-02 1 Category E 77003
2014-02 2 Category A 77201
2014-02 2 Category B 78604
2014-02 2 Category C 52890
2014-02 2 Category D 3501
2014-02 2 Category E 79000
2014-03 1 Category A 76999
2014-03 1 Category B 80710
2014-03 1 Category C 56302
2014-03 1 Category D 4001
2014-03 1 Category E 82000
2014-03 2 Category A 78602
2014-03 2 Category B 82900
2014-03 2 Category C 53891
2014-03 2 Category D 4289
2014-03 2 Category E 84001
2014-04 1 Category A 77400
2014-04 1 Category B 84504
2014-04 1 Category C 49503
2014-04 1 Category D 4489
2014-04 1 Category E 84100
2014-04 2 Category A 71335
2014-04 2 Category B 75010
2014-04 2 Category C 32890
2014-04 2 Category D 4502
2014-04 2 Category E 73810
2014-05 1 Category A 60002
2014-05 1 Category B 70002
2014-05 1 Category C 36301
2014-05 1 Category D 4001
2014-05 1 Category E 65501
2014-05 2 Category A 65689
2014-05 2 Category B 68103
2014-05 2 Category C 40889
2014-05 2 Category D 4003
2014-05 2 Category E 67290
2014-06 1 Category A 63190
2014-06 1 Category B 67304
2014-06 1 Category C 43001
2014-06 1 Category D 4089
2014-06 1 Category E 67334
2014-06 2 Category A 61899
2014-06 2 Category B 65700
2014-06 2 Category C 42001
2014-06 2 Category D 3890
2014-06 2 Category E 65301
2014-07 1 Category A 61990
2014-07 1 Category B 64889
2014-07 1 Category C 43390
2014-07 1 Category D 4001
2014-07 1 Category E 63001
2014-07 2 Category A 62890
2014-07 2 Category B 65001
2014-07 2 Category C 52010
2014-07 2 Category D 4252
2014-07 2 Category E 65002
2014-08 1 Category A 64600
2014-08 1 Category B 68689
2014-08 1 Category C 54009
2014-08 1 Category D 4353
2014-08 1 Category E 69001
2014-08 2 Category A 65710
2014-08 2 Category B 72990
2014-08 2 Category C 52390
2014-08 2 Category D 4354
2014-08 2 Category E 72810
2014-09 1 Category A 64841
2014-09 1 Category B 73010
2014-09 1 Category C 49901
2014-09 1 Category D 4453
2014-09 1 Category E 74403
2014-09 2 Category A 62000
2014-09 2 Category B 71990
2014-09 2 Category C 49889
2014-09 2 Category D 4504
2014-09 2 Category E 74801
2014-10 1 Category A 63880
2014-10 1 Category B 72180
2014-10 1 Category C 57389
2014-10 1 Category D 4800
2014-10 1 Category E 72003
2014-10 2 Category A 63990
2014-10 2 Category B 72002
2014-10 2 Category C 61000
2014-10 2 Category D 4412
2014-10 2 Category E 72201
2014-11 1 Category A 64900
2014-11 1 Category B 70890
2014-11 1 Category C 63701
2014-11 1 Category D 4290
2014-11 1 Category E 71300
2014-11 2 Category A 67889
2014-11 2 Category B 72890
2014-11 2 Category C 65001
2014-11 2 Category D 4189
2014-11 2 Category E 73900
2014-12 1 Category A 67089
2014-12 1 Category B 74389
2014-12 1 Category C 60001
2014-12 1 Category D 4210
2014-12 1 Category E 76904
2014-12 2 Category A 65889
2014-12 2 Category B 74000
2014-12 2 Category C 52100
2014-12 2 Category D 4312
2014-12 2 Category E 73990
2015-01 1 Category A 66010
2015-01 1 Category B 75289
2015-01 1 Category C 55011
2015-01 1 Category D 4403
2015-01 1 Category E 75200
2015-01 2 Category A 65001
2015-01 2 Category B 76889
2015-01 2 Category C 55012
2015-01 2 Category D 4889
2015-01 2 Category E 76790
2015-02 1 Category A 62002
2015-02 1 Category B 70890
2015-02 1 Category C 52101
2015-02 1 Category D 5504
2015-02 1 Category E 71921
2015-02 2 Category A 57199
2015-02 2 Category B 66751
2015-02 2 Category C 53202
2015-02 2 Category D 5800
2015-02 2 Category E 67901
2015-03 1 Category A 61410
2015-03 1 Category B 68668
2015-03 1 Category C 56501
2015-03 1 Category D 5501
2015-03 1 Category E 70500
2015-03 2 Category A 64700
2015-03 2 Category B 71889
2015-03 2 Category C 59999
2015-03 2 Category D 5610
2015-03 2 Category E 72100
2015-04 1 Category A 67749
2015-04 1 Category B 76612
2015-04 1 Category C 64001
2015-04 1 Category D 6312
2015-04 1 Category E 78000
2015-04 2 Category A 67601
2015-04 2 Category B 78001
2015-04 2 Category C 53001
2015-04 2 Category D 6801
2015-04 2 Category E 79500
2015-05 1 Category A 68589
2015-05 1 Category B 77600
2015-05 1 Category C 50098
2015-05 1 Category D 6512
2015-05 1 Category E 78004
2015-05 2 Category A 66590
2015-05 2 Category B 75002
2015-05 2 Category C 52001
2015-05 2 Category D 6501
2015-05 2 Category E 78001
2015-06 1 Category A 66000
2015-06 1 Category B 75000
2015-06 1 Category C 50900
2015-06 1 Category D 6509
2015-06 1 Category E 75801
2015-06 2 Category A 61000
2015-06 2 Category B 71509
2015-06 2 Category C 50502
2015-06 2 Category D 6401
2015-06 2 Category E 74501
2015-07 1 Category A 58700
2015-07 1 Category B 65501
2015-07 1 Category C 50001
2015-07 1 Category D 6508
2015-07 1 Category E 69001
2015-07 2 Category A 55889
2015-07 2 Category B 58109
2015-07 2 Category C 50002
2015-07 2 Category D 6312
2015-07 2 Category E 60101
2015-08 1 Category A 56209
2015-08 1 Category B 60789
2015-08 1 Category C 49302
2015-08 1 Category D 6201
2015-08 1 Category E 57885
2015-08 2 Category A 57498
2015-08 2 Category B 62140
2015-08 2 Category C 46501
2015-08 2 Category D 6112
2015-08 2 Category E 61001
2015-09 1 Category A 57089
2015-09 1 Category B 62101
2015-09 1 Category C 46801
2015-09 1 Category D 6512
2015-09 1 Category E 61010
2015-09 2 Category A 55399
2015-09 2 Category B 60001
2015-09 2 Category C 45289
2015-09 2 Category D 6158
2015-09 2 Category E 61300
2015-10 1 Category A 56001
2015-10 1 Category B 58190
2015-10 1 Category C 44890
2015-10 1 Category D 6201
2015-10 1 Category E 58801
2015-10 2 Category A 57301
2015-10 2 Category B 59889
2015-10 2 Category C 42303
2015-10 2 Category D 6302
2015-10 2 Category E 60000
2015-11 1 Category A 56001
2015-11 1 Category B 57501
2015-11 1 Category C 43809
2015-11 1 Category D 5912
2015-11 1 Category E 60689
2015-11 2 Category A 59200
2015-11 2 Category B 61103
2015-11 2 Category C 45890
2015-11 2 Category D 6502
2015-11 2 Category E 62019
2015-12 1 Category A 56989
2015-12 1 Category B 60001
2015-12 1 Category C 48101
2015-12 1 Category D 6501
2015-12 1 Category E 60003
2015-12 2 Category A 54301
2015-12 2 Category B 55001
2015-12 2 Category C 46001
2015-12 2 Category D 6600
2015-12 2 Category E 57501
2016-01 1 Category A 45002
2016-01 1 Category B 54920
2016-01 1 Category C 42036
2016-01 1 Category D 6889
2016-01 1 Category E 55089
2016-01 2 Category A 51301
2016-01 2 Category B 50089
2016-01 2 Category C 46502
2016-01 2 Category D 6512
2016-01 2 Category E 51000
2016-02 1 Category A 46651
2016-02 1 Category B 38610
2016-02 1 Category C 45036
2016-02 1 Category D 6503
2016-02 1 Category E 44001
2016-02 2 Category A 43000
2016-02 2 Category B 46970
2016-02 2 Category C 45001
2016-02 2 Category D 6353
2016-02 2 Category E 45009
2016-03 1 Category A 45000
2016-03 1 Category B 47604
2016-03 1 Category C 48890
2016-03 1 Category D 6503
2016-03 1 Category E 48002
2016-03 2 Category A 45504
2016-03 2 Category B 46502
2016-03 2 Category C 46502
2016-03 2 Category D 6589
2016-03 2 Category E 46667
2016-04 1 Category A 46009
2016-04 1 Category B 47000
2016-04 1 Category C 44213
2016-04 1 Category D 6503
2016-04 1 Category E 47510
2016-04 2 Category A 47300
2016-04 2 Category B 49602
2016-04 2 Category C 43002
2016-04 2 Category D 6501
2016-04 2 Category E 49501
2016-05 1 Category A 47889
2016-05 1 Category B 51010
2016-05 1 Category C 42302
2016-05 1 Category D 6302
2016-05 1 Category E 49000
2016-05 2 Category A 47020
2016-05 2 Category B 49156
2016-05 2 Category C 43002
2016-05 2 Category D 6303
2016-05 2 Category E 49700
2016-06 1 Category A 53694
2016-06 1 Category B 56000
2016-06 1 Category C 46434
2016-06 1 Category D 6302
2016-06 1 Category E 55100
2016-06 2 Category A 55200
2016-06 2 Category B 57010
2016-06 2 Category C 48002
2016-06 2 Category D 6303
2016-06 2 Category E 57390
2016-07 1 Category A 52301
2016-07 1 Category B 56089
2016-07 1 Category C 47889
2016-07 1 Category D 6012
2016-07 1 Category E 56002
2016-07 2 Category A 53000
2016-07 2 Category B 57508
2016-07 2 Category C 49890
2016-07 2 Category D 6302
2016-07 2 Category E 57501
2016-08 1 Category A 52503
2016-08 1 Category B 57903
2016-08 1 Category C 48302
2016-08 1 Category D 6206
2016-08 1 Category E 58201
2016-08 2 Category A 53334
2016-08 2 Category B 56500
2016-08 2 Category C 48001
2016-08 2 Category D 6352
2016-08 2 Category E 56956
2016-09 1 Category A 51506
2016-09 1 Category B 57002
2016-09 1 Category C 49801
2016-09 1 Category D 6452
2016-09 1 Category E 56889
2016-09 2 Category A 50000
2016-09 2 Category B 55501
2016-09 2 Category C 49890
2016-09 2 Category D 6501
2016-09 2 Category E 55201
2016-10 1 Category A 51507
2016-10 1 Category B 53001
2016-10 1 Category C 48702
2016-10 1 Category D 6353
2016-10 1 Category E 54200
2016-10 2 Category A 50991
2016-10 2 Category B 56410
2016-10 2 Category C 45589
2016-10 2 Category D 6354
2016-10 2 Category E 56340
2016-11 1 Category A 52668
2016-11 1 Category B 56206
2016-11 1 Category C 48001
2016-11 1 Category D 6311
2016-11 1 Category E 56000
2016-11 2 Category A 50951
2016-11 2 Category B 53001
2016-11 2 Category C 49002
2016-11 2 Category D 6212
2016-11 2 Category E 54901
2016-12 1 Category A 48000
2016-12 1 Category B 46229
2016-12 1 Category C 51209
2016-12 1 Category D 6113
2016-12 1 Category E 50010
2016-12 2 Category A 49751
2016-12 2 Category B 51109
2016-12 2 Category C 49500
2016-12 2 Category D 6101
2016-12 2 Category E 50389
2017-01 1 Category A 50101
2017-01 1 Category B 53106
2017-01 1 Category C 46302
2017-01 1 Category D 6053
2017-01 1 Category E 53001
2017-01 2 Category A 50889
2017-01 2 Category B 52807
2017-01 2 Category C 47001
2017-01 2 Category D 6052
2017-01 2 Category E 52600
2017-02 1 Category A 48401
2017-02 1 Category B 48209
2017-02 1 Category C 48901
2017-02 1 Category D 6412
2017-02 1 Category E 48556
2017-02 2 Category A 49430
2017-02 2 Category B 50621
2017-02 2 Category C 49810
2017-02 2 Category D 6801
2017-02 2 Category E 51000
2017-03 1 Category A 50789
2017-03 1 Category B 53300
2017-03 1 Category C 49002
2017-03 1 Category D 7483
2017-03 1 Category E 53001
2017-03 2 Category A 51765
2017-03 2 Category B 54000
2017-03 2 Category C 47036
2017-03 2 Category D 8081
2017-03 2 Category E 54501
2017-04 1 Category A 52000
2017-04 1 Category B 54405
2017-04 1 Category C 45906
2017-04 1 Category D 7589
2017-04 1 Category E 54556
2017-04 2 Category A 51600
2017-04 2 Category B 54406
2017-04 2 Category C 26501
2017-04 2 Category D 6712
2017-04 2 Category E 54616
2017-05 1 Category A 51106
2017-05 1 Category B 55414
2017-05 1 Category C 26029
2017-05 1 Category D 6301
2017-05 1 Category E 55000
2017-05 2 Category A 46489
2017-05 2 Category B 53001
2017-05 2 Category C 30600
2017-05 2 Category D 6101
2017-05 2 Category E 52000
2017-06 1 Category A 45201
2017-06 1 Category B 50110
2017-06 1 Category C 38501
2017-06 1 Category D 6101
2017-06 1 Category E 50526
2017-06 2 Category A 42801
2017-06 2 Category B 47501
2017-06 2 Category C 36879
2017-06 2 Category D 6001
2017-06 2 Category E 48001
2017-07 1 Category A 42801
2017-07 1 Category B 49802
2017-07 1 Category C 40212
2017-07 1 Category D 6001
2017-07 1 Category E 49899
2017-07 2 Category A 44002
2017-07 2 Category B 50001
2017-07 2 Category C 42809
2017-07 2 Category D 5851
2017-07 2 Category E 50101
2017-08 1 Category A 46778
2017-08 1 Category B 53711
2017-08 1 Category C 42801
2017-08 1 Category D 5701
2017-08 1 Category E 52751
2017-08 2 Category A 42900
2017-08 2 Category B 51000
2017-08 2 Category C 42004
2017-08 2 Category D 3512
2017-08 2 Category E 50000
2017-09 1 Category A 36001
2017-09 1 Category B 49000
2017-09 1 Category C 43002
2017-09 1 Category D 5402
2017-09 1 Category E 48005
2017-09 2 Category A 42902
2017-09 2 Category B 49189
2017-09 2 Category C 46890
2017-09 2 Category D 5501
2017-09 2 Category E 49012
2017-10 1 Category A 41761
2017-10 1 Category B 48109
2017-10 1 Category C 48902
2017-10 1 Category D 5010
2017-10 1 Category E 49000
2017-10 2 Category A 41617
2017-10 2 Category B 49996
2017-10 2 Category C 51890
2017-10 2 Category D 4903
2017-10 2 Category E 52000
2017-11 1 Category A 47112
2017-11 1 Category B 57414
2017-11 1 Category C 58036
2017-11 1 Category D 5502
2017-11 1 Category E 57000
2017-11 2 Category A 46791
2017-11 2 Category B 57390
2017-11 2 Category C 57701
2017-11 2 Category D 5992
2017-11 2 Category E 57501
2017-12 1 Category A 42339
2017-12 1 Category B 53711
2017-12 1 Category C 42000
2017-12 1 Category D 6552
2017-12 1 Category E 54334
2017-12 2 Category A 38200
2017-12 2 Category B 47002
2017-12 2 Category C 45112
2017-12 2 Category D 7501
2017-12 2 Category E 48011
2018-01 1 Category A 41400
2018-01 1 Category B 45289
2018-01 1 Category C 40101
2018-01 1 Category D 7701
2018-01 1 Category E 47390
2018-01 2 Category A 36890
2018-01 2 Category B 42661
2018-01 2 Category C 39000
2018-01 2 Category D 8001
2018-01 2 Category E 44000
2018-02 1 Category A 40000
2018-02 1 Category B 42322
2018-02 1 Category C 38303
2018-02 1 Category D 8451
2018-02 1 Category E 39903
2018-02 2 Category A 36810
2018-02 2 Category B 39000
2018-02 2 Category C 36859
2018-02 2 Category D 7667
2018-02 2 Category E 38801
2018-03 1 Category A 38830
2018-03 1 Category B 39001
2018-03 1 Category C 36003
2018-03 1 Category D 8009
2018-03 1 Category E 39000
2018-03 2 Category A 38000
2018-03 2 Category B 37010
2018-03 2 Category C 35001
2018-03 2 Category D 7602
2018-03 2 Category E 38000
2018-04 1 Category A 37000
2018-04 1 Category B 37605
2018-04 1 Category C 34001
2018-04 1 Category D 7114
2018-04 1 Category E 38039
2018-04 2 Category A 38510
2018-04 2 Category B 37330
2018-04 2 Category C 34202
2018-04 2 Category D 7115
2018-04 2 Category E 38389
2018-05 1 Category A 38941
2018-05 1 Category B 38501
2018-05 1 Category C 33190
2018-05 1 Category D 7204
2018-05 1 Category E 38600
2018-05 2 Category A 38001
2018-05 2 Category B 37989
2018-05 2 Category C 29901
2018-05 2 Category D 7115
2018-05 2 Category E 38700
2018-06 1 Category A 36426
2018-06 1 Category B 36000
2018-06 1 Category C 29902
2018-06 1 Category D 7001
2018-06 1 Category E 37000
2018-06 2 Category A 34110
2018-06 2 Category B 33900
2018-06 2 Category C 32001
2018-06 2 Category D 6889
2018-06 2 Category E 34400
2018-07 1 Category A 25000
2018-07 1 Category B 31000
2018-07 1 Category C 31092
2018-07 1 Category D 6514
2018-07 1 Category E 31001
2018-07 2 Category A 32699
2018-07 2 Category B 32551
2018-07 2 Category C 30889
2018-07 2 Category D 6189
2018-07 2 Category E 32809
2018-08 1 Category A 33798
2018-08 1 Category B 34381
2018-08 1 Category C 30389
2018-08 1 Category D 5514
2018-08 1 Category E 33420
2018-08 2 Category A 31997
2018-08 2 Category B 32429
2018-08 2 Category C 29902
2018-08 2 Category D 4889
2018-08 2 Category E 32311
2018-09 1 Category A 30209
2018-09 1 Category B 32001
2018-09 1 Category C 27001
2018-09 1 Category D 4390
2018-09 1 Category E 31801
2018-09 2 Category A 28000
2018-09 2 Category B 31307
2018-09 2 Category C 27104
2018-09 2 Category D 4214
2018-09 2 Category E 32000
2018-10 1 Category A 28457
2018-10 1 Category B 31301
2018-10 1 Category C 28501
2018-10 1 Category D 4109
2018-10 1 Category E 32552
2018-10 2 Category A 25556
2018-10 2 Category B 31302
2018-10 2 Category C 29501
2018-10 2 Category D 3951
2018-10 2 Category E 32900
2018-11 1 Category A 28199
2018-11 1 Category B 32302
2018-11 1 Category C 29501
2018-11 1 Category D 2509
2018-11 1 Category E 32000
2018-11 2 Category A 25000
2018-11 2 Category B 31101
2018-11 2 Category C 27509
2018-11 2 Category D 2989
2018-11 2 Category E 30959
2018-12 1 Category A 23568
2018-12 1 Category B 31001
2018-12 1 Category C 27009
2018-12 1 Category D 3399
2018-12 1 Category E 30851
2018-12 2 Category A 25501
2018-12 2 Category B 31001
2018-12 2 Category C 27001
2018-12 2 Category D 3789
2018-12 2 Category E 31809
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
html {
font-family: 'Arial', sans-serif;
}
.header {
margin-top: 60px;
margin-left: 60px;
text-align: left;
}
input {
margin-right: 10px;
}
.form-check-label {
font-size: 0.8em;
margin-right: 20px;
}
</style>
</head>
<body>
<div class ='container-fluid'>
<div class='row'>
<div id="chart">
<div class='header'>
<h3>COE Prices from 2010-2018</h3>
<p>There are 2 COE Open Bidding exercises each month (Bidding Exercise 1 starts on the first Monday while Bidding Exercise 2 starts on the third Monday of the month)</p>
<div class="form-check-inline">
<label class="form-check-label">
<input style="display: inline" type="radio" name="bidding_no" value="1" checked>Bidding Exercise 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" name="bidding_no" value="2">Bidding Exercise 2
</label>
</div>
</div>
</div>
</div>
</div>
<script>
var glines
var mouseG
var tooltip
var parseDate = d3.timeParse("%Y-%m")
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]
var margin = {top: 80, right: 200, bottom: 40, left: 80}
var width = 1400 - margin.left - margin.right
var height = 500 - margin.top - margin.bottom
var lineOpacity = 1
var lineStroke = "2px"
var axisPad = 6 // axis formatting
var R = 6 //legend marker
var category = ["Category A", "Category B", "Category C", "Category D", "Category E"]
// since Category B and E are really close to each other, assign them diverging colors
var color = d3.scaleOrdinal()
.domain(category)
.range(["#2D4057", "#7C8DA4", "#B7433D", "#2E7576", "#EE811D"])
d3.csv("coe-results.csv", data => {
var res = data.map((d,i) => {
return {
date : parseDate(d.month),
bidding_no : +d.bidding_no,
vehicle_class : d.vehicle_class,
premium : +d.premium
}
})
var xScale = d3.scaleTime()
.domain(d3.extent(res, d=>d.date))
.range([0, width])
function roundToNearest10K(x) {
return Math.round(x / 10000) * 10000
}
var yScale = d3.scaleLinear()
.domain([0, roundToNearest10K(d3.max(res, d => d.premium))])
.range([height, 0]);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// CREATE AXES //
// render axis first before lines so that lines will overlay the horizontal ticks
var xAxis = d3.axisBottom(xScale).ticks(d3.timeYear.every(1)).tickSizeOuter(axisPad*2).tickSizeInner(axisPad*2)
var yAxis = d3.axisLeft(yScale).ticks(10, "s").tickSize(-width) //horizontal ticks across svg width
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height})`)
.call(xAxis)
.call(g => {
var years = xScale.ticks(d3.timeYear.every(1))
var xshift = (width/(years.length))/2
g.selectAll("text").attr("transform", `translate(${xshift}, 0)`) //shift tick labels to middle of interval
.style("text-anchor", "middle")
.attr("y", axisPad)
.attr('fill', '#A9A9A9')
g.selectAll("line")
.attr('stroke', '#A9A9A9')
g.select(".domain")
.attr('stroke', '#A9A9A9')
})
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.call(g => {
g.selectAll("text")
.style("text-anchor", "middle")
.attr("x", -axisPad*2)
.attr('fill', '#A9A9A9')
g.selectAll("line")
.attr('stroke', '#A9A9A9')
.attr('stroke-width', 0.7) // make horizontal tick thinner and lighter so that line paths can stand out
.attr('opacity', 0.3)
g.select(".domain").remove()
})
.append('text')
.attr('x', 50)
.attr("y", -10)
.attr("fill", "#A9A9A9")
.text("Singapore Dollars")
// CREATE LEGEND //
var svgLegend = svg.append('g')
.attr('class', 'gLegend')
.attr("transform", "translate(" + (width + 20) + "," + 0 + ")")
var legend = svgLegend.selectAll('.legend')
.data(category)
.enter().append('g')
.attr("class", "legend")
.attr("transform", function (d, i) {return "translate(0," + i * 20 + ")"})
legend.append("circle")
.attr("class", "legend-node")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", R)
.style("fill", d=>color(d))
legend.append("text")
.attr("class", "legend-text")
.attr("x", R*2)
.attr("y", R/2)
.style("fill", "#A9A9A9")
.style("font-size", 12)
.text(d=>d)
// line generator
var line = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d.premium))
renderChart(1) // inital chart render (set default to Bidding Exercise 1 data)
// Update chart when radio button is selected
d3.selectAll(("input[name='bidding_no']")).on('change', function(){
updateChart(this.value)
})
function updateChart(bidding_no) {
var resNew = res.filter(d=>d.bidding_no == parseInt(bidding_no))
var res_nested = d3.nest()
.key(d=>d.vehicle_class)
.entries(resNew)
glines.select('.line') //select line path within line-group (which represents a vehicle category), then bind new data
.data(res_nested)
.transition().duration(750)
.attr('d', function(d) {
return line(d.values)
})
mouseG.selectAll('.mouse-per-line')
.data(res_nested)
mouseG.on('mousemove', function () {
var mouse = d3.mouse(this)
updateTooltipContent(mouse, res_nested)
})
}
function renderChart(bidding_no) {
var resNew = res.filter(d=>d.bidding_no == parseInt(bidding_no))
var res_nested = d3.nest() // necessary to nest data so that keys represent each vehicle category
.key(d=>d.vehicle_class)
.entries(resNew)
// APPEND MULTIPLE LINES //
var lines = svg.append('g')
.attr('class', 'lines')
glines = lines.selectAll('.line-group')
.data(res_nested).enter()
.append('g')
.attr('class', 'line-group')
glines
.append('path')
.attr('class', 'line')
.attr('d', d => line(d.values))
.style('stroke', (d, i) => color(i))
.style('fill', 'none')
.style('opacity', lineOpacity)
.style('stroke-width', lineStroke)
// APPEND CIRCLE MARKERS //
//var gcircle = lines.selectAll("circle-group")
//.data(res_nested).enter()
//.append("g")
//.attr('class', 'circle-group')
//gcircle.selectAll("circle")
//.data(d => d.values).enter()
//.append("g")
//.attr("class", "circle")
//.append("circle")
//.attr("cx", d => xScale(d.date))
//.attr("cy", d => yScale(d.premium))
//.attr("r", 2)
// CREATE HOVER TOOLTIP WITH VERTICAL LINE //
tooltip = d3.select("#chart").append("div")
.attr('id', 'tooltip')
.style('position', 'absolute')
.style("background-color", "#D3D3D3")
.style('padding', 6)
.style('display', 'none')
mouseG = svg.append("g")
.attr("class", "mouse-over-effects");
mouseG.append("path") // create vertical line to follow mouse
.attr("class", "mouse-line")
.style("stroke", "#A9A9A9")
.style("stroke-width", lineStroke)
.style("opacity", "0");
var lines = document.getElementsByClassName('line');
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(res_nested)
.enter()
.append("g")
.attr("class", "mouse-per-line");
mousePerLine.append("circle")
.attr("r", 4)
.style("stroke", function (d) {
return color(d.key)
})
.style("fill", "none")
.style("stroke-width", lineStroke)
.style("opacity", "0");
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('width', width)
.attr('height', height)
.attr('fill', 'none')
.attr('pointer-events', 'all')
.on('mouseout', function () { // on mouse out hide line, circles and text
d3.select(".mouse-line")
.style("opacity", "0");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "0");
d3.selectAll(".mouse-per-line text")
.style("opacity", "0");
d3.selectAll("#tooltip")
.style('display', 'none')
})
.on('mouseover', function () { // on mouse in show line, circles and text
d3.select(".mouse-line")
.style("opacity", "1");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "1");
d3.selectAll("#tooltip")
.style('display', 'block')
})
.on('mousemove', function () { // update tooltip content, line, circles and text when mouse moves
var mouse = d3.mouse(this)
d3.selectAll(".mouse-per-line")
.attr("transform", function (d, i) {
var xDate = xScale.invert(mouse[0]) // use 'invert' to get date corresponding to distance from mouse position relative to svg
var bisect = d3.bisector(function (d) { return d.date; }).left // retrieve row index of date on parsed csv
var idx = bisect(d.values, xDate);
d3.select(".mouse-line")
.attr("d", function () {
var data = "M" + xScale(d.values[idx].date) + "," + (height);
data += " " + xScale(d.values[idx].date) + "," + 0;
return data;
});
return "translate(" + xScale(d.values[idx].date) + "," + yScale(d.values[idx].premium) + ")";
});
updateTooltipContent(mouse, res_nested)
})
}
function updateTooltipContent(mouse, res_nested) {
sortingObj = []
res_nested.map(d => {
var xDate = xScale.invert(mouse[0])
var bisect = d3.bisector(function (d) { return d.date; }).left
var idx = bisect(d.values, xDate)
sortingObj.push({key: d.values[idx].vehicle_class, premium: d.values[idx].premium, bidding_no: d.values[idx].bidding_no, year: d.values[idx].date.getFullYear(), month: monthNames[d.values[idx].date.getMonth()]})
})
sortingObj.sort(function(x, y){
return d3.descending(x.premium, y.premium);
})
var sortingArr = sortingObj.map(d=> d.key)
var res_nested1 = res_nested.slice().sort(function(a, b){
return sortingArr.indexOf(a.key) - sortingArr.indexOf(b.key) // rank vehicle category based on price of premium
})
tooltip.html(sortingObj[0].month + "-" + sortingObj[0].year + " (Bidding No:" + sortingObj[0].bidding_no + ')')
.style('display', 'block')
.style('left', d3.event.pageX + 20)
.style('top', d3.event.pageY - 20)
.style('font-size', 11.5)
.selectAll()
.data(res_nested1).enter() // for each vehicle category, list out name and price of premium
.append('div')
.style('color', d => {
return color(d.key)
})
.style('font-size', 10)
.html(d => {
var xDate = xScale.invert(mouse[0])
var bisect = d3.bisector(function (d) { return d.date; }).left
var idx = bisect(d.values, xDate)
return d.key.substring(0, 3) + " " + d.key.slice(-1) + ": $" + d.values[idx].premium.toString()
})
}
})
</script>
</body>
</html>
@zjx20
Copy link

zjx20 commented Jun 30, 2019

really cool chart!
small nits if you want it to work in a html5 page

-      .style('left', d3.event.pageX + 20)
-      .style('top', d3.event.pageY - 20)
+      .style('left', d3.event.pageX + 20 + "px")
+      .style('top', d3.event.pageY - 20 + "px")

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