DataViz-tp3

forked from romsson's block: DataViz-tp3

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        body {
            margin: 0;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
       svg { font: 10px sans-serif; }
      
    </style>
</head>

<body>
    <script>
        var margin = { top: 20, right: 40, bottom: 20, left: 100 };
        var width = 760 - margin.left - margin.right;
        var height = 300 - margin.top - margin.bottom;
      
				var parseDate = d3.timeParse("%b %Y");
        var displayDate = d3.timeFormat("%y");
      	var displayValue = d3.format(",.0f");
      
      	var color = d3.scaleOrdinal(d3.schemeCategory10);
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);
       
      
      	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 +
                ")");

/********** Gestion des Aires **********/
      	// Calcul des aires du graphe separe
        var separatedAreas = d3.area()
            .curve(d3.curveBasis)
            .x(function(d) { return x(d.date); })
            .y0(function(d) { return y(d.base); })
            .y1(function(d) { return y(d.basedPrice); });
      
				// Calcul des aires du graphe rapproche
        var stackedAreas = d3.area()
            .curve(d3.curveBasis)
            .x(function(d) { return x(d.date); })
            .y0(function(d) { return y(d.stackedSum); })
            .y1(function(d) { return y(d.stackedPrice); });

// Calcul des aires du graphe centre
        var centeredAreas = d3.area()
            .curve(d3.curveBasis)
            .x(function(d) { return x(d.date); })
            .y0(function(d) { return y(d.centeredSum); })
            .y1(function(d) { return y(d.centeredPrice); });
      
      	// Calcul des aires du graphe transparent
        var transparentAreas = d3.area()
            .curve(d3.curveBasis)
            .x(function(d) { return x(d.date); })
            .y0(height)
            .y1(function(d) { return y(d.price); });
      	/****************************************/

var g = svg.append("g");

d3.text("dataset.csv", function(err, raw) {
            if (err) throw err;
          
            var data = d3.csvParse(raw);
            data.forEach(function(d) {
                d.price = +d.price;
                d.date = parseDate(d.date);
            });

for (i = 0; i < datas.length; ++i) {
                datas[i].maxPrice = d3.max(datas[i].values, function(d) { 
                  return d.price; 
                });
            }
          
            var maxPrice = d3.max(datas, function(d) { return d.maxPrice; });
            for (i = 0; i < datas.length; ++i) {
                for (j = 0; j < datas[i].values.length; ++j) {
                    var elem = datas[i].values[j];
                    elem.base = (maxPrice / 4) * (datas.length - (i + 1));
                    var normalizedPrice = maxPrice * elem.price / datas[i].maxPrice;
                    elem.basedPrice = (normalizedPrice / datas.length) + elem.base;
                }
            }

console.log(datas);
          
          	/********** Gestion des Axes **********/
          	// On crée l'axe X
            function createAxisX () {
              svg.append("g")
                .attr("class", "axis axis--x")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x))
                .transition()
                 .delay(1750).remove();
            }
          
          	// On crée l'axe Y
            function createAxisY () {
              svg.append("g")
                .attr("class", "axis axis--y")
                .attr("transform", "translate(0,0)")
                .call(d3.axisLeft(y).ticks(20))
                .transition()
                 .delay(1750).remove();
            }
          
          	// Creation des axes X et Y
            function createAxes () {
              createAxisX () ;
              createAxisY () ;
            }
          	/****************************************/

// On dessine les courbes en fonction du type d'aire
            function drawAreas(areaFunc, colorOpacity) {
                g.selectAll(".area").data(datas).enter().append("path")
                    .attr("class", "area")
                    .attr("d", function(d) { return areaFunc(d.values) })
                    .attr("fill", function(d, i) { return color(d.key); })
                    .attr("opacity", colorOpacity)
                g.selectAll(".area")
                    .attr("class", "area")
                    .transition().duration(1000)
                    .attr("d", function(d) { return areaFunc(d.values) })
                    .attr("fill", function(d, i) { return color(d.key); })
                    .attr("opacity", colorOpacity);
            }
						
          	/********** Gestion de la Legende **********/
            function rightLegend(upperBound, lowerBound) {
                var legend = svg.selectAll(".legend").data(color.domain())
                    .enter().append("g")
                    .attr("class", "legend")
                    .attr("transform", function(d, i) {
                        var vals = datas[i].values;
                        return "translate(" + (width - 40) + "," +
                            (y((vals[vals.length - 1][upperBound] +
                                vals[vals.length - 1][lowerBound]) / 2)) +
                          				")";
                    })
                svg.selectAll(".legend")
                    .attr("class", "legend")
                    .transition().duration(1000)
                    .attr("transform", function(d, i) {
                        var vals = datas[i].values;
                        return "translate(" + (width - 40) + "," +
                          (y((vals[vals.length - 1][upperBound] +
                              vals[vals.length - 1][lowerBound]) / 2)) +
                          			")";
                    })
                    .select("rect").attr("opacity", 0);
                return legend;
            }
						
          	// On ajoute le texte de la legende
            function legendAppendText(legend) {
                legend.append("text")
                    .attr("x", 50)
                    .attr("y", 9)
                    .attr("dy", ".35em")
                    .style("text-anchor", "start")
                    .text(function(d) { return d; });
            }
          	/****************************************/
          
						/********** Gestion de la Transition des Graphes **********/
          	// Generation du graphe separe
            function separated() {
                y.domain([0, d3.max(data, function(d) { return d.price; })]);
                createAxisX(); 
              	drawAreas(separatedAreas, 1);
                var legend = rightLegend("basedPrice", "base");
                legendAppendText(legend);
                setTimeout(stacked, 2000);
            }
          	/* ---> Transition ---> */
						// Generation du graphe rapproche
            function stacked() {
                y.domain([0, maxY]);
              	createAxes();
                drawAreas(stackedAreas, 1);
                var legend = rightLegend("stackedPrice", "stackedSum");
                legendAppendText(legend);
                setTimeout(centered, 2000);
            }
          	/* ---> Transition ---> */
          	// Generation du graphe centre
          	function centered() {
                y.domain([0, maxY]);
              	createAxes();
                drawAreas(centeredAreas, 1);
                var legend = rightLegend("centeredPrice", "centeredSum");
                legendAppendText(legend);
                setTimeout(transparent, 2000);
            }
						/* ---> Transition ---> */
          	// Generation du graphe transparent
            function transparent() {
                y.domain([0, d3.max(data, function(d) { return d.price; })]);
                createAxes();
              	drawAreas(transparentAreas, .5);
                var legend = rightLegend("basedPrice", "base");
                legendAppendText(legend);
                setTimeout(separated, 2000);
            }
          	/****************************************/
          
          	// On debute la transition par le graphe separe
            separated();

});
    </script>
</body>

https://d3js.org/d3.v4.min.js