Pasted

<!DOCTYPE html>
<meta charset="utf-8">
<meta
  name="viewport"
  content="width=device-width, initial-scale=1"
>
 
<!-- Bootstrap CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
  crossorigin="anonymous"
>
<style>
  /* set the CSS */
 
  @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
  body {
    font-family: 'Roboto Slab', serif;
    font-size: 12px;
  }
 
  path {
    stroke: steelblue;
    stroke-width: 1;
    fill: none;
  }
 
  .axis path,
  .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
 
</style>
 
<body>
 
  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
    crossorigin="anonymous"
  ></script>
 
  <!-- load the d3.js library -->
  <script src="https://d3js.org/d3.v6.min.js"></script>
 
  <script>
 
    // Set the dimensions of the canvas / graph
    var margin = {top: 30, right: 20, bottom: 30, left: 50},
      width = document.documentElement.clientWidth - margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;
 
    // Parse the date / time
    var parseDate = d3.timeParse("%b %Y");
    //var parseDate = d3.timeParse("%Y-%m-%d");
 
    // Set the ranges
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);
 
    // Define the line
    var priceline = d3.line()
      .x(function (d) {return x(d.date);})
      .y(function (d) {return y(d.price);});
 
    // Adds the svg canvas
    var svg = d3.select("body")
      .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 + ")");
 
    // Get the data
    d3.csv("stocks.csv").then(function (data) {
 
      // console.log(data);
 
      data.forEach(function (d) {
        d.date = parseDate(d.date);
        d.price = +d.price;
      });
 
      // Scale the range of the data
      x.domain(d3.extent(data, function (d) {return d.date;}));
      y.domain([0, d3.max(data, function (d) {return d.price;})]);
 
      // Group the entries by symbol
      dataNest = Array.from(
        d3.group(data, d => d.symbol), ([key, value]) => ({key, value})
      );
 
      // set the colour scale
      var color = d3.scaleOrdinal(d3.schemeCategory10);
 
      // Loop through each symbol / key
      dataNest.forEach(function (d, i) {
 
        svg.append("path")
          .attr("class", "line")
          .style("stroke", function () { // Add the colours dynamically
            return d.color = color(i);
          })
          .attr("d", priceline(d.value));
 
      });
 
      // Add the X Axis
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
 
      // Add the Y Axis
      svg.append("g")
        .attr("class", "axis")
        .call(d3.axisLeft(y));
 
    });
 
  </script>
</body>