Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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/bootstrap@5.0.1/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/bootstrap@5.0.1/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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement