jorandradefig

index.html

Jun 17th, 2021
1,157
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <meta
  4.  name="viewport"
  5.  content="width=device-width, initial-scale=1"
  6. >
  7.  
  8. <!-- Bootstrap CSS -->
  9. <link
  10.  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
  11.  rel="stylesheet"
  12.  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
  13.  crossorigin="anonymous"
  14. >
  15. <style>
  16.   /* set the CSS */
  17.  
  18.   @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
  19.  
  20.   body {
  21.     font-family: 'Roboto Slab', serif;
  22.     font-size: 12px;
  23.   }
  24.  
  25.   path {
  26.     stroke: steelblue;
  27.     stroke-width: 1;
  28.     fill: none;
  29.   }
  30.  
  31.   .axis path,
  32.   .axis line {
  33.     fill: none;
  34.     stroke: grey;
  35.     stroke-width: 1;
  36.     shape-rendering: crispEdges;
  37.   }
  38.  
  39. </style>
  40.  
  41. <body>
  42.  
  43.   <!-- Option 1: Bootstrap Bundle with Popper -->
  44.   <script
  45.    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
  46.    integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
  47.    crossorigin="anonymous"
  48.  ></script>
  49.  
  50.   <!-- load the d3.js library -->
  51.   <script src="https://d3js.org/d3.v6.min.js"></script>
  52.  
  53.   <script>
  54.  
  55.     // Set the dimensions of the canvas / graph
  56.     var margin = {top: 30, right: 20, bottom: 30, left: 50},
  57.       width = document.documentElement.clientWidth - margin.left - margin.right,
  58.       height = 600 - margin.top - margin.bottom;
  59.  
  60.     // Parse the date / time
  61.     var parseDate = d3.timeParse("%b %Y");
  62.     //var parseDate = d3.timeParse("%Y-%m-%d");
  63.  
  64.     // Set the ranges
  65.     var x = d3.scaleTime().range([0, width]);
  66.     var y = d3.scaleLinear().range([height, 0]);
  67.  
  68.     // Define the line
  69.     var priceline = d3.line()
  70.       .x(function (d) {return x(d.date);})
  71.       .y(function (d) {return y(d.price);});
  72.  
  73.     // Adds the svg canvas
  74.     var svg = d3.select("body")
  75.       .append("svg")
  76.       .attr("width", width + margin.left + margin.right)
  77.       .attr("height", height + margin.top + margin.bottom)
  78.       .append("g")
  79.       .attr("transform",
  80.         "translate(" + margin.left + "," + margin.top + ")");
  81.  
  82.     // Get the data
  83.     d3.csv("stocks.csv").then(function (data) {
  84.  
  85.       // console.log(data);
  86.  
  87.       data.forEach(function (d) {
  88.         d.date = parseDate(d.date);
  89.         d.price = +d.price;
  90.       });
  91.  
  92.       // Scale the range of the data
  93.       x.domain(d3.extent(data, function (d) {return d.date;}));
  94.       y.domain([0, d3.max(data, function (d) {return d.price;})]);
  95.  
  96.       // Group the entries by symbol
  97.       dataNest = Array.from(
  98.         d3.group(data, d => d.symbol), ([key, value]) => ({key, value})
  99.       );
  100.  
  101.       // set the colour scale
  102.       var color = d3.scaleOrdinal(d3.schemeCategory10);
  103.  
  104.       // Loop through each symbol / key
  105.       dataNest.forEach(function (d, i) {
  106.  
  107.         svg.append("path")
  108.           .attr("class", "line")
  109.           .style("stroke", function () { // Add the colours dynamically
  110.             return d.color = color(i);
  111.           })
  112.           .attr("d", priceline(d.value));
  113.  
  114.       });
  115.  
  116.       // Add the X Axis
  117.       svg.append("g")
  118.         .attr("class", "axis")
  119.         .attr("transform", "translate(0," + height + ")")
  120.         .call(d3.axisBottom(x));
  121.  
  122.       // Add the Y Axis
  123.       svg.append("g")
  124.         .attr("class", "axis")
  125.         .call(d3.axisLeft(y));
  126.  
  127.     });
  128.  
  129.   </script>
  130. </body>
  131.  
RAW Paste Data