DIBUJADO EL GRAFICO DE LINEA

src/javascript/dibuja_graficos.js

@@ -8,8 +8,9 @@ function draw_histogram(w, h) {
         .domain(get5YearsDate())
         .rangeRound([0,w])
         .padding(.1);
+
     var y = d3.scaleLinear()
-        .domain([0, 3000])
+        .domain([0, d3.max(sales["1_year"])])
         .range([h,0]);
 
     var xAxis = d3.axisBottom(x)
@@ -21,9 +22,14 @@ function draw_histogram(w, h) {
     var svg = d3.select("#tabs-1")
         .append("svg")
         .attr("width", w + marginX + marginX)
-        .attr("height", h + marginY + marginY).append("g")
+        .attr("height", 0).append("g")
         .attr("transform","translate(" + marginX + "," + marginY + ")");
 
+    d3.selectAll("svg")
+        .transition()
+        .duration(2000)
+        .attr("height", h + marginY + marginY);
+
     svg.append("g").attr("class", "x axis")
         .attr("transform", "translate(0," + h + ")").call(xAxis);
     
@@ -43,12 +49,11 @@ function draw_histogram(w, h) {
             .attr("height", function(d) {return 0;})
             .attr("fill", function() {return "rgb(150,150,255)";})
             .transition(t)
-            .delay(100)
+            .delay(1000)
             .attr("x", function(d) {return x(d.fecha);})
             .attr("y", function(d) {return y(d.global_sales);})
             .attr("width", x.bandwidth())
-            .attr("height", function(d) {return h-y(d.global_sales);})
-            .attr("fill", function() {return "rgb(150,150,255)";});
+            .attr("height", function(d) {return h-y(d.global_sales);});
     
 }
 
@@ -62,7 +67,7 @@ function draw_area_size(w, h) {
         .domain([a[0], a[l-1]])
         .range([0,w]);
     var y = d3.scaleLinear()
-        .domain([0, 700])
+        .domain([0, 400])
         .range([h,0]);
 
     var xAxis = d3.axisBottom(x)
@@ -73,15 +78,94 @@ function draw_area_size(w, h) {
 
     var svg2 = d3.select("#tabs-2")
         .append("svg")
+        .attr("id", "svg-2")
         .attr("width", w + marginX + marginX)
-        .attr("height", h + marginY + marginY).append("g")
-        .attr("transform","translate(" + marginX + "," + marginY + ")");
+        .attr("height", 0).append("g")
+        .attr("transform","translate(" + marginX + "," + marginY + ")")
+    
+    d3.select("#svg-2")
+        .transition()
+        .duration(2000)
+        .delay(100)
+        .attr("height", h+marginY + marginY);
     
     svg2.append("g").attr("class", "x axis")
         .attr("transform", "translate(0," + h + ")").call(xAxis);
     
     svg2.append("g").attr("class", "y axis")
         .call(yAxis);
+  
+    var area_na = d3.area()
+        .x(d => x(d.fecha))
+        .y1(d => y(d.na_sales))
+        .y0(y(0));
+
+    var area_eu = d3.area()
+        .x(d => x(d.fecha))
+        .y1(d => y(d.eu_sales))
+        .y0(y(0));
+    
+    var area_jp = d3.area()
+        .x(d => x(d.fecha))
+        .y1(d => y(d.jp_sales))
+        .y0(y(0))
+
+    var area_ot = d3.area()
+        .x(d => x(d.fecha))
+        .y1(d => y(d.other_sales))
+        .y0(y(0))
+    
+    var area_gb = d3.area()
+        .x(d => x(d.fecha))
+        .y1(d => y(d.global_sales))
+        .y0(y(0))
+    
+    var line_na = d3.line()
+        .x(d => x(d.fecha))
+        .y(d => y(d.na_sales));
+    
+    var line_eu = d3.line()
+        .x(d => x(d.fecha))
+        .y(d => y(d.eu_sales));
+    
+    var line_jp = d3.line()
+        .x(d => x(d.fecha))
+        .y(d => y(d.jp_sales));
+
+    var line_ot = d3.line()
+        .x(d => x(d.fecha))
+        .y(d => y(d.other_sales));
+
+    svg2.append("path")
+        .attr("class", "lna")
+        .attr("fill", "none")
+        .attr("stroke", "rgb(150,150,0")
+        .attr("stroke-width", 1.5)
+        .attr("d", line_na(sales["1_year"]));
+ 
+    svg2.append("path")
+        .attr("class", "leu")
+        .attr("fill", "none")
+        .attr("stroke", "rgb(50,50,255)")
+        .attr("stroke-width", 1.5)
+        .attr("d", line_eu(sales["1_year"]));
+
+    svg2.append("path")
+        .attr("class", "ljp")
+        .attr("fill", "none")
+        .attr("stroke", "rgb(50,50,255)")
+        .attr("stroke-width", 1.5)
+        .attr("opacity", 0.5)
+        .attr("d", line_jp(sales["1_year"]));
+    
+    svg2.append("path")
+        .attr("class", "lot")
+        .attr("fill", "none")
+        .attr("stroke", "rgb(0,100,0)")
+        .attr("stroke-width", 1.5)
+        .attr("opacity", 0.7)
+        .attr("d", line_ot(sales["1_year"]));
+
 }
 
 function dibuja_graficos(w,h) {
@@ -89,3 +173,4 @@ function dibuja_graficos(w,h) {
     draw_area_size(w,h);
 }
 
+