xxxxxxxxxx
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Codystar" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" rel="stylesheet">
<style>
body {
background-color: #F8F3D4;
font-family: 'Codystar', cursive;
text-anchor: middle;
}
.line {
fill: none;
stroke: #F6416C;
stroke-width: 1.5px;
}
text {
text-anchor: end;
fill: #F6416C;
}
.area {
fill: url(#area-gradient);
clip-path: url(#clip);
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}
.axis text {
text-align: inherit;
font-family: 'Codystar', cursive;
font-size: 0.8em;
}
.axis path {
stroke: none;
}
.axis line {
stroke: #FFDE7D;
stroke-dasharray: 1px 1px;
}
.brush {
fill: #FFDE7D;
fill-opacity: .125;
}
.brush .resize path {
fill: orange;
stroke: #666;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// code attribution to mbostock for https://bl.ocks.org/mbostock/e1192fe405703d8321a5187350910e08
var margin = {top: 8, right: 10, bottom: 2, left: 10},
width = 960 - margin.left - margin.right,
height = 100 - margin.top - margin.bottom;
var parseDate = d3.timeParse("%b %Y");
var x = d3.scaleTime()
.range([0, width]);
var y = d3.local();
var xAxis = d3.axisBottom(x),
yAxis = d3.axisLeft(y);
var area = d3.local()
var line = d3.local();
d3.csv("stocks.csv", type, function(error, data) {
if (error) throw error;
var symbols = d3.nest()
.key(function(d) { return d.symbol; })
.entries(data);
x.domain([
d3.min(symbols, function(symbol) { return symbol.values[0].date; }),
d3.max(symbols, function(symbol) { return symbol.values[symbol.values.length - 1].date; })
]);
var svg = d3.select("body").selectAll("svg")
.data(symbols)
.enter().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 + ")")
.each(function(d) {
var ty = y.set(this, d3.scaleLinear()
.domain([0, d3.max(d.values, function(d) { return d.price; })])
.range([height, 0]));
area.set(this, d3.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return ty(d.price); }));
line.set(this, d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return ty(d.price); }));
});
var colours = ["#00b8a9","#20c1b4","#40cabe","#60d3c9","#80dbd4", "#9fe4df"];
svg.append("linearGradient")
.attr("id", "area-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("spreadMethod", "reflect")
.style("mix-blend-mode","overlay")
.selectAll("stop")
.data(colours)
.enter().append("stop")
.attr("offset", function(d,i) { return i/(colours.length-1); })
.attr("stop-color", function(d) { return d; });
svg.append("path")
.attr("class", "area")
.attr("d", function(d) { return area.get(this)(d.values); });
svg.append("path")
.attr("class", "line")
.attr("d", function(d) { return line.get(this)(d.values); });
svg.append("text")
.attr("x", width - 6)
.attr("y", height - 6)
.text(function(d) { return d.key; });
});
function type(d) {
d.price = +d.price;
d.date = parseDate(d.date);
return d;
}
</script>
https://d3js.org/d3.v4.min.js