This is a simple graph demonstrating the display of multiple lines.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.
Created
June 18, 2021 23:53
-
-
Save d3noob/bdaf9d5abc467a4895fb115330be35b2 to your computer and use it in GitHub Desktop.
Multiple line graph in v7
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| date | close | open | |
|---|---|---|---|
| 1-May-12 | 68.13 | 34.12 | |
| 30-Apr-12 | 63.98 | 45.56 | |
| 27-Apr-12 | 67.00 | 67.89 | |
| 26-Apr-12 | 89.70 | 78.54 | |
| 25-Apr-12 | 99.00 | 89.23 | |
| 24-Apr-12 | 130.28 | 99.23 | |
| 23-Apr-12 | 166.70 | 101.34 | |
| 20-Apr-12 | 234.98 | 122.34 | |
| 19-Apr-12 | 345.44 | 134.56 | |
| 18-Apr-12 | 443.34 | 160.45 | |
| 17-Apr-12 | 543.70 | 180.34 | |
| 16-Apr-12 | 580.13 | 210.23 | |
| 13-Apr-12 | 605.23 | 223.45 | |
| 12-Apr-12 | 622.77 | 201.56 | |
| 11-Apr-12 | 626.20 | 212.67 | |
| 10-Apr-12 | 628.44 | 310.45 | |
| 9-Apr-12 | 636.23 | 350.45 | |
| 5-Apr-12 | 633.68 | 410.23 | |
| 4-Apr-12 | 624.31 | 430.56 | |
| 3-Apr-12 | 629.32 | 460.34 | |
| 2-Apr-12 | 618.63 | 510.34 | |
| 30-Mar-12 | 599.55 | 534.23 | |
| 29-Mar-12 | 609.86 | 578.23 | |
| 28-Mar-12 | 617.62 | 590.12 | |
| 27-Mar-12 | 614.48 | 560.34 | |
| 26-Mar-12 | 606.98 | 580.12 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> /* set the CSS */ | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script> | |
| // set the dimensions and margins of the graph | |
| var margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // parse the date / time | |
| var parseTime = d3.timeParse("%d-%b-%y"); | |
| // set the ranges | |
| var x = d3.scaleTime().range([0, width]); | |
| var y = d3.scaleLinear().range([height, 0]); | |
| // define the 1st line | |
| var valueline = d3.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.close); }); | |
| // define the 2nd line | |
| var valueline2 = d3.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.open); }); | |
| // append the svg obgect to the body of the page | |
| // appends a 'group' element to 'svg' | |
| // moves the 'group' element to the top left margin | |
| 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("data2.csv").then(function(data) { | |
| // format the data | |
| data.forEach(function(d) { | |
| d.date = parseTime(d.date); | |
| d.close = +d.close; | |
| d.open = +d.open; | |
| }); | |
| // 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 Math.max(d.close, d.open); })]); | |
| // Add the valueline path. | |
| svg.append("path") | |
| .data([data]) | |
| .attr("class", "line") | |
| .attr("d", valueline); | |
| // Add the valueline2 path. | |
| svg.append("path") | |
| .data([data]) | |
| .attr("class", "line") | |
| .style("stroke", "red") | |
| .attr("d", valueline2); | |
| // Add the X Axis | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| // Add the Y Axis | |
| svg.append("g") | |
| .call(d3.axisLeft(y)); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
when i do this in v7 .x(function(d) { return x(d.date); }) i get error that it must be number index so object is not acceptable, i rewrote it to array x(d[0]) like in other examples in internet. this way works for v4. but here we see loading of v7. very interesting...