added q1 visual

JonahRileyHuggins · Nov 4, 2023 · b1a0223 · b1a0223
1 parent 3c8fb58
commit b1a0223
Showing 1 changed file with 77 additions and 53 deletions.
diff --git a/javascript/q1.js b/javascript/q1.js
@@ -6,65 +6,89 @@
 
 d3.csv("/DataVizDashboard/data/movies_metadata.csv").then(
     function(dataset){
-        var dimensions = {
+
+        //Sort data by year
+        const sort_data = dataset.sort(function(x,y){
+            return d3.ascending(x.release_year, y.release_year)
+        });
+
+        //Aggregate data by year
+        const rev_data = d3.rollup(sort_data, (v) => d3.sum(v, (d) => +d.revenue), (d) => d.release_year);
+
+        console.log(rev_data)
+
+        const dimensions = {
             width: 800,
             height: 400,
-            margin:{
-                top: 20,
-                bottom: 30,
-                right: 20,
-                left: 50
-            }
-        };
+            margin: {
+              top: 40,
+              right: 15,
+              bottom: 50,
+              left: 115,
+            },
+          };
 
         //Create svg
         const svg = d3.select('#q1canvas')
-                      .append('svg')
-                      .attr('width', dimensions.width)
-                      .attr('height', dimensions.height);
-        /*
-        //Ensure year and revenue are numbers
-        dataset.forEach(function(d) {
-            d.release_year = +d.release_year;
-            d.revenue = +d.revenue;
-        });
-        
-        //Axis scales
-        const xScale = d3.scaleLinear()
-                         .domain(d3.extent(dataset, d => d.release_year))
-                         .range([dimensions.margin.left, dimensions.width - dimensions.margin.right]);
-        
-        const yScale = d3.scaleLinear()
-                         .domain([0, d3.max(dataset, d => d.revenue)])
-                         .range([dimensions.height - dimensions.margin.bottom, dimensions.margin.top]);
-        
-        //Create a line
-        const line = d3.line()
-                       .x(d => xScale(d.release_year))
-                       .y(d => yScale(d.revenue));
-        
-        //Create a path for the line
-        const linepath = svg.append("path")
-                            .datum(dataset)
-                            .attr('fill', 'none')
-                            .attr('stroke', 'steelblue')
-                            .attr('stroke-width', 2)
-                            .attr('d', line);
-            
-        //Generate axes
-        const xAxis = d3.axisBottom(xScale);
-        const yAxis = d3.axisLeft(yScale);
+                      .style('width', dimensions.width)
+                      .style('height', dimensions.height);
 
-        //Add axes
-        svg.append('g')
-           .attr('class', 'x-axis')
-           .attr('transform', `translate(0, ${dimensions.height - dimensions.margin.bottom})`)
-           .call(xAxis);
+        //Define axis scales
+        const xScale = d3.scaleTime()
+                         .domain(d3.extent(dataset, function(d) { return new Date(d.release_date); }))
+                         .range([ dimensions.margin.left, dimensions.width - dimensions.margin.right])
+
+         const yScale = d3.scaleLinear()
+                          .domain([0, d3.max(rev_data, function(d) { return +d[1]; })])
+                          .nice()
+                          .range([ dimensions.height-dimensions.margin.bottom,  dimensions.margin.top]);
+
+        //Create axes
+        const minYear = d3.min(rev_data, function(d) { return +d[0] }) + 10 - d3.min(rev_data, function(d) { return +d[0] })%10;
+        const maxYear = d3.max(rev_data, function(d) { return +d[0] }) + 10 - d3.max(rev_data, function(d) { return +d[0] })%10;
+        const tickSize = 10;
+        const tickVals = Array.from({length: (maxYear - minYear)/ tickSize + 1}, (value, index) => new Date(minYear + index*tickSize, 0 , 1));
+        console.log(tickVals);
+        const xAxis = d3.axisBottom(xScale).tickValues(tickVals);
+        const xAxisGroup = svg.append("g")
+                              .call(xAxis)
+                              .style("transform", `translateY(${dimensions.height - dimensions.margin.bottom}px)`)
+                              .attr("color", "black");
+
+        const yAxis = d3.axisLeft(yScale);
+        const yAxisGroup = svg.append("g")
+                              .call(yAxis)
+                              .style("transform", `translateX(${dimensions.margin.left}px`)
+                              .attr("color", "black");
+
+         // Add the line
+        const line = svg.append("path")
+                        .datum(rev_data)
+                        .attr("fill", "none")
+                        .attr("stroke", "blue")
+                        .attr("stroke-width", 1.5)
+                        .attr("d", d3.line()
+                                     .x(function(d) { return xScale(new Date(d[0])) })
+                                     .y(function(d) { return yScale(d[1]) })
+                             );
 
-        svg.append('g')
-           .attr('class', 'y-axis')
-           .attr('transform', `translate(${dimensions.margin.left}, 0)`)
-           .call(yAxis);
-        */
+              // Add X-axis label
+        svg.append("text")
+            .text("Release Year")
+            .attr("x", dimensions.width / 2)
+            .attr("y", dimensions.height - 10) // Adjust the Y position
+            .attr("text-anchor", "middle")
+            .attr("font-size", "14px")
+            .attr("fill", "black");
+
+        // Add Y-axis label
+        svg.append("text")
+           .text("Total Revenue")
+           .attr("x", -dimensions.height / 2) // Rotate the text for vertical orientation
+           .attr("y", 15) // Adjust the Y position
+           .attr("text-anchor", "middle")
+           .attr("font-size", "14px")
+           .attr("fill", "black")
+           .attr("transform", "rotate(-90)"); // Rotate the text for vertical orientation
     }
 )