D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
EmbraceLife
Full window
Github gist
multi-line chart 1
Built with
blockbuilder.org
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> /* add style to elements */ </style> <!-- 1. Create a Canvas --> <svg width="960" height="500"></svg> <!-- test --> </head> <body> <script> // 2. find a start point for drawing // 2.1 select to manipulate // var svg = d3.select("svg"); // test 2.1 // console.log(svg); // 2.2 define where to start // var margin = {top: 20, right: 80, bottom: 30, left: 50}, // width = svg.attr("width") - margin.left - margin.right, // height = svg.attr("height") - margin.top - margin.bottom; // 2.3 create a placeholder, move it to the place you want to start // g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // test 2.3 // console.log(g); // Element View </script> </body> </html>
https://d3js.org/d3.v4.min.js