Create a gist now

Instantly share code, notes, and snippets.

@d3noob /data.csv
Last active Feb 7, 2018

What would you like to do?
Simple d3.js Graph

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;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<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.top - 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)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
@subasish

This comment has been minimized.

Show comment Hide comment
@subasish

subasish Feb 23, 2015

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]

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]

@bluekeybo

This comment has been minimized.

Show comment Hide comment
@bluekeybo

bluekeybo Mar 26, 2015

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

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

@EmileBrand

This comment has been minimized.

Show comment Hide comment
@EmileBrand

EmileBrand Apr 1, 2015

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

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

@rafaellopezgarcia

This comment has been minimized.

Show comment Hide comment
@rafaellopezgarcia

rafaellopezgarcia Jun 21, 2015

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.

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.

@shweta-sah

This comment has been minimized.

Show comment Hide comment
@shweta-sah

shweta-sah Apr 22, 2016

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

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

@karataev

This comment has been minimized.

Show comment Hide comment
@karataev

karataev Jul 24, 2016

You should always use local web server to access files from your hard disk with the browser.
Detailed instructions: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

You should always use local web server to access files from your hard disk with the browser.
Detailed instructions: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

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