This is a derivative of the Multi-line graph 4 with v4: Toggle as used in the book D3 Tips and Tricks v4. The stock data was sourced from Mike Bostock's small multiples example.
It is a variation on all the graphs in that multi-line series in that the y axis scales to bounds of the graph for each line. This might sound like a waste of time, but it is done with the intention to allow the viewer to more easily percieve common (related) features in the graph independant of scale
You can toggle the lines off and on by clicking on the appropriate legend text.
xxxxxxxxxx<meta charset="utf-8"><style> /* set the CSS */body { font: 12px Arial;}path { stroke: steelblue; stroke-width: 2; fill: none;}.axis path,.axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges;}.legend { font-size: 16px; font-weight: bold; text-anchor: middle;}</style><body><!-- load the d3.js library --> <script src="https://d3js.org/d3.v4.min.js"></script><script>// Set the dimensions of the canvas / graphvar margin = {top: 30, right: 20, bottom: 70, left: 50}, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom;// Parse the date / timevar parseDate = d3.timeParse("%b %Y");// Set the rangesvar x = d3.scaleTime().range([0, width]); var y = d3.scaleLinear().range([height, 0]);// Define the linevar priceline = d3.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.price); }); // Adds the svg canvasvar 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 datad3.csv("stocks.csv", function(error, 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; })); // Nest the entries by symbol var dataNest = d3.nest() .key(function(d) {return d.symbol;}) .entries(data); // set the colour scale var color = d3.scaleOrdinal(d3.schemeCategory10); legendSpace = width/dataNest.length; // spacing for the legend // Loop through each symbol / key dataNest.forEach(function(d,i) { // Set the independent y domain var innerValues = dataNest[i]['values']; y.domain([d3.min(innerValues, function(d) { return d.price; }), d3.max(innerValues, function(d) { return d.price; }) ]); svg.append("path") .attr("class", "line") .style("stroke", function() { // Add the colours dynamically return d.color = color(d.key); }) .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign an ID .attr("d", priceline(d.values)); // Add the Legend svg.append("text") .attr("x", (legendSpace/2)+i*legendSpace) // space legend .attr("y", height + (margin.bottom/2)+ 5) .attr("class", "legend") // style the legend .style("fill", function() { // Add the colours dynamically return d.color = color(d.key); }) .on("click", function(){ // Determine if current line is visible var active = d.active ? false : true, newOpacity = active ? 0 : 1; // Hide or show the elements based on the ID d3.select("#tag"+d.key.replace(/\s+/g, '')) .transition().duration(100) .style("opacity", newOpacity); // Update whether or not the elements are active d.active = active; }) .text(d.key); }); // Add the X Axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x));});</script></body> https://d3js.org/d3.v4.min.js