Built with blockbuilder.org
forked from romsson's block: TP3 Data viz
forked from JoymangulJensen's block: TP3 Data viz
forked from JoymangulJensen's block: TP3 Data viz 2
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin-top:0;
position:fixed;
top:50px;
right:0;
bottom:0;
left:0;
}
svg {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: black;
stroke-width: 2px;
}
</style>
</head>
<body>
<script>
var margin = {top: 2, right: 30, bottom: 0, left: 100},
width = 760 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
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 + ")");
var parseDate = d3.timeParse("%b %Y");
var duration = 2000;
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
c = d3.scaleOrdinal(d3.schemeCategory10);
var stack = d3.stack();
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });
function stackMax(layer) {
return d3.max(layer, function(d) { return d[1]; });
}
function stackMin(layer) {
return d3.min(layer, function(d) { return d[0]; });
}
d3.text('dataset.csv', function(error, raw) {
var dsv = d3.dsvFormat(',')
var data = dsv.parse(raw);
// Nest stock values by symbol.
var symbols = d3.nest()
.key(function(d) { return d.symbol; })
.entries(data);
var i = 0;
// Parse and caculate some values for each symbols
symbols.forEach(function(s) {
var j = 0;
s.values.forEach(function(d) {
d.date = parseDate(d.date);
d.price = +d.price;
if(i == 0){ // pas de petit frere
d.beforePrice = 0;
}else{
d.beforePrice = symbols[i-1].values[j].cumuPrice;
}
d.cumuPrice = d.beforePrice + d.price;
j++;
});
i++;
s.maxPrice = d3.max(s.values, function(d) { return d.price; });
s.sumPrice = d3.sum(s.values, function(d) { return d.price; });
s.maxCumuPrice = d3.max(s.values, function(d) { return d.cumuPrice; });
});
console.log(symbols);
setTimeout(stackArea, duration);
function stackArea() {
svg.selectAll("*").remove();
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(symbols.map(function(d) { return d.maxCumuPrice; }))])
var layer = svg.selectAll(".layer")
.data((symbols))
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d) { return c(d.key); });
var area = d3.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.cumuPrice); })
.y1(function(d) { return y(d.beforePrice);});
layer.append("path")
.attr("class", "area")
.style("stroke", function(d) { return c(d.key); })
.attr("d", function(d) { return area(d.values); });
layer
.append("text")
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width +30) + "," + y(d.price / 2 + d.beforePrice) + ")"; })
.style("font", "10px sans-serif")
.style("text-anchor", "end")
.text(function(d) { return d.key; });
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
setTimeout(streamArea, duration);
}
function streamArea() {
svg.selectAll("*").remove();
function bumps(indice) {
var map = [];
var nbValues = symbols[0].values.length;
for(var i = 0; i < nbValues; ++i){
map[i] = parseInt(symbols[indice].values[i].price);
}
return map;
}
var numberOfSymbols = symbols.length, // number of layers
m = symbols[0].values.length; // number of samples per layer
var stack = d3.stack().keys(d3.range(numberOfSymbols))
.offset(d3.stackOffsetWiggle),
layers = stack(d3.transpose(d3.range(numberOfSymbols)
.map(function(indice) { return bumps(indice); })));
var x = d3.scaleLinear()
.domain([0, m - 1])
.range([0, width]);
var y = d3.scaleLinear()
.domain([d3.min(layers, stackMin), d3.max(layers, stackMax)])
.range([height, 0]);
var z = d3.interpolateCool;
var area = d3.area()
.curve(d3.curveBasis)
.x(function(d, i) { return x(i); })
.y0(function(d) { return y(d[0]); })
.y1(function(d) { return y(d[1]); });
svg.selectAll("path")
.data(layers)
.enter().append("path")
.attr("d", area)
.attr("fill", function(d) { return c(d.key) });
svg.selectAll()
.data(symbols)
.enter().append("text")
.attr("x", width + 30)
.attr("y", function(d) { return height - d.values[d.values.length - 1].cumuPrice/2 })
.style("text-anchor", "end")
.text(function(d) { return d.key });
setTimeout(overlayArea, duration);
}
function overlayArea() {
svg.selectAll("*").remove();
y.domain([0, d3.max(symbols.map(function(d) { return d.maxCumuPrice; }))])
var area = d3.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return height; })
.y1(function(d) { return y(d.price);});
var layer = svg.selectAll(".layer")
.data((symbols))
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d) { return c(d.key); });
layer.append("path")
.attr("class", "area")
.style("stroke", function(d) { return c(d.key); })
.style("fill-opacity", .5)
.attr("d", function(d) { return area(d.values); });
layer
.append("text")
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width + 30) + "," + y(d.price) + ")"; })
.style("font", "10px sans-serif")
.style("text-anchor", "end")
.text(function(d) { return d.key; });
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
setTimeout(stackArea, duration);
}
});
</script>
</body>
https://d3js.org/d3.v4.min.js