Independent scale multi-line graph

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.

<!DOCTYPE html>
<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>

<script src="https://d3js.org/d3.v4.min.js"></script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 70, left: 50},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.timeParse("%b %Y");

// 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", 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