D3 Examples - charts with toggle

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