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
Copy link

dweekes commented Jul 9, 2013

This is great! Simple and lightweight! thanks!

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

@vnyraghav
Copy link

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

@somandubey
Copy link

somandubey commented May 23, 2014

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

@sun-yr
Copy link

sun-yr commented Jun 3, 2014

very nice

@fasiha
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!

@avimehenwal
Copy link

avimehenwal commented Sep 18, 2014

Very nice Example. Good job @benjchristensen

@sklise
Copy link

sklise commented Dec 4, 2014

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

@utsavtiwary04
Copy link

utsavtiwary04 commented Aug 4, 2015

Extremely useful. Thanks a ton !

@jxmorris12
Copy link

jxmorris12 commented Jul 13, 2016

Thank you!

@bengrunfeld
Copy link

bengrunfeld 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
Copy link

DarshanTeerth commented Apr 28, 2017

How to fetch data from external JSON file?

@GraniteConsultingReviews

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