This is a multiple line graph demonstrating the display of labels for each line.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 6 of d3.js.
license: mit |
This is a multiple line graph demonstrating the display of labels for each line.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 6 of d3.js.
date | close | open | |
---|---|---|---|
1-May-12 | 68.13 | 34.12 | |
30-Apr-12 | 63.98 | 45.56 | |
27-Apr-12 | 67.00 | 67.89 | |
26-Apr-12 | 89.70 | 78.54 | |
25-Apr-12 | 99.00 | 89.23 | |
24-Apr-12 | 130.28 | 99.23 | |
23-Apr-12 | 166.70 | 101.34 | |
20-Apr-12 | 234.98 | 122.34 | |
19-Apr-12 | 345.44 | 134.56 | |
18-Apr-12 | 443.34 | 160.45 | |
17-Apr-12 | 543.70 | 180.34 | |
16-Apr-12 | 580.13 | 210.23 | |
13-Apr-12 | 605.23 | 223.45 | |
12-Apr-12 | 622.77 | 201.56 | |
11-Apr-12 | 626.20 | 212.67 | |
10-Apr-12 | 628.44 | 310.45 | |
9-Apr-12 | 636.23 | 350.45 | |
5-Apr-12 | 633.68 | 410.23 | |
4-Apr-12 | 624.31 | 430.56 | |
3-Apr-12 | 629.32 | 460.34 | |
2-Apr-12 | 618.63 | 510.34 | |
30-Mar-12 | 599.55 | 534.23 | |
29-Mar-12 | 609.86 | 578.23 | |
28-Mar-12 | 617.62 | 590.12 | |
27-Mar-12 | 614.48 | 560.34 | |
26-Mar-12 | 606.98 | 580.12 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> /* set the CSS */ | |
.line { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 2px; | |
} | |
</style> | |
<body> | |
<!-- load the d3.js library --> | |
<script src="https://d3js.org/d3.v6.min.js"></script> | |
<script> | |
// set the dimensions and margins of the graph | |
var margin = {top: 20, right: 40, bottom: 30, left: 50}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
// parse the date / time | |
var parseTime = d3.timeParse("%d-%b-%y"); | |
// set the ranges | |
var x = d3.scaleTime().range([0, width]); | |
var y = d3.scaleLinear().range([height, 0]); | |
// define the 1st line | |
var valueline = d3.line() | |
.x(function(d) { return x(d.date); }) | |
.y(function(d) { return y(d.close); }); | |
// define the 2nd line | |
var valueline2 = d3.line() | |
.x(function(d) { return x(d.date); }) | |
.y(function(d) { return y(d.open); }); | |
// append the svg obgect to the body of the page | |
// appends a 'group' element to 'svg' | |
// moves the 'group' element to the top left margin | |
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("data2.csv").then(function(data) { | |
// format the data | |
data.forEach(function(d) { | |
d.date = parseTime(d.date); | |
d.close = +d.close; | |
d.open = +d.open; | |
}); | |
// 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, d.open); })]); | |
// Add the valueline path. | |
svg.append("path") | |
.data([data]) | |
.attr("class", "line") | |
.attr("d", valueline); | |
// Add the valueline2 path. | |
svg.append("path") | |
.data([data]) | |
.attr("class", "line") | |
.style("stroke", "red") | |
.attr("d", valueline2); | |
// Add the X Axis | |
svg.append("g") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x)); | |
// Add the Y Axis | |
svg.append("g") | |
.call(d3.axisLeft(y)); | |
svg.append("text") | |
.attr("transform", "translate("+(width+3)+","+y(data[0].open)+")") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start") | |
.style("fill", "red") | |
.text("Open"); | |
svg.append("text") | |
.attr("transform", "translate("+(width+3)+","+y(data[0].close)+")") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start") | |
.style("fill", "steelblue") | |
.text("Close"); | |
}); | |
</script> | |
</body> |