D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
denisemauldin
Full window
Github gist
D3 v4 fake line plot
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg width="300" height="300"></svg> <script> // constants to help with the X axis var limit = 60 * 1, duration = 360000, now = new Date(Date.now() - duration); var width = 400, height = 200 var x = d3.scaleTime() .domain([now - duration, now - (limit-2)]) .range([0, width]) var y = d3.scaleLinear() .domain([0, 100]) .range([height, 0]) var svg = d3.select('svg') .attr('class', 'chart') .attr('width', width) .attr('height', height + 300) ADJUSTME = 3600; var line = d3.line() .x(function(d, i) { return x(now - (limit - 1 - i) * ADJUSTME) }) .y(function(d) { return y(d) }) var xAxis = d3.axisBottom(x).ticks(d3.timeMinute.every(1)) svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis) var yAxis = d3.axisLeft(y); svg.append('g') .attr('class', 'y axis') .call(yAxis) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", 5) .attr("dy", "1.0em") .attr("text-anchor", "end") .attr('font-size', "1.5em") .text("Temp F"); // create dummy data var temps = []; for (var i=0; i<60; i++) { temps.push(i); } svg.append('g') .append('path') .datum(temps) .attr('class', 'current' + ' group') .style('stroke', 'purple') .attr('d', line) </script> </body> </html>
https://d3js.org/d3.v4.min.js