charts with toggle

forked from azywong's block: charts (refactored)

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
  .tooltip {
    background-color: white;
    border: 1px solid lightgray;
  }
  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
  .hover-line {
    stroke: gray;
    stroke-width: 1px;
    stroke-dasharray: 3,3;
  }
  .overlay {
    fill: none;
    pointer-events: all;
  }

.axis text {
    fill: gray;
  }

.axis path {
    stroke: gray;
  }

.tick line {
    stroke: gray
  }

.tick text {
    fill: gray
  }
  .chart-set {
    display: inline-block;
  }
  .chart {
    width: 40%;
  }
</style>
<div class="chart-set">
	<select name="backtest-select-1" id="backtest-select-1">
    <option value="Backtest1">Backtest1</option>
    <option value="Backtest2">Backtest2</option>
    <option value="Backtest3">Backtest3</option>
    <option value="Backtest4">Backtest4</option>
    <option value="Backtest5">Backtest5</option>
    <option value="Backtest6">Backtest6</option>
	</select>
  <div id="chart1" class="chart"></div>
</div>
<div class="chart-set">
	<div id="chart2" class="chart"></div>
</div>
<div class="chart-set">
	<div id="chart3" class="chart"></div>
</div>
<div class="chart-set">
    <div id="chart4" class="chart"></div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="linechart.js"></script>
<script src="splitlinechart.js"></script>
<script>

let sensitivityData = [
    {
      id: "actual",
      values : [
        {
          date: "2018-07",
          value: 140000
        },
        {
          date: "2019-01",
          value: 145000
        },
        {
          date: "2019-04",
          value: 153000
        },
        {
          date: "2019-07",
          value: 158000
        }
      ]
    },
    {
      id: "forecast1",
      values: [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 177000
        },
        {
          date: "2020-01",
          value: 170000
        },
        {
          date: "2020-04",
          value: 165000
        },
        {
          date: "2020-07",
          value: 158000
        },
        {
          date: "2020-10",
          value: 150000
        },
        {
          date: "2021-01",
          value: 156000
        },
        {
          date: "2021-04",
          value: 158000
        },
        {
          date: "2021-07",
          value: 165000
        }
      ]
    },
    {
      id: "forecast2",
      values: [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 145000
        },
        {
          date: "2020-01",
          value: 144000
        },
        {
          date: "2020-04",
          value: 147000
        },
        {
          date: "2020-07",
          value: 150000
        },
        {
          date: "2020-10",
          value: 142000
        },
        {
          date: "2021-01",
          value: 144000
        },
        {
          date: "2021-04",
          value: 146000
        },
        {
          date: "2021-07",
          value: 145000
        }
      ]
    },
    {
      id: "forecast3",
      values : [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 162000
        },
        {
          date: "2020-01",
          value: 161000
        },
        {
          date: "2020-04",
          value: 165000
        },
        {
          date: "2020-07",
          value: 163000
        },
        {
          date: "2020-10",
          value: 160000
        },
        {
          date: "2021-01",
          value: 159000
        },
        {
          date: "2021-04",
          value: 166000
        },
        {
          date: "2021-07",
          value: 165000
        }
      ]
    }
  ]

let stresstestData =[
    {
      id: "actual",
      values: [
        {
          date: "2018-07",
          value: 140000
        },
        {
          date: "2019-01",
          value: 145000
        },
        {
          date: "2019-04",
          value: 153000
        },
        {
          date: "2019-07",
          value: 158000
        }
      ]
    },
    {
      id: "base",
      values: [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 177000
        },
        {
          date: "2020-01",
          value: 170000
        },
        {
          date: "2020-04",
          value: 165000
        },
        {
          date: "2020-07",
          value: 158000
        },
        {
          date: "2020-10",
          value: 150000
        },
        {
          date: "2021-01",
          value: 156000
        },
        {
          date: "2021-04",
          value: 158000
        },
        {
          date: "2021-07",
          value: 165000
        }
      ]
    },
    {
      id: "adverse",
      values: [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 145000
        },
        {
          date: "2020-01",
          value: 144000
        },
        {
          date: "2020-04",
          value: 147000
        },
        {
          date: "2020-07",
          value: 150000
        },
        {
          date: "2020-10",
          value: 142000
        },
        {
          date: "2021-01",
          value: 144000
        },
        {
          date: "2021-04",
          value: 146000
        },
        {
          date: "2021-07",
          value: 145000
        }
      ]
    },
    {
    	id: "severe",
      values : [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 162000
        },
        {
          date: "2020-01",
          value: 161000
        },
        {
          date: "2020-04",
          value: 165000
        },
        {
          date: "2020-07",
          value: 163000
        },
        {
          date: "2020-10",
          value: 160000
        },
        {
          date: "2021-01",
          value: 159000
        },
        {
          date: "2021-04",
          value: 166000
        },
        {
          date: "2021-07",
          value: 165000
        }
      ]
    },
    {
      id: "base_projected",
      values: [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 170000
        },
        {
          date: "2020-01",
          value: 175000
        },
        {
          date: "2020-04",
          value: 173000
        },
        {
          date: "2020-07",
          value: 176000
        },
        {
          date: "2020-10",
          value: 177000
        },
        {
          date: "2021-01",
          value: 178000
        },
        {
          date: "2021-04",
          value: 176000
        },
        {
          date: "2021-07",
          value: 177000
        }
      ]
    },
    {
      id: "adverse_projected",
      values: [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 143000
        },
        {
          date: "2020-01",
          value: 142000
        },
        {
          date: "2020-04",
          value: 144000
        },
        {
          date: "2020-07",
          value: 147000
        },
        {
          date: "2020-10",
          value: 142000
        },
        {
          date: "2021-01",
          value: 143000
        },
        {
          date: "2021-04",
          value: 145000
        },
        {
          date: "2021-07",
          value: 142000
        }
      ]
    },
    {
      id: "severe_projected",
      values : [
        {
          date: "2019-07",
          value: 158000
        },
        {
          date: "2019-10",
          value: 160000
        },
        {
          date: "2020-01",
          value: 160000
        },
        {
          date: "2020-04",
          value: 160000
        },
        {
          date: "2020-07",
          value: 161000
        },
        {
          date: "2020-10",
          value: 162000
        },
        {
          date: "2021-01",
          value: 160000
        },
        {
          date: "2021-04",
          value: 162000
        },
        {
          date: "2021-07",
          value: 165000
        }
      ]
    }
  ]

