-
-
Save benjchristensen/2579599 to your computer and use it in GitHub Desktop.
| <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> |
That helped. Cheers.
Very difficult interface to read if you don't have comments or the time to read the documentation... :)
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.
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).
JS fiddle for above gist
http://jsfiddle.net/hVh5G/
very nice
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!
Very nice Example. Good job @benjchristensen
Thanks so much for making this gist, it has helped me out a ton.
Extremely useful. Thanks a ton !
Thank you!
@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.
How to fetch data from external JSON file?
Thanks for sharing your code solve my problem.
This is great! Simple and lightweight! thanks!