D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
clemsos
Full window
Github gist
Gaussienne
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } .line { fill: none; stroke: steelblue; stroke-width: 2px; } </style> </head> <body> <script> var margin = {top: 50, right: 50, bottom: 50, left: 50} , width = 960 - margin.left - margin.right , height = 500 - margin.top - margin.bottom; 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 + ")"); // Load data d3.tsv('data.csv', function(error, data) { if(error) console.log(error); // check errors console.log(data); // convert text data from CSV to float numbers data.forEach(function(d){ d.x = parseFloat(d.x) d.y = parseFloat(d.y) d.z = parseFloat(d.z) }) var maxX = d3.max(data.map(d=>d.x)) var maxY = d3.max(data.map(d=>d.y)) var maxZ = d3.max(data.map(d=>d.z)) var xScale = d3.scaleLinear() .domain([0, maxX]) // input .range([0, width]); // output var yScale = d3.scaleLinear() .domain([0, maxY]) // input .range([height, 0]); // output // line drawing function var line = d3.line() .x(function(d, i) { return xScale(d.x)); }) // set the x values for the line generator .y(function(d) { return yScale(d.y); }) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); svg.append("g") .attr("class", "y axis") .call(d3.axisLeft(yScale)); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); }) </script> </body>
https://d3js.org/d3.v4.min.js