This is a multiple line graph demonstrating how to show / hide elements by clicking on other elements.
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 19, 2021 04:16
-
-
Save d3noob/6b5b867eb5a4230443c07779440ce3bc to your computer and use it in GitHub Desktop.
Toggling element visibility in v7
This file contains hidden or 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 hidden or 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 | 58.13 | 3.41 | |
| 30-Apr-12 | 53.98 | 4.55 | |
| 27-Apr-12 | 67.00 | 6.78 | |
| 26-Apr-12 | 89.70 | 7.85 | |
| 25-Apr-12 | 99.00 | 8.92 | |
| 24-Apr-12 | 130.28 | 9.92 | |
| 23-Apr-12 | 166.70 | 10.13 | |
| 20-Apr-12 | 234.98 | 12.23 | |
| 19-Apr-12 | 345.44 | 13.45 | |
| 18-Apr-12 | 443.34 | 16.04 | |
| 17-Apr-12 | 543.70 | 18.03 | |
| 16-Apr-12 | 580.13 | 21.02 | |
| 13-Apr-12 | 605.23 | 22.34 | |
| 12-Apr-12 | 622.77 | 20.15 | |
| 11-Apr-12 | 626.20 | 21.26 | |
| 10-Apr-12 | 628.44 | 31.04 | |
| 9-Apr-12 | 636.23 | 35.04 | |
| 5-Apr-12 | 633.68 | 41.02 | |
| 4-Apr-12 | 624.31 | 43.05 | |
| 3-Apr-12 | 629.32 | 46.03 | |
| 2-Apr-12 | 618.63 | 51.03 | |
| 30-Mar-12 | 599.55 | 53.42 | |
| 29-Mar-12 | 609.86 | 57.82 | |
| 28-Mar-12 | 617.62 | 59.01 | |
| 27-Mar-12 | 614.48 | 56.03 | |
| 26-Mar-12 | 606.98 | 58.01 |
This file contains hidden or 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; | |
| } | |
| .axisSteelBlue text{ | |
| fill: steelblue; | |
| } | |
| .axisRed text{ | |
| fill: red; | |
| } | |
| .legend { | |
| font: 16px sans-serif; | |
| font-weight: bold; | |
| text-anchor: start; | |
| } | |
| </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: 40, bottom: 60, 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 y0 = d3.scaleLinear().range([height, 0]); | |
| var y1 = d3.scaleLinear().range([height, 0]); | |
| // define the 1st line | |
| var valueline = d3.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y0(d.close); }); | |
| // define the 2nd line | |
| var valueline2 = d3.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y1(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("data4.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; })); | |
| y0.domain([0, d3.max(data, function(d) {return Math.max(d.close);})]); | |
| y1.domain([0, d3.max(data, function(d) {return Math.max(d.open); })]); | |
| // add the valueline path. | |
| svg.append("path") | |
| .data([data]) | |
| .attr("class", "line") | |
| .attr("id", "blueLine") | |
| .attr("d", valueline); | |
| // add the valueline2 path. | |
| svg.append("path") | |
| .data([data]) | |
| .attr("class", "line") | |
| .attr("id", "redLine") | |
| .style("stroke", "red") | |
| .attr("d", valueline2); | |
| // add the X Axis | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x)); | |
| // add the Y0 Axis | |
| svg.append("g") | |
| .attr("class", "axisSteelBlue") | |
| .call(d3.axisLeft(y0)); | |
| // add the Y1 Axis | |
| svg.append("g") | |
| .attr("class", "axisRed") | |
| .attr("transform", "translate( " + width + ", 0 )") | |
| .call(d3.axisRight(y1)); | |
| // add the blue line legend | |
| svg.append("text") | |
| .attr("x", 0) | |
| .attr("y", height + margin.top + 15) | |
| .attr("class", "legend") | |
| .style("fill", "steelblue") | |
| .on("click", function(){ | |
| // determine if current line is visible | |
| var active = blueLine.active ? false : true, | |
| newOpacity = active ? 0 : 1; | |
| // hide or show the elements | |
| d3.select("#blueLine").style("opacity", newOpacity); | |
| // update whether or not the elements are active | |
| blueLine.active = active; | |
| }) | |
| .text("Blue Line"); | |
| // add the red line legend | |
| svg.append("text") | |
| .attr("x", 0) | |
| .attr("y", height + margin.top + 35) | |
| .attr("class", "legend") | |
| .style("fill", "red") | |
| .on("click", function(){ | |
| // determine if current line is visible | |
| var active = redLine.active ? false : true, | |
| newOpacity = active ? 0 : 1; | |
| // hide or show the elements | |
| d3.select("#redLine").style("opacity", newOpacity); | |
| // update whether or not the elements are active | |
| redLine.active = active; | |
| }) | |
| .text("Red Line"); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment