This is a derivative of the simple d3.js graph in v4 used as an example in the book D3 Tips and Tricks v4. The stock data was sourced from Mike Bostock's small multiples example.
It is the fourth graph in a series that is building a multi-line graph that incorperates an automatically developed legend and a system that can toggle the lines off and on as desired.
This version is demonstrating the ability to toggle the lines off and on by clicking on the appropriate legend text.
The graph should be taken in context with the text of the book which can be downloaded for free from Leanpub.
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; })); y.domain([0, d3.max(data, function(d) { return d.price; })]); // 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) { 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)); // Add the Y Axis svg.append("g") .attr("class", "axis") .call(d3.axisLeft(y));});</script></body> https://d3js.org/d3.v4.min.js