Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active Mar 13, 2021
Embed
What would you like to do?
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;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.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.

Copy link

@subasish subasish commented 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]

@bluekeybo

This comment has been minimized.

Copy link

@bluekeybo bluekeybo commented 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.

@EmileBrand

This comment has been minimized.

Copy link

@EmileBrand EmileBrand commented Apr 1, 2015

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.

Copy link

@rafaellopezgarcia rafaellopezgarcia commented 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.

@shweta-sah

This comment has been minimized.

Copy link

@shweta-sah shweta-sah commented Apr 22, 2016

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

@karataev

This comment has been minimized.

Copy link

@karataev karataev commented 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

@nina-mir

This comment has been minimized.

Copy link

@nina-mir 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: https://stackoverflow.com/questions/21006647/cannot-import-data-from-csv-file-in-d3/60383167#60383167

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