Skip to content

Instantly share code, notes, and snippets.

Created May 2, 2012 19:34
Show Gist options
  • Save benjchristensen/2579599 to your computer and use it in GitHub Desktop.
Save benjchristensen/2579599 to your computer and use it in GitHub Desktop.
Simple Line Graph using SVG and d3.js
<title>Simple Line Graph using SVG and d3.js</title>
<script src=""></script>
/* tell the SVG path to be a thin blue line without any area fill */
path {
stroke: steelblue;
stroke-width: 1;
fill: none;
.axis {
shape-rendering: crispEdges;
.x.axis line {
stroke: lightgrey;
.x.axis .minor {
stroke-opacity: .5;
.x.axis path {
display: none;
.y.axis line, .y.axis path {
fill: none;
stroke: #000;
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>
/* implementation heavily influenced by */
// define dimensions of graph
var m = [80, 80, 80, 80]; // margins
var w = 1000 - m[1] - m[3]; // width
var h = 400 - m[0] - m[2]; // height
// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
var data = [3, 6, 2, 7, 5, 2, 0, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7];
// X scale will fit all values from data[] within pixels 0-w
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
var y = d3.scale.linear().domain([0, 10]).range([h, 0]);
// automatically determining max range can work something like this
// var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);
// create a line function that can convert data[] into x and y points
var line = d3.svg.line()
// assign the X function to plot our line as we wish
.x(function(d,i) {
// verbose logging to show what's actually being done
console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
// return the X coordinate where we want to plot this datapoint
return x(i);
.y(function(d) {
// verbose logging to show what's actually being done
console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
// return the Y coordinate where we want to plot this datapoint
return y(d);
// Add an SVG element with the desired dimensions and margin.
var graph ="#graph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// create yAxis
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
// Add the x-axis.
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
// Add the y-axis to the left
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
// Add the line by appending an svg:path element with the data line we created above
// do this AFTER the axes above so that the line is above the tick-lines
graph.append("svg:path").attr("d", line(data));
Copy link

dweekes commented Jul 9, 2013

This is great! Simple and lightweight! thanks!

Copy link

sebinsua commented Sep 4, 2013

That helped. Cheers.

Very difficult interface to read if you don't have comments or the time to read the documentation... :)

Copy link

thanks nice example
But could you tell me if i want this line chart to map dynamically with the user data how it will be done.

Copy link

Izhaki commented May 19, 2014

Thanks for the example.

I believe that

domain([0, data.length])

should really be

domain([0, data.length - 1])

or you get gap on the right edge of the graph (more obvious with an array with, say, 3, x values).

Copy link

JS fiddle for above gist

Copy link

sun-yr commented Jun 3, 2014

very nice

Copy link

fasiha commented Aug 22, 2014

If D3 is TeX, I'm waiting for LaTeX. If D3 is assembly, I'm waiting for C. I.e., a layer on top of it to make life easier. Coming from Matplotlib (pylab.plot(data)) or similar-like in R, Julia, Matlab, or any data-wrangling language, this is incredibly heavyweight.

Edit: C3.js seems like a good start!

Copy link

Very nice Example. Good job @benjchristensen

Copy link

sklise commented Dec 4, 2014

Thanks so much for making this gist, it has helped me out a ton.

Copy link

Extremely useful. Thanks a ton !

Copy link

Thank you!

Copy link

bengrunfeld commented Aug 8, 2016

@benjchristensen Would you mind updating this to be Version 4 compatible? E.g. <script src=""></script> would be changed to import the correct D3 V4 micro-libraries and main D3 V4 library needed to run this code.

Copy link

How to fetch data from external JSON file?


Thanks for sharing your code solve my problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment