Skip to content

Instantly share code, notes, and snippets.

Last active April 8, 2024 12:19
Show Gist options
  • Save d3noob/b3ff6ae1c120eea654b5 to your computer and use it in GitHub Desktop.
Save d3noob/b3ff6ae1c120eea654b5 to your computer and use it in GitHub Desktop.
Simple d3.js Graph
license: mit

This is a simple d3.js graph used as an example in the book D3 Tips and Tricks.

It is aimed at providing some exposure to some d3.js functions and should be taken in context with the text of the book which can be downloaded for free from Leanpub.

date close
1-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
24-Apr-12 130.28
23-Apr-12 166.70
20-Apr-12 234.98
19-Apr-12 345.44
18-Apr-12 443.34
17-Apr-12 543.70
16-Apr-12 580.13
13-Apr-12 605.23
12-Apr-12 622.77
11-Apr-12 626.20
10-Apr-12 628.44
9-Apr-12 636.23
5-Apr-12 633.68
4-Apr-12 624.31
3-Apr-12 629.32
2-Apr-12 618.63
30-Mar-12 599.55
29-Mar-12 609.86
28-Mar-12 617.62
27-Mar-12 614.48
26-Mar-12 606.98
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
<!-- load the d3.js library -->
<script src=""></script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
var yAxis = d3.svg.axis().scale(y)
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(; })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg ="body")
.attr("width", width + margin.left + margin.right)
.attr("height", height + + margin.bottom)
"translate(" + margin.left + "," + + ")");
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) { = parseDate(;
d.close = +d.close;
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
// Add the Y Axis
.attr("class", "y axis")
Copy link

I tried to replicate this example but failed. I tried basically several examples. Here's my success and failure:

Success: Link1 Link2

Failure: Link3
[For Link3, I have kept us.json in my folder which is required. Still it didn't work]

Copy link

I downloaded everything you have above but when I open index.html on Chrome or Internet Explorer, I just see a blank page.

Copy link

armianhanelli, make sure that the data.csv file is linked correctly in your folder, something like( data/data.csv).

Copy link

Hi, for those that have the empty page problem it might be because your internet browser, such as chrome, does not allow to use any files inside your hard disk.
You should just change the permits of your browser. FireFox has that option by default.

Copy link

Thanks for the solution rafaellopezgarcia. It didn't work in Chrome or Edge but worked well in Firefox.

Copy link

You should always use local web server to access files from your hard disk with the browser.
Detailed instructions:

Copy link

nina-mir commented Mar 5, 2020

Great example and tutorial! Thank you!
I fixed my empty page problem and shared my solution using a simple, local web server in python3 here:

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