Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Line Graph using SVG and d3.js
<html>
<head>
<title>Simple Line Graph using SVG and d3.js</title>
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>
<script>
/* implementation heavily influenced by http://bl.ocks.org/1166403 */
// 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 = d3.select("#graph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
// create yAxis
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
// Add the x-axis.
graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
// Add the y-axis to the left
graph.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
.call(yAxisLeft);
// 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));
</script>
</body>
</html>
@dweekes

This comment has been minimized.

Copy link

commented Jul 9, 2013

This is great! Simple and lightweight! thanks!

@sebinsua

This comment has been minimized.

Copy link

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... :)

@vnyraghav

This comment has been minimized.

Copy link

commented May 8, 2014

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.

@Izhaki

This comment has been minimized.

Copy link

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).

@somandubey

This comment has been minimized.

Copy link

commented May 23, 2014

JS fiddle for above gist
http://jsfiddle.net/hVh5G/

@sun-yr

This comment has been minimized.

Copy link

commented Jun 3, 2014

very nice

@fasiha

This comment has been minimized.

Copy link

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!

@avimehenwal

This comment has been minimized.

Copy link

commented Sep 18, 2014

Very nice Example. Good job @benjchristensen

@sklise

This comment has been minimized.

Copy link

commented Dec 4, 2014

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

@utsavtiwary04

This comment has been minimized.

Copy link

commented Aug 4, 2015

Extremely useful. Thanks a ton !

@jxmorris12

This comment has been minimized.

Copy link

commented Jul 13, 2016

Thank you!

@bengrunfeld

This comment has been minimized.

Copy link

commented Aug 8, 2016

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

@DarshanTeerth

This comment has been minimized.

Copy link

commented Apr 28, 2017

How to fetch data from external JSON file?

@GraniteConsultingReviews

This comment has been minimized.

Copy link

commented Aug 27, 2017

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
You can’t perform that action at this time.