|
<!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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.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 valueline2 = d3.svg.line() |
|
.x(function(d) { return x(d.date); }) |
|
.y(function(d) { return y(d.open); }); |
|
|
|
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; |
|
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); })]); |
|
|
|
svg.append("path") // Add the valueline path. |
|
.attr("class", "line") |
|
.attr("d", valueline(data)); |
|
|
|
svg.append("path") // Add the valueline2 path. |
|
.attr("class", "line") |
|
.style("stroke", "red") |
|
.attr("d", valueline2(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].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"); |
|
|
|
console.log(data.length-1); |
|
console.log(data[data.length-1].open); |
|
console.log(data[0].open); |
|
console.log(y(data[0].open)); |
|
console.log(y(data[0].close)); |
|
|
|
}); |
|
|
|
</script> |
|
</body> |
On line 88, this,
.attr("transform", "translate("+(width+3)+","+y(data[0].open)+")")can be made dynamic this way,.attr("transform", "translate(" + (width + 3) + "," + (d => d3.max(d, d=> y(d.close)))(data) + ")"), because I believe there can be cases where one needs to query some specific entities out of many and they don't know what entity will take on the first position as explained in https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-labelling-multiple-lines-on-a-graph. Take an example where you're given 1000 years, and you're asked to query the years where the number of females was higher than that of males, the result will most probably not be in order.. and so you need to make the code dynamic.Basically, what this code snippet (
.attr("transform", "translate(" + (width + 3) + "," + (d => d3.max(d, d=> y(d.close)))(data) + ")")) does in that context, is to grab the position of the value that is maximum respective of what line.alternatively, it could be written this way,
const returnPosForMaxValue = (data) => d3.max(data, d=> y(d.close));the called in place,.attr("transform", "translate(" + (width + 3) + "," + returnPosForMaxValue(data) + ")")