Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active November 30, 2019 18:19
Show Gist options
  • Save d3noob/4414436 to your computer and use it in GitHub Desktop.
Save d3noob/4414436 to your computer and use it in GitHub Desktop.
Simple line graph in d3.js
license: mit

This is a simple line graph designed to allow investigation of aspects of using d3.js and is used as a teaching aid.

It is the baseline example graph used in the D3 Tips and Tricks book.

Edit: June 2014

I am going through a process of updating the code resources for the book and the latest (but not particularly different) example of this graph is here.

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

I'm new in GitHub.. I'm intermediate with Processing (not .js).. Now I create project which read data from csv/tsv and plot it on webserver (sharing over browser).. I've problem with read data csv which data update periodically.. This code can't read realtime CSV. How to make it read data periodically.. (I'm new on javasript: d3,processing.js, etc) Thank you

@karthyvr
Copy link

if i use integer values for the column value "close" it isnt working should i change anything in the path?

@praveenk263
Copy link

i am new here, the problem i am facing is , i am getting the plot when i put the link: https://gist.githubusercontent.com/d3noob/4414436/raw/f4f1529159959827651567d36e8f0ab1679d152e/data.csv
as csv file address, but when i save the same csv file in same folder of html page and rerun the code it is not plotting. i dont understand why. kindly help me. thanks in advance

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