D3.js Tips and Tricks: Starting with a basic D3 line graph

Tuesday, 11 December 2012

Starting with a basic D3 line graph

Basic Graph

How I'll make a start is to provide the full code for a simple graph and then we can explain it piece by piece.

Here's what the basic graph looks like;

And here's the code that make it happen;

<!DOCTYPE html>
<meta charset="utf-8">
<style>

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>
<script type="text/javascript" src="d3/d3.v3.js"></script>

<script>

var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });
    
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.tsv("data/data.tsv", 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; })]);

    svg.append("path")      // Add the valueline path.
        .attr("d", valueline(data));

    svg.append("g")         // Add the X Axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")         // Add the Y Axis
        .attr("class", "y axis")
        .call(yAxis);

});

</script>
</body>

Once we've finished explaining these parts, we'll start looking at what we need to add in and adjust so that we can incorporate other useful functions that are completely reusable in other diagrams as well.

The end point being something hideous like the following;

I say hideous since the graph is not intended to win any beauty prizes, but there are several components to it which some people may find useful (gridlines, area fill, axis label, drop shadow for text, title, text formatting).

So, we can break the file down into component parts. I'm going to play kind of fast and loose here, but never fear, it'll all make sense.

The above description (and heaps of other stuff) is in the D3 Tips and Tricks document that can be accessed from the downloads page of d3noob.org.

8 comments:

Anonymous4 January 2013 at 16:00
Thanks! This is exactly what I was looking for.
ReplyDelete
Replies
D3 Noob4 January 2013 at 19:36
Glad it's useful
ReplyDelete
Replies
Sean Cook11 January 2013 at 11:25
So I believe I have WAMP working properly, but I haven't got this example to work...page 8 to page 9 skip a few steps for people who have no idea how this stuff works! I copied this code into notepad and saved it as a .html file in the d3 subfolder, (you should mention data.tsv is available for download on the website in the pdf and in this blog post!)

Once I have this saved as an html file and the data.tsv file in the proper location, should I be able to go to: http://localhost/webserver/d3/ and see this graph? That doesn't work for me.

Thanks for all this work, it's awesome!
ReplyDelete
Replies
Anthony25 March 2018 at 20:22
you can run `npm i -g http-server` and then run `http-server` wherever you save the files.
ReplyDelete
Replies