Skip to content

Instantly share code, notes, and snippets.

@tomruarol

tomruarol/.block

Last active December 31, 2018 08:56
Show Gist options
  • Save tomruarol/de3558dfccb673f90cc390cc73719677 to your computer and use it in GitHub Desktop.
Save tomruarol/de3558dfccb673f90cc390cc73719677 to your computer and use it in GitHub Desktop.
Download ZIP
Multiple line graphs with labels
Raw
.block
license: mit
Raw
README.md

This is an example of a line graph with multiple lines and labels at the end of those lines.

Created in responce to a question on d3noob.org

A few points to note:

  1. The csv file starts with the newest data point and ends with the oldest. If you needed to get the 'y' position of the last point in the array you will need to use data[data.length-1].open rather than data[0].open.

  2. I've left some console.log calls in the code as small demos.

  3. The script makes the adjustment for scale using the y function.

forked from d3noob's block: Multiple line graphs with labels

Raw
data2b.csv
date close
1-May-12 68.13
2011 29.6
2011 29.6
2011 29.5
2012 35.5
2012 32.3
2012 31
2012 22.2
2013 17.3
2013 27.2
2013 33.1
2014 35.1
2014 34.2
2014 28
2014 35.4
2014 33.4
2015 31.9
2015 32
2015 31.1
2015 25.4
2015 25.5
2015 28.6
2016 38.3
2016 33.1
2016 9.8
2016 30.6
2016 38.1
2016 31
2016 26.1
Raw
index.html
<!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 src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 40, 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.csv("data2b.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 Math.max(d.close); })]);
svg.append("path") // Add the valueline path.
.attr("class", "line")
.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);
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[0].close) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "steelblue")
.text("Close");
console.log(data.length-1);
console.log(y(data[0].close));
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment