D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tomshanley
Full window
Github gist
Makeover Monday - Gold v Oil
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { width: 100%; max-width: 800px; margin:0;top:0;right:0;bottom:0;left:20;font-family: sans-serif } svg { display: block; } text { font-family: monospace } .phase-label { fill: black; text-anchor: middle } path { stroke-linejoin: round; stroke-linecap: round; stroke-width: 3} .minmax { stroke-dasharray: 2,2; stroke-width: 1; fill: none } </style> </head> <body> <h1>Gold v Oil: 1983 to 2017</h1> <p>The gold/oil ratio shows the gap in price between the two commodities. A higher ratio means that gold is over valued compared to the price oil: either gold costs too much, or oil is comparitively cheap.</p> <p>Since 1983, the gold/oil ratio has increased during periods of financial crisis, as oil prices tend to fall when economic growth is weak, and people look to gold as a safe investment. </p> <div id="chart"></div> <h2>Sources</h2> <ul> <li>Data: Quandl – <a href="https://www.quandl.com/data/WGC/GOLD_DAILY_USD-Gold-Prices-Daily-Currency-USD">Gold Prices</a>, <a href="https://www.quandl.com/data/ODA/POILAPSP_INDEX-Blended-Crude-Oil-Price">Crude Oil Prices</a>, <a href="https://www.quandl.com/data/FRED/CPIAUCSL-Consumer-Price-Index-for-All-Urban-Consumers-All-Items">Consumer Price Index</a></li> <li>Interpretation: <a href="https://www.vizwiz.com/2017/04/gold-oil-ratio.html">Andy Kriebel</a>, <a href="https://www.marketwatch.com/story/why-the-goldoil-ratio-could-tip-investors-off-to-the-next-market-storm-2016-02-16"> Marketwatch.com</a>, <a href="https://www.tradingtechnologies.com/blog/2016/11/23/on-the-oil-gold-ratio-why-oils-going-higher/">Trading Technologies</a></li> </ul> <script> const data = [ { "gold": 1033.535015, "oil": 72.98912742, "date": "1/03/1983", "ratio": 13.16012291 }, { "gold": 1062.089626, "oil": 75.78754858, "date": "1/04/1983", "ratio": 13.01403852 }, { "gold": 1078.137601, "oil": 74.54551411, "date": "1/05/1983", "ratio": 13.46280992 }, { "gold": 1023.092153, "oil": 77.17459557, "date": "1/06/1983", "ratio": 12.2568515 }, { "gold": 1033.688577, "oil": 78.38396794, "date": "1/07/1983", "ratio": 12.1875 }, { "gold": 1011.663886, "oil": 77.14776623, "date": "1/08/1983", "ratio": 12.113327 }, { "gold": 986.1185259, "oil": 73.92236653, "date": "1/09/1983", "ratio": 12.33992095 }, { "gold": 926.4257937, "oil": 73.65327579, "date": "1/10/1983", "ratio": 11.57820217 }, { "gold": 979.2908012, "oil": 70.67819782, "date": "1/11/1983", "ratio": 12.85562778 }, { "gold": 921.9083235, "oil": 71.36110454, "date": "1/12/1983", "ratio": 11.91891892 }, { "gold": 894.8768364, "oil": 71.78169246, "date": "1/01/1984", "ratio": 11.46664443 }, { "gold": 939.3601852, "oil": 72.78999025, "date": "1/02/1984", "ratio": 11.90507365 }, { "gold": 922.9612245, "oil": 73.29048591, "date": "1/03/1984", "ratio": 11.59319287 }, { "gold": 889.3327009, "oil": 71.61045111, "date": "1/04/1984", "ratio": 11.41903503 }, { "gold": 907.5725121, "oil": 72.81837488, "date": "1/05/1984", "ratio": 11.46350957 }, { "gold": 879.4195082, "oil": 70.13196721, "date": "1/06/1984", "ratio": 11.5394958 }, { "gold": 803.9469837, "oil": 64.81360231, "date": "1/07/1984", "ratio": 11.40398551 }, { "gold": 815.4520594, "oil": 68.44411686, "date": "1/08/1984", "ratio": 10.91412932 }, { "gold": 802.6086437, "oil": 69.25199236, "date": "1/09/1984", "ratio": 10.58968307 }, { "gold": 775.7127498, "oil": 66.19725595, "date": "1/10/1984", "ratio": 10.71820098 }, { "gold": 763.7924027, "oil": 63.40173409, "date": "1/11/1984", "ratio": 11.04686928 }, { "gold": 714.3793175, "oil": 61.19610047, "date": "1/12/1984", "ratio": 10.67360848 }, { "gold": 709.2115326, "oil": 61.08030842, "date": "1/01/1985", "ratio": 10.61113215 }, { "gold": 661.7437912, "oil": 61.47145626, "date": "1/02/1985", "ratio": 9.765057987 }, { "gold": 753.6372191, "oil": 64.75443258, "date": "1/03/1985", "ratio": 10.63838812 }, { "gold": 734.1796355, "oil": 63.12551215, "date": "1/04/1985", "ratio": 10.63047412 }, { "gold": 716.0488806, "oil": 63.48662687, "date": "1/05/1985", "ratio": 10.27873563 }, { "gold": 722.5782791, "oil": 61.10362977, "date": "1/06/1985", "ratio": 10.8254559 }, { "gold": 743.3672238, "oil": 61.5576156, "date": "1/07/1985", "ratio": 11.0759587 }, { "gold": 755.0166358, "oil": 63.61850602, "date": "1/08/1985", "ratio": 10.86787749 }, { "gold": 736.6590657, "oil": 65.76222757, "date": "1/09/1985", "ratio": 10.20185695 }, { "gold": 732.478765, "oil": 68.4488, "date": "1/10/1985", "ratio": 9.701119157 }, { "gold": 729.5673211, "oil": 66.72188073, "date": "1/11/1985", "ratio": 9.934453782 }, { "gold": 729.5847306, "oil": 58.71505023, "date": "1/12/1985", "ratio": 11.42585551 }, { "gold": 779.6472247, "oil": 41.88518471, "date": "1/01/1986", "ratio": 17.61391397 }, { "gold": 753.5473929, "oil": 29.54913036, "date": "1/02/1986", "ratio": 24.5015083 }, { "gold": 770.7996334, "oil": 23.34805866, "date": "1/03/1986", "ratio": 32.0134357 }, { "gold": 777.5717111, "oil": 30.00088684, "date": "1/04/1986", "ratio": 24.91829085 }, { "gold": 769.7125872, "oil": 32.0713578, "date": "1/05/1986", "ratio": 23 }, { "gold": 774.8309415, "oil": 28.55757587, "date": "1/06/1986", "ratio": 26.13223787 }, { "gold": 798.1228311, "oil": 24.89250228, "date": "1/07/1986", "ratio": 31.06278027 }, { "gold": 858.0635219, "oil": 35.4645438, "date": "1/08/1986", "ratio": 23.19496855 }, { "gold": 940.5042909, "oil": 32.82431091, "date": "1/09/1986", "ratio": 27.65267434 }, { "gold": 889.5504537, "oil": 33.87390381, "date": "1/10/1986", "ratio": 25.26064178 }, { "gold": 862.4743659, "oil": 33.21467391, "date": "1/11/1986", "ratio": 24.96666667 }, { "gold": 857.7060018, "oil": 39.58133935, "date": "1/12/1986", "ratio": 20.66945373 }, { "gold": 878.8710054, "oil": 41.14564632, "date": "1/01/1987", "ratio": 20.36 }, { "gold": 887.4247853, "oil": 36.29728086, "date": "1/02/1987", "ratio": 23.44879518 }, { "gold": 917.269697, "oil": 41.02657576, "date": "1/03/1987", "ratio": 21.35793946 }, { "gold": 983.1543478, "oil": 40.62764685, "date": "1/04/1987", "ratio": 23.19914576 }, { "gold": 975.6766372, "oil": 41.92597168, "date": "1/05/1987", "ratio": 22.27141383 }, { "gold": 963.4093216, "oil": 43.70126344, "date": "1/06/1987", "ratio": 21.04534253 }, { "gold": 993.521529, "oil": 45.90606503, "date": "1/07/1987", "ratio": 20.64248947 }, { "gold": 969.7127209, "oil": 42.19768854, "date": "1/08/1987", "ratio": 21.98023315 }, { "gold": 979.3319093, "oil": 41.75214821, "date": "1/09/1987", "ratio": 22.45584482 }, { "gold": 996.5465043, "oil": 42.42975304, "date": "1/10/1987", "ratio": 22.48697395 }, { "gold": 1043.29766, "oil": 39.21104506, "date": "1/11/1987", "ratio": 25.60723933 }, { "gold": 1023.729118, "oil": 35.31558824, "date": "1/12/1987", "ratio": 27.98802395 }, { "gold": 965.1955172, "oil": 35.69958966, "date": "1/01/1988", "ratio": 26.03659976 }, { "gold": 896.5286489, "oil": 33.68162306, "date": "1/02/1988", "ratio": 25.61773891 }, { "gold": 958.8497597, "oil": 35.84014421, "date": "1/03/1988", "ratio": 25.75351288 }, { "gold": 936.5404437, "oil": 37.52419283, "date": "1/04/1988", "ratio": 23.95831017 }, { "gold": 947.6725957, "oil": 36.42974128, "date": "1/05/1988", "ratio": 25.01370645 }, { "gold": 904.3984153, "oil": 31.40689492, "date": "1/06/1988", "ratio": 27.79617414 }, { "gold": 901.0981266, "oil": 33.646773, "date": "1/07/1988", "ratio": 25.78111588 }, { "gold": 878.7207143, "oil": 31.18405714, "date": "1/08/1988", "ratio": 27.17852437 }, { "gold": 811.5253724, "oil": 27.35088033, "date": "1/09/1988", "ratio": 28.67090501 }, { "gold": 840.8282235, "oil": 27.6877965, "date": "1/10/1988", "ratio": 29.36818851 }, { "gold": 858.759734, "oil": 31.13156442, "date": "1/11/1988", "ratio": 26.5848564 }, { "gold": 830.9007042, "oil": 34.91707042, "date": "1/12/1988", "ratio": 22.79640371 }, { "gold": 794.6966997, "oil": 34.3494538, "date": "1/01/1989", "ratio": 22.13564298 }, { "gold": 778.0100329, "oil": 36.48806743, "date": "1/02/1989", "ratio": 20.32231405 }, { "gold": 766.5881506, "oil": 40.38991326, "date": "1/03/1989", "ratio": 17.97969292 }, { "gold": 749.7633875, "oil": 40.55136637, "date": "1/04/1989", "ratio": 17.48922625 }, { "gold": 715.0010348, "oil": 39.32703314, "date": "1/05/1989", "ratio": 17.18090452 }, { "gold": 734.7589041, "oil": 39.92912329, "date": "1/06/1989", "ratio": 17.40157869 }, { "gold": 723.1696225, "oil": 35.95231004, "date": "1/07/1989", "ratio": 19.11469143 }, { "gold": 706.4795823, "oil": 36.97334779, "date": "1/08/1989", "ratio": 18.10780669 }, { "gold": 717.9053686, "oil": 39.43092788, "date": "1/09/1989", "ratio": 17.20665673 }, { "gold": 731.6255024, "oil": 38.87186922, "date": "1/10/1989", "ratio": 17.82146439 }, { "gold": 792.5047577, "oil": 38.62040826, "date": "1/11/1989", "ratio": 19.52036199 }, { "gold": 771.5103405, "oil": 42.23370705, "date": "1/12/1989", "ratio": 17.26764436 }, { "gold": 795.7892, "oil": 43.48512, "date": "1/01/1990", "ratio": 17.30026455 }, { "gold": 778.6432969, "oil": 41.13803438, "date": "1/02/1990", "ratio": 17.9275766 }, { "gold": 700.4938569, "oil": 38.55092379, "date": "1/03/1990", "ratio": 17.17061144 }, { "gold": 697.4411559, "oil": 35.16127541, "date": "1/04/1990", "ratio": 18.83549083 }, { "gold": 687.4609063, "oil": 32.94813323, "date": "1/05/1990", "ratio": 19.86494253 }, { "gold": 662.8084065, "oil": 32.12418938, "date": "1/06/1990", "ratio": 19.63268893 }, { "gold": 697.4134713, "oil": 38.75768123, "date": "1/07/1990", "ratio": 16.9942001 }, { "gold": 720.2839286, "oil": 50.74959878, "date": "1/08/1990", "ratio": 13.19289898 }, { "gold": 753.4902943, "oil": 72.89520453, "date": "1/09/1990", "ratio": 9.33662364 }, { "gold": 695.4465517, "oil": 64.56016342, "date": "1/10/1990", "ratio": 9.772069259 }, { "gold": 703.6681451, "oil": 52.74997008, "date": "1/11/1990", "ratio": 12.33968804 }, { "gold": 703.5056036, "oil": 51.80657526, "date": "1/12/1990", "ratio": 12.57946554 }, { "gold": 664.2342984, "oil": 39.09182183, "date": "1/01/1991", "ratio": 15.99164345 }, { "gold": 657.7569881, "oil": 34.74668843, "date": "1/02/1991", "ratio": 17.93006263 }, { "gold": 644.9718027, "oil": 35.59903412, "date": "1/03/1991", "ratio": 17.11767702 }, { "gold": 647.3394893, "oil": 37.92658475, "date": "1/04/1991", "ratio": 16.06822519 }, { "gold": 649.7299705, "oil": 38.09321386, "date": "1/05/1991", "ratio": 16.05631803 }, { "gold": 662.109125, "oil": 36.9566, "date": "1/06/1991", "ratio": 16.91585603 }, { "gold": 651.2651322, "oil": 38.91257562, "date": "1/07/1991", "ratio": 15.73662362 }, { "gold": 621.7086676, "oil": 39.83660029, "date": "1/08/1991", "ratio": 14.606469 }, { "gold": 633.2763066, "oil": 39.66675766, "date": "1/09/1991", "ratio": 14.96491228 }, { "gold": 636.8966983, "oil": 41.64016181, "date": "1/10/1991", "ratio": 14.29525032 }, { "gold": 649.823643, "oil": 38.10595646, "date": "1/11/1991", "ratio": 16.05307263 }, { "gold": 624.6819754, "oil": 33.82109407, "date": "1/12/1991", "ratio": 17.47018828 }, { "gold": 625.9095155, "oil": 33.40776573, "date": "1/01/1992", "ratio": 17.73544974 }, { "gold": 622.7909524, "oil": 32.9474228, "date": "1/02/1992", "ratio": 17.90256959 }, { "gold": 600.5174838, "oil": 34.16464702, "date": "1/03/1992", "ratio": 16.57716049 }, { "gold": 589.8430488, "oil": 36.56378049, "date": "1/04/1992", "ratio": 15.13189448 }, { "gold": 590.5887616, "oil": 38.69012598, "date": "1/05/1992", "ratio": 14.26458616 }, { "gold": 599.197459, "oil": 37.68976445, "date": "1/06/1992", "ratio": 14.89814815 }, { "gold": 622.6335302, "oil": 38.05224342, "date": "1/07/1992", "ratio": 15.36259717 }, { "gold": 590.3153409, "oil": 37.29403977, "date": "1/08/1992", "ratio": 14.82867784 }, { "gold": 604.653012, "oil": 37.61322892, "date": "1/09/1992", "ratio": 15.07554123 }, { "gold": 585.2720889, "oil": 35.57350176, "date": "1/10/1992", "ratio": 15.45247333 }, { "gold": 574.9368895, "oil": 34.21751865, "date": "1/11/1992", "ratio": 15.80241327 }, { "gold": 571.8955306, "oil": 33.49943781, "date": "1/12/1992", "ratio": 16.07179487 }, { "gold": 565.6989286, "oil": 34.68319048, "date": "1/01/1993", "ratio": 15.31046397 }, { "gold": 559.6442767, "oil": 35.19130678, "date": "1/02/1993", "ratio": 14.90291262 }, { "gold": 576.2636985, "oil": 34.86924215, "date": "1/03/1993", "ratio": 15.52641879 }, { "gold": 602.31, "oil": 34.901, "date": "1/04/1993", "ratio": 16.2576717 }, { "gold": 639.8850693, "oil": 33.93959223, "date": "1/05/1993", "ratio": 17.85364635 }, { "gold": 641.135738, "oil": 31.93396396, "date": "1/06/1993", "ratio": 19.07692308 }, { "gold": 679.6664706, "oil": 30.24875294, "date": "1/07/1993", "ratio": 21.46923937 }, { "gold": 627.2728798, "oil": 30.87826934, "date": "1/08/1993", "ratio": 19.31437944 }, { "gold": 599.3484828, "oil": 31.67864414, "date": "1/09/1993", "ratio": 17.91963811 }, { "gold": 620.5523077, "oil": 28.4084011, "date": "1/10/1993", "ratio": 20.84397163 }, { "gold": 621.028863, "oil": 25.83573836, "date": "1/11/1993", "ratio": 23.03758911 }, { "gold": 654.5947027, "oil": 23.67736295, "date": "1/12/1993", "ratio": 26.64643613 }, { "gold": 631.4520437, "oil": 25.38173206, "date": "1/01/1994", "ratio": 23.87820935 }, { "gold": 635.8126312, "oil": 24.12938514, "date": "1/02/1994", "ratio": 25.35013812 }, { "gold": 646.7969545, "oil": 24.57894901, "date": "1/03/1994", "ratio": 25.31507776 }, { "gold": 625.1831997, "oil": 28.06639946, "date": "1/04/1994", "ratio": 21.27514793 }, { "gold": 642.3911593, "oil": 30.34618712, "date": "1/05/1994", "ratio": 20.16876024 }, { "gold": 641.7281609, "oil": 32.01616092, "date": "1/06/1994", "ratio": 19.04388229 }, { "gold": 632.5649596, "oil": 33.44028302, "date": "1/07/1994", "ratio": 17.91625616 }, { "gold": 632.8888926, "oil": 28.81018523, "date": "1/08/1994", "ratio": 20.96753986 }, { "gold": 646.5172873, "oil": 30.11131547, "date": "1/09/1994", "ratio": 20.4709081 }, { "gold": 628.0854819, "oil": 29.76390495, "date": "1/10/1994", "ratio": 20.10225399 }, { "gold": 625.1844192, "oil": 29.45596128, "date": "1/11/1994", "ratio": 20.22437673 }, { "gold": 624.1791805, "oil": 28.92478081, "date": "1/12/1994", "ratio": 20.57939189 }, { "gold": 608.9571694, "oil": 29.87122525, "date": "1/01/1995", "ratio": 19.38607939 }, { "gold": 609.7729887, "oil": 29.95404506, "date": "1/02/1995", "ratio": 19.3569497 }, { "gold": 633.7851852, "oil": 30.99403571, "date": "1/03/1995", "ratio": 19.44861763 }, { "gold": 627.6566864, "oil": 32.82012385, "date": "1/04/1995", "ratio": 18.12414132 }, { "gold": 617.6592899, "oil": 30.36061407, "date": "1/05/1995", "ratio": 19.34409741 }, { "gold": 620.8546129, "oil": 27.9107874, "date": "1/06/1995", "ratio": 21.24425287 }, { "gold": 614.113637, "oil": 28.13052163, "date": "1/07/1995", "ratio": 20.8308656 }, { "gold": 611.3098823, "oil": 28.52299804, "date": "1/08/1995", "ratio": 20.43217489 }, { "gold": 613.1459177, "oil": 28.00671718, "date": "1/09/1995", "ratio": 20.89281642 }, { "gold": 609.3981694, "oil": 28.09299283, "date": "1/10/1995", "ratio": 20.69217687 }, { "gold": 616.7962785, "oil": 28.91530774, "date": "1/11/1995", "ratio": 20.33113311 }, { "gold": 614.7239766, "oil": 31.05388564, "date": "1/12/1995", "ratio": 18.79539642 }, { "gold": 640.8581319, "oil": 28.0330989, "date": "1/01/1996", "ratio": 21.86076663 }, { "gold": 631.889671, "oil": 30.81773161, "date": "1/02/1996", "ratio": 19.50409417 }, { "gold": 623.0978842, "oil": 33.75277299, "date": "1/03/1996", "ratio": 17.46064276 }, { "gold": 612.7943498, "oil": 33.200205, "date": "1/04/1996", "ratio": 17.45754717 }, { "gold": 610.4466304, "oil": 30.88573913, "date": "1/05/1996", "ratio": 18.76467611 }, { "gold": 595.9395022, "oil": 32.63626803, "date": "1/06/1996", "ratio": 17.26003824 }, { "gold": 599.9390955, "oil": 31.7953707, "date": "1/07/1996", "ratio": 17.86875612 }, { "gold": 600.9641667, "oil": 34.60073155, "date": "1/08/1996", "ratio": 16.36853933 }, { "gold": 587.5100824, "oil": 37.79286493, "date": "1/09/1996", "ratio": 14.54552912 }, { "gold": 586.4258534, "oil": 36.08180152, "date": "1/10/1996", "ratio": 15.25267666 }, { "gold": 571.9470573, "oil": 36.58427851, "date": "1/11/1996", "ratio": 14.63368421 }, { "gold": 567.3592395, "oil": 39.82654431, "date": "1/12/1996", "ratio": 13.24575617 }, { "gold": 529.8678168, "oil": 37.03707026, "date": "1/01/1997", "ratio": 13.30641822 }, { "gold": 548.9252098, "oil": 31.07412649, "date": "1/02/1997", "ratio": 16.66502463 }, { "gold": 532.5954255, "oil": 31.22295745, "date": "1/03/1997", "ratio": 16.0578148 }, { "gold": 520.0317011, "oil": 30.89766479, "date": "1/04/1997", "ratio": 15.83077684 }, { "gold": 528.3638274, "oil": 31.92198124, "date": "1/05/1997", "ratio": 15.55172414 }, { "gold": 510.5124407, "oil": 30.2141573, "date": "1/06/1997", "ratio": 15.89646465 }, { "gold": 497.3785599, "oil": 30.69466584, "date": "1/07/1997", "ratio": 15.2040715 }, { "gold": 494.6210261, "oil": 29.81256592, "date": "1/08/1997", "ratio": 15.59102499 }, { "gold": 503.630062, "oil": 32.11949628, "date": "1/09/1997", "ratio": 14.67988669 }, { "gold": 471.3612632, "oil": 31.90846316, "date": "1/10/1997", "ratio": 13.77229602 }, { "gold": 448.7058009, "oil": 28.95119975, "date": "1/11/1997", "ratio": 14.49869452 }, { "gold": 438.4566873, "oil": 26.65188133, "date": "1/12/1997", "ratio": 15.45124717 }, { "gold": 460.0224136, "oil": 25.97010247, "date": "1/01/1998", "ratio": 16.71353864 }, { "gold": 448.7802716, "oil": 23.29915062, "date": "1/02/1998", "ratio": 18.26165803 }, { "gold": 454.212716, "oil": 23.55568272, "date": "1/03/1998", "ratio": 18.28251121 }, { "gold": 468.2720222, "oil": 23.19506412, "date": "1/04/1998", "ratio": 19.18843405 }, { "gold": 441.4111685, "oil": 22.85234932, "date": "1/05/1998", "ratio": 18.31578947 }, { "gold": 444.9232064, "oil": 21.29264619, "date": "1/06/1998", "ratio": 19.89562764 }, { "gold": 432.6732292, "oil": 21.28539583, "date": "1/07/1998", "ratio": 19.32723434 }, { "gold": 409.0291554, "oil": 19.95775031, "date": "1/08/1998", "ratio": 19.49475262 }, { "gold": 439.3551743, "oil": 24.13201468, "date": "1/09/1998", "ratio": 17.2063197 }, { "gold": 435.9710677, "oil": 21.50770714, "date": "1/10/1998", "ratio": 19.2704577 }, { "gold": 439.015003, "oil": 16.71444973, "date": "1/11/1998", "ratio": 25.26559715 }, { "gold": 427.9536983, "oil": 17.91814477, "date": "1/12/1998", "ratio": 22.88381743 }, { "gold": 423.6119247, "oil": 18.92449909, "date": "1/01/1999", "ratio": 21.38431373 }, { "gold": 426.0609775, "oil": 18.21204736, "date": "1/02/1999", "ratio": 22.39445803 }, { "gold": 414.5288046, "oil": 24.86134466, "date": "1/03/1999", "ratio": 15.67362768 }, { "gold": 422.3160699, "oil": 27.49622423, "date": "1/04/1999", "ratio": 14.35905681 }, { "gold": 395.5539518, "oil": 24.79943614, "date": "1/05/1999", "ratio": 14.95011876 }, { "gold": 384.3618072, "oil": 28.40743012, "date": "1/06/1999", "ratio": 12.53032659 }, { "gold": 374.8288902, "oil": 30.10656149, "date": "1/07/1999", "ratio": 11.45007306 }, { "gold": 372.7612687, "oil": 32.34596409, "date": "1/08/1999", "ratio": 10.5241972 }, { "gold": 435.5991657, "oil": 35.70747676, "date": "1/09/1999", "ratio": 11.19910241 }, { "gold": 434.9671981, "oil": 31.6300119, "date": "1/10/1999", "ratio": 12.75172414 }, { "gold": 422.9419299, "oil": 35.69638599, "date": "1/11/1999", "ratio": 10.84831232 }, { "gold": 420.3466528, "oil": 37.07450237, "date": "1/12/1999", "ratio": 10.33789063 }, { "gold": 409.0698051, "oil": 39.910658, "date": "1/01/2000", "ratio": 9.249638205 }, { "gold": 422.2687, "oil": 43.75834, "date": "1/02/2000", "ratio": 8.650016431 }, { "gold": 395.6392105, "oil": 38.4559883, "date": "1/03/2000", "ratio": 9.288104089 }, { "gold": 393.4389877, "oil": 36.81919485, "date": "1/04/2000", "ratio": 9.685703186 }, { "gold": 388.7513727, "oil": 41.42397547, "date": "1/05/2000", "ratio": 8.384694933 }, { "gold": 409.0659059, "oil": 46.13792102, "date": "1/06/2000", "ratio": 7.866153846 }, { "gold": 391.7446728, "oil": 38.82766532, "date": "1/07/2000", "ratio": 9.089318265 }, { "gold": 392.0985524, "oil": 46.8819641, "date": "1/08/2000", "ratio": 7.36352657 }, { "gold": 385.3483813, "oil": 43.42826267, "date": "1/09/2000", "ratio": 7.873216602 }, { "gold": 371.8209891, "oil": 45.9680391, "date": "1/10/2000", "ratio": 7.088685015 }, { "gold": 377.6359701, "oil": 47.4606039, "date": "1/11/2000", "ratio": 6.956830278 }, { "gold": 384.2614376, "oil": 37.52306987, "date": "1/12/2000", "ratio": 9.240671642 }, { "gold": 368.2213554, "oil": 39.89876765, "date": "1/01/2001", "ratio": 8.22889044 }, { "gold": 370.4402386, "oil": 38.0440875, "date": "1/02/2001", "ratio": 8.73713034 }, { "gold": 357.736184, "oil": 36.49547643, "date": "1/03/2001", "ratio": 8.802206162 }, { "gold": 364.7498413, "oil": 39.44065533, "date": "1/04/2001", "ratio": 8.248067463 }, { "gold": 368.8271292, "oil": 39.11635759, "date": "1/05/2001", "ratio": 8.428974269 }, { "gold": 372.2615419, "oil": 36.11184581, "date": "1/06/2001", "ratio": 9.308571429 }, { "gold": 366.4143968, "oil": 36.3107159, "date": "1/07/2001", "ratio": 9.091081594 }, { "gold": 376.1983089, "oil": 37.48202931, "date": "1/08/2001", "ratio": 9.036764706 }, { "gold": 402.3089613, "oil": 32.16001011, "date": "1/09/2001", "ratio": 11.50960307 }, { "gold": 383.68933, "oil": 29.15350676, "date": "1/10/2001", "ratio": 12.16100094 }, { "gold": 379.4294648, "oil": 26.77353465, "date": "1/11/2001", "ratio": 13.1718107 }, { "gold": 381.0213641, "oil": 27.33983315, "date": "1/12/2001", "ratio": 12.93649194 }, { "gold": 388.3571075, "oil": 26.79842881, "date": "1/01/2002", "ratio": 13.49178645 }, { "gold": 407.685118, "oil": 29.8570809, "date": "1/02/2002", "ratio": 12.65455382 }, { "gold": 412.7744762, "oil": 36.03217143, "date": "1/03/2002", "ratio": 10.45572026 }, { "gold": 420.203971, "oil": 37.20754824, "date": "1/04/2002", "ratio": 10.29351411 }, { "gold": 444.7946295, "oil": 34.46954095, "date": "1/05/2002", "ratio": 11.90399052 }, { "gold": 433.5217706, "oil": 36.56010913, "date": "1/06/2002", "ratio": 10.85778109 }, { "gold": 413.74855, "oil": 36.69616222, "date": "1/07/2002", "ratio": 10.2749815 }, { "gold": 423.6403767, "oil": 39.2490349, "date": "1/08/2002", "ratio": 9.793650794 }, { "gold": 437.6753429, "oil": 41.17149889, "date": "1/09/2002", "ratio": 9.630541872 }, { "gold": 427.5351766, "oil": 36.72296468, "date": "1/10/2002", "ratio": 10.64217487 }, { "gold": 429.724314, "oil": 36.21779284, "date": "1/11/2002", "ratio": 10.86500558 }, { "gold": 466.8675028, "oil": 41.95353135, "date": "1/12/2002", "ratio": 10.12820513 }, { "gold": 491.9991785, "oil": 44.86229244, "date": "1/01/2003", "ratio": 9.96687556 }, { "gold": 462.6232407, "oil": 48.73222222, "date": "1/02/2003", "ratio": 8.493169399 }, { "gold": 445.1857205, "oil": 41.261764, "date": "1/03/2003", "ratio": 9.789304124 }, { "gold": 449.3553766, "oil": 34.42722707, "date": "1/04/2003", "ratio": 12.05232558 }, { "gold": 483.0390596, "oil": 39.5092269, "date": "1/05/2003", "ratio": 11.22598106 }, { "gold": 461.9506281, "oil": 40.30719498, "date": "1/06/2003", "ratio": 10.46074859 }, { "gold": 472.0859281, "oil": 40.64130866, "date": "1/07/2003", "ratio": 10.61591356 }, { "gold": 497.6649106, "oil": 41.82982222, "date": "1/08/2003", "ratio": 10.89737092 }, { "gold": 512.428309, "oil": 38.56419233, "date": "1/09/2003", "ratio": 12.28767123 }, { "gold": 510.6688751, "oil": 38.48691509, "date": "1/10/2003", "ratio": 12.26863621 }, { "gold": 526.3818432, "oil": 40.18393838, "date": "1/11/2003", "ratio": 12.09930944 }, { "gold": 548.5524259, "oil": 42.85627601, "date": "1/12/2003", "ratio": 11.7998155 }, { "gold": 524.5458132, "oil": 43.36770263, "date": "1/01/2004", "ratio": 11.09531014 }, { "gold": 518.3154312, "oil": 47.34693948, "date": "1/02/2004", "ratio": 9.947179204 }, { "gold": 553.5954142, "oil": 46.72308712, "date": "1/03/2004", "ratio": 10.848434 }, { "gold": 506.7914088, "oil": 48.76155176, "date": "1/04/2004", "ratio": 9.393258427 }, { "gold": 510.8720404, "oil": 51.80161955, "date": "1/05/2004", "ratio": 8.862086259 }, { "gold": 512.2142298, "oil": 47.94728957, "date": "1/06/2004", "ratio": 9.682860999 }, { "gold": 505.9843681, "oil": 56.62267583, "date": "1/07/2004", "ratio": 7.936073059 }, { "gold": 526.1962738, "oil": 54.42206765, "date": "1/08/2004", "ratio": 8.668803419 }, { "gold": 535.3519442, "oil": 63.93569231, "date": "1/09/2004", "ratio": 7.373287671 }, { "gold": 545.2303616, "oil": 66.3168218, "date": "1/10/2004", "ratio": 7.221599691 }, { "gold": 578.185519, "oil": 62.65164215, "date": "1/11/2004", "ratio": 8.228577244 }, { "gold": 555.4865728, "oil": 55.40838289, "date": "1/12/2004", "ratio": 9.025316456 }, { "gold": 538.6796033, "oil": 61.49776618, "date": "1/01/2005", "ratio": 7.7593361 }, { "gold": 553.3385135, "oil": 65.75262474, "date": "1/02/2005", "ratio": 7.415458937 }, { "gold": 541.2048162, "oil": 70.13508027, "date": "1/03/2005", "ratio": 6.716606498 }, { "gold": 549.8772432, "oil": 62.74936087, "date": "1/04/2005", "ratio": 7.76307321 }, { "gold": 523.3287552, "oil": 65.6228626, "date": "1/05/2005", "ratio": 6.97479315 }, { "gold": 551.6441198, "oil": 71.30609189, "date": "1/06/2005", "ratio": 6.736283186 }, { "gold": 538.0879425, "oil": 75.97199692, "date": "1/07/2005", "ratio": 6.082714215 }, { "gold": 540.0932942, "oil": 85.94121571, "date": "1/08/2005", "ratio": 5.284450247 }, { "gold": 581.9451459, "oil": 81.45387525, "date": "1/09/2005", "ratio": 6.144474638 }, { "gold": 578.0601105, "oil": 73.37483476, "date": "1/10/2005", "ratio": 6.878179384 }, { "gold": 611.6436093, "oil": 70.734211, "date": "1/11/2005", "ratio": 7.647069086 }, { "gold": 633.0539122, "oil": 75.32477739, "date": "1/12/2005", "ratio": 7.404325033 }, { "gold": 697.6248118, "oil": 83.31020171, "date": "1/01/2006", "ratio": 7.373822144 }, { "gold": 681.6437312, "oil": 75.28730491, "date": "1/02/2006", "ratio": 8.053900016 }, { "gold": 712.4472709, "oil": 81.56419529, "date": "1/03/2006", "ratio": 7.734804142 }, { "gold": 784.4157449, "oil": 87.55249028, "date": "1/04/2006", "ratio": 7.959376739 }, { "gold": 793.0073522, "oil": 86.57502931, "date": "1/05/2006", "ratio": 8.159769954 }, { "gold": 743.1923191, "oil": 89.5586115, "date": "1/06/2006", "ratio": 7.298390369 }, { "gold": 762.0549532, "oil": 89.63934943, "date": "1/07/2006", "ratio": 7.501344086 }, { "gold": 747.8940628, "oil": 84.27752502, "date": "1/08/2006", "ratio": 7.874181611 }, { "gold": 722.3503698, "oil": 75.83322781, "date": "1/09/2006", "ratio": 8.525512637 }, { "gold": 731.018945, "oil": 71.11013274, "date": "1/10/2006", "ratio": 9.280095352 }, { "gold": 782.6350594, "oil": 76.39980099, "date": "1/11/2006", "ratio": 9.243941074 }, { "gold": 760.702708, "oil": 73.48243722, "date": "1/12/2006", "ratio": 9.352170352 }, { "gold": 781.661571, "oil": 69.86288046, "date": "1/01/2007", "ratio": 10.18851049 }, { "gold": 795.0366352, "oil": 73.96162856, "date": "1/02/2007", "ratio": 9.749312186 }, { "gold": 788.0140533, "oil": 78.43821034, "date": "1/03/2007", "ratio": 9.046303325 }, { "gold": 803.7854298, "oil": 78.01586498, "date": "1/04/2007", "ratio": 9.302845838 }, { "gold": 779.2783227, "oil": 75.68139195, "date": "1/05/2007", "ratio": 9.296828621 }, { "gold": 767.3658737, "oil": 83.37804758, "date": "1/06/2007", "ratio": 8.203452179 }, { "gold": 783.6615125, "oil": 92.09641908, "date": "1/07/2007", "ratio": 7.509142053 }, { "gold": 791.0488756, "oil": 87.15663505, "date": "1/08/2007", "ratio": 8.076175041 }, { "gold": 870.9363702, "oil": 95.72094749, "date": "1/09/2007", "ratio": 8.098701935 }, { "gold": 922.6118361, "oil": 110.4680138, "date": "1/10/2007", "ratio": 7.351845975 }, { "gold": 908.477968, "oil": 102.8603453, "date": "1/11/2007", "ratio": 7.832149701 }, { "gold": 963.9666493, "oil": 110.9636831, "date": "1/12/2007", "ratio": 7.687226506 }, { "gold": 1063.758755, "oil": 105.7133666, "date": "1/01/2008", "ratio": 9.0626703 }, { "gold": 1116.615215, "oil": 117.0520777, "date": "1/02/2008", "ratio": 8.539473684 }, { "gold": 1069.11881, "oil": 116.3375348, "date": "1/03/2008", "ratio": 8.189801142 }, { "gold": 995.2540899, "oil": 129.6458428, "date": "1/04/2008", "ratio": 6.676714261 }, { "gold": 1006.135612, "oil": 144.6586172, "date": "1/05/2008", "ratio": 5.955241461 }, { "gold": 1045.80676, "oil": 157.3825071, "date": "1/06/2008", "ratio": 5.645 }, { "gold": 1024.629166, "oil": 138.4923605, "date": "1/07/2008", "ratio": 6.398452611 }, { "gold": 931.1590836, "oil": 129.0655796, "date": "1/08/2008", "ratio": 6.214619782 }, { "gold": 987.8694719, "oil": 112.4015643, "date": "1/09/2008", "ratio": 7.788751987 }, { "gold": 823.2218664, "oil": 76.39093364, "date": "1/10/2008", "ratio": 9.776434154 }, { "gold": 934.1434201, "oil": 62.42532395, "date": "1/11/2008", "ratio": 13.96417417 }, { "gold": 1005.766722, "oil": 51.57481552, "date": "1/12/2008", "ratio": 18.50112108 }, { "gold": 1060.637805, "oil": 48.07763318, "date": "1/01/2009", "ratio": 21.0609405 }, { "gold": 1094.099572, "oil": 51.44106812, "date": "1/02/2009", "ratio": 20.26899017 }, { "gold": 1054.3416, "oil": 57.128864, "date": "1/03/2009", "ratio": 17.45549738 }, { "gold": 1015.087655, "oil": 58.75038879, "date": "1/04/2009", "ratio": 16.2779734 }, { "gold": 1119.475777, "oil": 76.09681063, "date": "1/05/2009", "ratio": 13.71120495 }, { "gold": 1063.587085, "oil": 79.54424973, "date": "1/06/2009", "ratio": 12.37101159 }, { "gold": 1069.007312, "oil": 79.06555675, "date": "1/07/2009", "ratio": 12.52051836 }, { "gold": 1084.156556, "oil": 79.38000278, "date": "1/08/2009", "ratio": 12.65780446 }, { "gold": 1127.680186, "oil": 79.96535069, "date": "1/09/2009", "ratio": 13.10211018 }, { "gold": 1174.257078, "oil": 86.94018752, "date": "1/10/2009", "ratio": 12.50649351 }, { "gold": 1323.187718, "oil": 86.96712609, "date": "1/11/2009", "ratio": 14.21480331 }, { "gold": 1223.143547, "oil": 89.25854888, "date": "1/12/2009", "ratio": 12.70337702 }, { "gold": 1212.240149, "oil": 81.92877558, "date": "1/01/2010", "ratio": 13.79626835 }, { "gold": 1246.883261, "oil": 89.62483247, "date": "1/02/2010", "ratio": 12.91225207 }, { "gold": 1254.635979, "oil": 94.20735956, "date": "1/03/2010", "ratio": 12.3178128 }, { "gold": 1326.032452, "oil": 96.87317847, "date": "1/04/2010", "ratio": 12.6883343 }, { "gold": 1358.486125, "oil": 83.21922868, "date": "1/05/2010", "ratio": 15.32418548 }, { "gold": 1400.130018, "oil": 85.12205249, "date": "1/06/2010", "ratio": 15.44849927 }, { "gold": 1313.238086, "oil": 88.69131474, "date": "1/07/2010", "ratio": 13.80683977 }, { "gold": 1397.747614, "oil": 80.67897944, "date": "1/08/2010", "ratio": 16.32480534 }, { "gold": 1463.758567, "oil": 89.56141745, "date": "1/09/2010", "ratio": 15.34362886 }, { "gold": 1503.098649, "oil": 90.88010318, "date": "1/10/2010", "ratio": 15.53935896 }, { "gold": 1540.1904, "oil": 93.63600619, "date": "1/11/2010", "ratio": 15.44869813 }, { "gold": 1558.436658, "oil": 101.3233311, "date": "1/12/2010", "ratio": 14.38082731 }, { "gold": 1466.605271, "oil": 101.8887264, "date": "1/01/2011", "ratio": 13.39418592 }, { "gold": 1554.452726, "oil": 106.8286895, "date": "1/02/2011", "ratio": 13.55089203 }, { "gold": 1577.125936, "oil": 116.9637803, "date": "1/03/2011", "ratio": 12.48388306 }, { "gold": 1675.078451, "oil": 124.2863483, "date": "1/04/2011", "ratio": 12.47757395 }, { "gold": 1670.801076, "oil": 111.6767137, "date": "1/05/2011", "ratio": 13.96105161 }, { "gold": 1637.091455, "oil": 103.7603897, "date": "1/06/2011", "ratio": 14.77761476 }, { "gold": 1766.207232, "oil": 103.7924667, "date": "1/07/2011", "ratio": 16.01671891 }, { "gold": 1960.674937, "oil": 96.01739242, "date": "1/08/2011", "ratio": 19.41999775 }, { "gold": 1747.684025, "oil": 85.4423301, "date": "1/09/2011", "ratio": 19.45454545 }, { "gold": 1856.494465, "oil": 100.4684781, "date": "1/10/2011", "ratio": 17.47837751 }, { "gold": 1878.888762, "oil": 107.9984399, "date": "1/11/2011", "ratio": 16.39736947 }, { "gold": 1647.162486, "oil": 106.3285882, "date": "1/12/2011", "ratio": 14.4912476 }, { "gold": 1871.217697, "oil": 105.6637149, "date": "1/01/2012", "ratio": 16.70917953 }, { "gold": 1895.03876, "oil": 114.6337853, "date": "1/02/2012", "ratio": 15.53124124 }, { "gold": 1776.210611, "oil": 110.0662961, "date": "1/03/2012", "ratio": 15.13764318 }, { "gold": 1761.319421, "oil": 111.8570627, "date": "1/04/2012", "ratio": 14.74616191 }, { "gold": 1665.290892, "oil": 92.48884526, "date": "1/05/2012", "ratio": 17.00531608 }, { "gold": 1710.000481, "oil": 90.8862314, "date": "1/06/2012", "ratio": 17.81473635 }, { "gold": 1734.608338, "oil": 94.17361914, "date": "1/07/2012", "ratio": 17.4192596 }, { "gold": 1752.75013, "oil": 102.5707037, "date": "1/08/2012", "ratio": 16.08821395 }, { "gold": 1879.321963, "oil": 97.55331746, "date": "1/09/2012", "ratio": 18.26456232 }, { "gold": 1814.137196, "oil": 91.01290969, "date": "1/10/2012", "ratio": 18.93274583 }, { "gold": 1824.596584, "oil": 93.98892368, "date": "1/11/2012", "ratio": 18.41288944 }, { "gold": 1752.410907, "oil": 97.07774933, "date": "1/12/2012", "ratio": 17.05162274 }, { "gold": 1757.165096, "oil": 102.8988619, "date": "1/01/2013", "ratio": 16.07662324 }, { "gold": 1666.701189, "oil": 96.5815829, "date": "1/02/2013", "ratio": 16.25692558 }, { "gold": 1681.964778, "oil": 102.3196117, "date": "1/03/2013", "ratio": 15.43834208 }, { "gold": 1549.230975, "oil": 98.56441588, "date": "1/04/2013", "ratio": 14.71795421 }, { "gold": 1469.90113, "oil": 96.94285185, "date": "1/05/2013", "ratio": 14.16255301 }, { "gold": 1254.018677, "oil": 101.5839291, "date": "1/06/2013", "ratio": 11.34465617 }, { "gold": 1379.8045, "oil": 110.2479016, "date": "1/07/2013", "ratio": 11.51547177 }, { "gold": 1461.395543, "oil": 112.7898123, "date": "1/08/2013", "ratio": 11.95680446 }, { "gold": 1387.990369, "oil": 107.0735428, "date": "1/09/2013", "ratio": 11.96296296 }, { "gold": 1384.841006, "oil": 100.8088944, "date": "1/10/2013", "ratio": 12.73728989 }, { "gold": 1308.339228, "oil": 96.81501452, "date": "1/11/2013", "ratio": 12.513805 }, { "gold": 1254.482234, "oil": 102.504061, "date": "1/12/2013", "ratio": 11.23836619 }, { "gold": 1299.20328, "oil": 101.246465, "date": "1/01/2014", "ratio": 11.83208534 }, { "gold": 1375.975686, "oil": 106.4163933, "date": "1/02/2014", "ratio": 11.93011015 }, { "gold": 1338.221154, "oil": 105.2303026, "date": "1/03/2014", "ratio": 11.71707029 }, { "gold": 1332.036664, "oil": 103.1100791, "date": "1/04/2014", "ratio": 11.91858833 }, { "gold": 1290.787611, "oil": 106.0190288, "date": "1/05/2014", "ratio": 11.17505598 }, { "gold": 1356.22031, "oil": 108.6729536, "date": "1/06/2014", "ratio": 11.47983297 }, { "gold": 1323.411836, "oil": 101.080946, "date": "1/07/2014", "ratio": 12.09259448 }, { "gold": 1324.819472, "oil": 98.87204586, "date": "1/08/2014", "ratio": 12.39933306 }, { "gold": 1252.202577, "oil": 93.83541875, "date": "1/09/2014", "ratio": 12.34466871 }, { "gold": 1198.36966, "oil": 82.89675551, "date": "1/10/2014", "ratio": 13.45617085 }, { "gold": 1219.413327, "oil": 68.19765941, "date": "1/11/2014", "ratio": 16.88057445 }, { "gold": 1247.698845, "oil": 55.11187185, "date": "1/12/2014", "ratio": 21.63938427 }, { "gold": 1311.536069, "oil": 50.20114257, "date": "1/01/2015", "ratio": 25.12562189 }, { "gold": 1260.242218, "oil": 51.65539768, "date": "1/02/2015", "ratio": 23.39710611 }, { "gold": 1229.603034, "oil": 49.30842832, "date": "1/03/2015", "ratio": 23.93697479 }, { "gold": 1221.575521, "oil": 61.71528281, "date": "1/04/2015", "ratio": 18.79372799 }, { "gold": 1229.472093, "oil": 62.22693233, "date": "1/05/2015", "ratio": 18.75787728 }, { "gold": 1205.722601, "oil": 61.23340999, "date": "1/06/2015", "ratio": 18.6906003 }, { "gold": 1128.782848, "oil": 48.42338658, "date": "1/07/2015", "ratio": 22.3106961 }, { "gold": 1166.738573, "oil": 50.57580421, "date": "1/08/2015", "ratio": 22.06910569 }, { "gold": 1146.790921, "oil": 46.41723755, "date": "1/09/2015", "ratio": 23.70614327 }, { "gold": 1174.392872, "oil": 47.89684764, "date": "1/10/2015", "ratio": 23.51921013 }, { "gold": 1090.036003, "oil": 42.75355448, "date": "1/11/2015", "ratio": 24.49579832 }, { "gold": 1089.458062, "oil": 38.06936473, "date": "1/12/2015", "ratio": 27.61771058 }, { "gold": 1141.449868, "oil": 34.51658981, "date": "1/01/2016", "ratio": 32.06960143 }, { "gold": 1269.432126, "oil": 34.69376813, "date": "1/02/2016", "ratio": 35.58962963 }, { "gold": 1270.148774, "oil": 39.3674244, "date": "1/03/2016", "ratio": 31.26395409 }, { "gold": 1315.516299, "oil": 46.9867448, "date": "1/04/2016", "ratio": 26.99760453 }, { "gold": 1237.925994, "oil": 50.14616477, "date": "1/05/2016", "ratio": 23.68635438 }, { "gold": 1346.191398, "oil": 49.26097315, "date": "1/06/2016", "ratio": 26.32774674 }, { "gold": 1367.508629, "oil": 42.39072947, "date": "1/07/2016", "ratio": 31.25961538 }, { "gold": 1331.416677, "oil": 45.45680769, "date": "1/08/2016", "ratio": 28.28970917 }, { "gold": 1341.431268, "oil": 48.93054396, "date": "1/09/2016", "ratio": 26.41500829 }, { "gold": 1286.578344, "oil": 47.3970607, "date": "1/10/2016", "ratio": 26.1446863 }, { "gold": 1189.093006, "oil": 49.90133113, "date": "1/11/2016", "ratio": 22.8288835 }, { "gold": 1153.639379, "oil": 54.08282349, "date": "1/12/2016", "ratio": 20.33097543 }, { "gold": 1214.29017, "oil": 52.87488778, "date": "1/01/2017", "ratio": 21.96534747 }, { "gold": 1255.6, "oil": 54.01, "date": "1/02/2017", "ratio": 22.24754675 } ]; const parseDate = d3.timeParse("%d/%m/%Y"); const formatDate = d3.timeFormat("%b %Y"); const formatYear = d3.timeFormat("%Y"); const phases2 = [ {"date":"1/03/1983", "headline": "NA", "blurb":"NA"}, {"date":"1/12/1985", "headline": "Falling gold prices", "blurb":"Between 1983 and 1985, the prices of gold and oil dropped, but with gold falling at a greater rate. This led lower than average gold/oil ratios."}, {"date":"1/07/1990", "headline": "Oil glut", "blurb":"An over supply of oil in the 1980's, with its associated low prices, meant for relatively high gold/oil ratio."}, {"date":"1/04/1999", "headline": "Recession", "blurb":"The weakened global demand during mid of 1990s saw oil and gold drop to 35 year lows. The gold/oil ratio was relatively stable during this period."}, {"date":"1/06/2008", "headline": "Afghanistan and Iraq wars", "blurb":"In the 2000s the Afghanistan and Iraq wars pushed up oil to record highs, leading to a low gold/oil ratio."}, {"date":"1/2/2017", "headline": "Global financial crisis", "blurb":"Since July 2008, the price of gold has risen to its peak price for the period, while the price of oil has dropped. "} ]; const width = 500; const height = 120; const margin = {"top": 15, "left": 40, "right": 100, "bottom": 50}; const avgRatio = 16.4; const commodity = ["ratio","gold","oil"]; const colour = d3.scaleOrdinal() .range(["#008000","#B8860B","#808080"]) .domain(commodity); phases2.forEach(function(d,i){ d.date = parseDate(d.date); }); data.forEach(function(d){ //parse the date strings into actual dates d.date = parseDate(d.date); //group by split dates var s = 0; for (s; s < phases2.length; s++) { if (d.date <= phases2[s].date ) { if (s == 0 || d.date > phases2[s-1].date ) { d.group = s; }; }; }; }); var nest = d3.nest() .key(function(d){ return d.group; }) .entries(data); const extent = { "gold": d3.extent(data, function(d){ return d.gold; }), "oil": d3.extent(data, function(d){ return d.oil; }), "ratio": d3.extent(data, function(d){ return d.ratio; }) }; const maxGold = extent.gold[1]; const maxOil = extent.oil[1]; const maxRatio = extent.ratio[1]; const xScale = d3.scaleTime() .range([0,width]) .domain(d3.extent(data, function(d){ return d.date })); const yScale = { "gold": d3.scaleLinear().range([height,0]).domain([0,maxGold]), "oil": d3.scaleLinear().range([height,0]).domain([0,maxOil]), "ratio": d3.scaleLinear().range([height,0]).domain([0,maxRatio]) }; const line = { "gold": d3.line().x(function(d) { return xScale(d.date); }).y(function(d) { return yScale.gold(d.gold); }), "oil": d3.line().x(function(d) { return xScale(d.date); }).y(function(d) { return yScale.oil(d.oil); }), "ratio": d3.line().x(function(d) { return xScale(d.date); }).y(function(d) { return yScale.ratio(d.ratio); }) }; const area = { "gold": d3.area().x(function(d) { return xScale(d.date); }).y1(function(d) { return yScale.gold(d.gold); }).y0(yScale.gold(0)), "oil": d3.area().x(function(d) { return xScale(d.date); }).y1(function(d) { return yScale.oil(d.oil); }).y0(yScale.oil(0)), "ratio": d3.area().x(function(d) { return xScale(d.date); }).y1(function(d) { return yScale.ratio(d.ratio); }).y0(yScale.ratio(avgRatio)) }; var ratioChart = d3.select("#chart") .append("svg") .attr("width", "100%") .attr("viewBox", "0 0 "+ (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom) ) .attr("preserveAspectRatio", "xMidYMid meet") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); ratioChart.append("line") .attr("x1",0) .attr("y1",height) .attr("x2",width) .attr("y2",height) .attr("stroke-width", 1) .style("stroke", "lightgrey") .style("fill", "none"); ratioChart.append("path") .datum(data) .attr("fill", "none") .style("stroke", "none") .style("fill", colour("ratio")) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 3) .attr("d", area["ratio"]) .style("opacity", 0.3); ratioChart.append("path") .datum(data) .attr("fill", "none") .style("stroke", colour("ratio")) .style("fill", "none") .attr("d", line["ratio"]); var phaseG = ratioChart.selectAll(".phase") .data(phases2) .enter() .append("g") .attr("class", "phase") .attr("transform", "translate(0,0)"); phaseG.append("line") .attr("x1",function(d){ return xScale(d.date); }) .attr("y1",0) .attr("x2",function(d){ return xScale(d.date); }) .attr("y2",height) .style("stroke", "black"); phaseG.append("text") .attr("class", "phase-label") .text(function(d){ return formatYear(d.date); }) .attr("x",function(d){return xScale(d.date); }) .attr("y",height + 15); phaseG.append("text") .attr("class", "phase-label") .text(function(d,i){ return i !== 0 ? i : ""; }) .attr("x",function(d, i){ var prevX = i == 0 ? 0 : xScale(phases2[i-1].date); var x = prevX + (xScale(d.date) - prevX)/2 return x; }) .attr("y",height - 5); d3.select("#chart").append("p") .text("The following charts break down this period between 1983 and today, with the gold and oil prices adjusted to today's price.") nest.forEach(function(d,i){ if (i !== 0) { var thisData = d.values; var thisDataLength = thisData.length; xScale.domain(d3.extent(thisData, function(d) { return d.date; })); var div = d3.select("#chart"); var startDate = formatDate(xScale.domain()[0]) var endDate = formatDate(xScale.domain()[1]) var heading = (i) + ". " + phases2[i].headline + " (" + startDate + " to " + endDate + ")"; div.append("h2").text(heading); div.append("p").text(phases2[i].blurb); commodity.forEach(function(c){ div.append("h3") .text(capitalise(c) + ":"); var chart = div.append("svg") .attr("width", "100%") .attr("viewBox", "0 0 "+ (width + margin.left + margin.right) + " " + (height + margin.top + margin.bottom) ) .attr("preserveAspectRatio", "xMidYMid meet") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //ADD AREA AND LINES chart.append("path") .datum(d.values) .attr("fill", function(){ return colour(c); }) .style("stroke", "none") .style("opacity", 0.3) .attr("d", area[c]); chart.append("path") .datum(d.values) .attr("fill", "none") .style("stroke", function(){ return colour(c); }) .attr("d", line[c]); //ADD MIN AND MAX LINES PER CHART if (c == "ratio") { if (i == 1) { chart.append("text") .text("AVG ($" + roundNumber(avgRatio) + ")" ) .attr("x", width/2) .attr("y", yScale[c](avgRatio)- 4) .style("text-anchor", "middle") .attr("fill", function(){ return colour(c); }); } chart.append("line") .attr("class", "minmax") .attr("x1",0) .attr("y1",yScale[c](avgRatio)) .attr("x2",width) .attr("y2",yScale[c](avgRatio)) .style("stroke", function(){ return colour(c); }) .style("fill", "none"); }; var firstValue = roundNumber(thisData[0][c]); var lastValue = roundNumber(thisData[thisDataLength-1][c]); chart.append("text") .text("$"+firstValue) .attr("x", -2) .attr("y", yScale[c](firstValue) + 4) .style("text-anchor", "end") .attr("fill", function(){ return colour(c);}); chart.append("text") .text("$"+lastValue) .attr("x", width + 2) .attr("y", yScale[c](lastValue) + 4) .style("text-anchor", "start") .attr("fill", function(){ return colour(c);}); chart.append("text") .text("MAX ($" + roundNumber(extent[c][1]) + ")") .attr("x", width/2) .attr("y", -3) .style("text-anchor", "middle") .attr("fill", function(){ return colour(c); }); chart.append("text") .text("MIN ($" + roundNumber(extent[c][0]) + ")") .attr("x", width/2) .attr("y", yScale[c](extent[c][0]) + 11) .style("text-anchor", "middle") .attr("fill", function(){ return colour(c); }); chart.append("line") .attr("class", "minmax") .attr("x1",0) .attr("y1",yScale[c](extent[c][0])) .attr("x2",width) .attr("y2",yScale[c](extent[c][0])) .style("stroke", function(){ return colour(c); }); chart.append("line") .attr("class", "minmax") .attr("x1",0) .attr("y1",yScale[c](extent[c][1])) .attr("x2",width) .attr("y2",yScale[c](extent[c][1])) .style("stroke", function(){ return colour(c); }); //ADD AXIS chart.append("text") .text(startDate) .attr("x", 0) .attr("y", height + 20) .attr("fill", "grey"); chart.append("text") .text(endDate) .attr("x", width) .attr("y", height + 20) .style("text-anchor", "end") .attr("fill", "grey"); chart.append("line") .attr("x1",0) .attr("y1",height) .attr("x2",width) .attr("y2",height) .attr("stroke-width", 1) .style("stroke", "lightgrey") .style("fill", "none"); }) }; }); function roundNumber(n) { //var roundedNumber = Math.round(n * 100); //return roundedNumber/100; return Math.round(n); }; //https://paulund.co.uk/capitalize-first-letter-string-javascript function capitalise(string) { return string.charAt(0).toUpperCase() + string.slice(1); } </script> </body>
https://d3js.org/d3.v4.min.js