let actual = [
    {
      date: "2006-04",
      value: 27000
    },
    {
      date: "2006-07",
      value: 27000
    },
    {
      date: "2006-10",
      value: 42000
    },
    {
      date: "2007-01",
      value: 32000
    },
    {
      date: "2007-04",
      value: 33000
    },
    {
      date: "2007-07",
      value: 41000
    },
    {
      date: "2007-10",
      value: 42000
    },
    {
      date: "2008-01",
      value: 71000
    },
    {
      date: "2008-04",
      value: 74000
    },
    {
      date: "2008-07",
      value: 76000
    }
  ];

let predicted = [
    {
      date: "2006-04",
      value: 27000
    },
    {
      date: "2006-07",
      value: 28000
    },
    {
      date: "2006-10",
      value: 44000
    },
    {
      date: "2007-01",
      value: 33000
    },
    {
      date: "2007-04",
      value: 34000
    },
    {
      date: "2007-07",
      value: 41000
    },
    {
      date: "2007-10",
      value: 38000
    },
    {
      date: "2008-01",
      value: 65000
    },
    {
      date: "2008-04",
      value: 63000
    },
    {
      date: "2008-07",
      value: 63000
    }
  ];

let modelpval = [
    {
      date: "2015-09",
      value: 0.8
    },
    {
      date: "2015-12",
      value: 0.75
    },
    {
      date: "2016-03",
      value: 0.62
    },
    {
      date: "2016-06",
      value: 0.53
    },
    {
      date: "2016-09",
      value: 0.5
    },
    {
      date: "2016-12",
      value: 0.65
    },
    {
      date: "2017-03",
      value: 0.5
    },
    {
      date: "2017-06",
      value: 0.4
    },
    {
      date: "2017-09",
      value: 0.37
    },
    {
      date: "2017-12",
      value: 0.45
    }
  ]

let data = [
    {
      id: "actual",
      values: actual
    },
    {
      id: "predicted",
      values: predicted
    }
  ]

let singleData = [
    {
      id: "calculated",
      values: modelpval
    }
  ]

let chartData1 = linechart()
  	.width(400)
  	.height(250)
  	.unit("$")

let chartData2 = linechart()
  	.width(400)
  	.height(250)
 		.labels(false)

let chartData3 = splitlinechart()
  	.width(400)
  	.height(250)
    .labels(false)
    .type("sensitivity")

let chartData4 = splitlinechart()
  	.width(400)
  	.height(250)
    .labels(false)
    .type("stress")

let parseTime = d3.timeParse("%Y-%m");

data.forEach(function(d) {
    d.values.forEach(function (value) {
      value.date = parseTime(value.date)
    })
  })

singleData.forEach(function(d) {
    d.values.forEach(function (value) {
      value.date = parseTime(value.date)
    })
  })

sensitivityData.forEach(function(d) {
    d.values.forEach(function (value) {
      value.date = parseTime(value.date)
    })
  })
  stresstestData.forEach(function(d) {
    d.values.forEach(function (value) {
      value.date = parseTime(value.date)
    })
  })

d3.select("#chart1")
    .datum(data)
    .call(chartData1);

d3.select("#chart2")
    .datum(singleData)
    .call(chartData2);

d3.select("#chart3")
    .datum(sensitivityData)
 	 	.call(chartData3)

d3.select("#chart4")
    .datum(stresstestData)
 	 	.call(chartData4)
  
  $("#backtest-select-1").change(function(e) {
    $("#chart1").html("");
    var val = $(this).val();
   	d3.select("#chart1")
    .datum(singleData)
    .call(chartData1);
  })
</script>

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

https://d3js.org/d3.v5.min.js

https://d3js.org/d3.v4.min.js