This is a derivative of the simple d3.js graph in v5 used as an example in the book D3 Tips and Tricks v5. The stock data was sourced from Mike Bostock's small multiples example.
It is the third 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 addition of a legend to the graph.
The graph should be taken in context with the text of the book which can be downloaded for free from Leanpub.
forked from d3noob's block: Multi-line graph 3 with v5: Legend
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.v5.min.js"></script><script> var data = [ { count: 1, last_check: "2020-02-27 13:45:08", }, { count: 1, last_check: "2020-02-27 13:46:08", }, { count: 1, last_check: "2020-02-27 13:47:08", }, { count: 1, last_check: "2020-02-27 13:48:08", }, { count: 1, last_check: "2020-02-27 13:49:08", }, { count: 1, last_check: "2020-02-27 13:50:08", }, { count: 1, last_check: "2020-02-27 13:51:08", }, { count: 1, last_check: "2020-02-27 13:52:08", } ] // 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;// Set the rangesvar x = d3.scaleLinear().range([0, width]); var y = d3.scaleLinear().range([height, 0]);// Define the linevar priceline = d3.line() .x(function(d) { return x(d.host_name); }) .y(function(d) { return y(d.cdu_rta); }); // 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 data data.forEach(function(d) { d.host_name = d.host_name; d.cdu_rta = +d.cdu_rta; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.host_name; })); y.domain([0, d3.max(data, function(d) { return d.cdu_rta; })]); // Nest the entries by symbol var dataNest = d3.nest() .key(function(d) {return d.host_name;}) .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("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); }) .text(d.key + " CDU"); }); // 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.v5.min.js