D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
katsumitakano
Full window
Github gist
Line Chart with Grid [D3]
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Line Chart</title> <style> .axis path, .axis line{ fill: none; stroke: black; } .line{ fill: none; stroke: blue; stroke-width: 2px; } .tick text{ font-size: 12px; } .tick line{ opacity: 0.2; } </style> </head> <body> <script src="https://d3js.org/d3.v3.js"></script> <script> var margin = {top: 20, right: 100, bottom: 30, left: 100}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var dataset = [ {x: 0, y: 5}, {x: 1, y: 8}, {x: 2, y: 13}, {x: 3, y: 12}, {x: 4, y: 16}, {x: 5, y: 21}, {x: 6, y: 18}, {x: 7, y: 23}, {x: 8, y: 24}, {x: 9, y: 28}, {x: 10, y: 35}, {x: 11, y: 30}, {x: 12, y: 32}, {x: 13, y: 36}, {x: 14, y: 40}, {x: 15, y: 38}, ]; var xScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d){ return d.x; })]) .range([0, width]); var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d){ return d.y; })]) .range([height, 0]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .innerTickSize(-height) .outerTickSize(0) .tickPadding(10); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .innerTickSize(-width) .outerTickSize(0) .tickPadding(10); var line = d3.svg.line() .x(function(d) { return xScale(d.x); }) .y(function(d) { return yScale(d.y); }); 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 + ")"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) svg.append("g") .attr("class", "y axis") .call(yAxis) svg.append("path") .data([dataset]) .attr("class", "line") .attr("d", line); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js