update,

2025-01-31 22:17:25 +08:00
parent cdc3678990
commit 3688f9ee24
100 changed files with 65454 additions and 0 deletions
--- a/tunmnlu/task_1/Q3-ref/submission111.html
+++ b/tunmnlu/task_1/Q3-ref/submission111.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<!-- cse6242 s21 -->
+
+<!-- run: http-server & -->
+
+<head>
+  <title> 
+	Running Total of TMDb Movies by Year 
+  </title>
+  
+  <style>
+	.bar { fill: steelblue; }
+  </style>
+</head>
+
+<body>
+
+  <script src="lib/d3/d3.min.js"></script>
+  <script src="lib/d3-dsv/d3-dsv.min.js"></script>
+  <script src="lib/d3-fetch/d3-fetch.min.js"></script>
+
+  <script>
+    // define the dimensions and margins for the graph
+	var margin = {top: 20, right: 20, bottom: 30, left: 40},
+		width = 960 - margin.left - margin.right,
+		height = 500 - margin.top - margin.bottom;
+
+    // define function to parse time in years format
+	var parseYear = d3.timeParse("%Y")
+	var parseFormat = d3.timeFormat("%Y")
+	
+    // create scales x & y for X and Y axis and set their ranges
+	var x = d3.scaleBand()
+			  .range([0, width])
+			  .padding(0.3);
+			  
+	var y = d3.scaleLinear()
+			  .range([height, 0]);
+
+
+    // append svg element to the body of the page
+    // set dimensions and position of the svg element
+    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 + ")");
+
+    // Get the data
+	var pathToCsv = "q3.csv";  // path to csv
+
+	d3.dsv(",", pathToCsv, function (d) {
+	 return {
+	 year : parseFormat(parseYear(d.year)),
+	 running_total : +d.running_total
+	 // format data attributes if required
+	 }
+	 }).then(function (data) {
+	 console.log(data);  // you should see the data in your browser's developer tools console 
+      
+      /* Create bar plot using data from csv */
+
+      // set the domains of X and Y scales based on data
+	  x.domain(data.map(function(d) { return d.year; }));
+	  y.domain([0, d3.max(data, function(d) { return d.running_total; })]);
+
+      // Add bars to svg - create new elements based on your data
+	  svg.selectAll(".bar")
+		  .data(data)
+		.enter().append("rect")
+		  .attr("class", "bar")
+		  .attr("x", function(d) { return x(d.year); })
+		  .attr("width", x.bandwidth())
+		  .attr("y", function(d) { return y(d.running_total); })
+		  .attr("height", function(d) { return height - y(d.running_total); });
+
+
+      // Add the X Axis
+	  svg.append("g")
+       .attr("transform", "translate(" + 0 + "," + 300 + ")")
+       .attr("id", "x_axis")
+       .call(d3.axisBottom(x)
+       .tickValues(x.domain().filter(function(d, i, curr) {
+                                      return (d % 10) === 0; }
+                                    ))
+       );
+
+      // Add the text label for X Axis
+      svg.append("g")
+		  .append("text")
+		  .attr("id","x_axis_label")
+		  .attr("y", height + margin.top)
+          .attr("x", (width / 2))
+          .attr("text-anchor", "end")
+          .attr("stroke", "black")
+		  .text("Year");
+
+      // Add the Y Axis
+	  svg.append("g")
+		  .attr("id","y_axis")
+		  .call(d3.axisLeft(y));
+
+      // Add the text label for Ys axis
+      svg.append("g")
+		  .append("text")
+		  .attr("id","y_axis_label")
+		  .attr("transform", "rotate(-90)")
+		  .attr("y", (height / 24))
+          .attr("x", (width /100))
+          .attr("text-anchor", "end")
+          .attr("stroke", "black")
+		  .text("Running Total");
+		  
+	  // Add the Title  
+	  svg.append("text")
+		  .attr("id","title")
+		  .attr("x", (width / 2))             
+		  .attr("y", 0 - (margin.top / 2))
+		  .attr("text-anchor", "middle")  
+		  .style("font-size", "14px") 
+		  .style("text-decoration", "underline")  
+		  .text("Running Total of TMDb Movies by Year");
+      
+	  // Add the credit 
+	  svg.append("text")
+		  .attr("id","credit")
+		  .attr("x", (width *7 / 8))             
+		  .attr("y", height + margin.bottom)
+		  .attr("text-anchor", "middle")  
+		  .style("font-size", "9px") 
+		  .style("text-decoration", "underline")  
+		  .text("kwang467");
+
+    }).catch(function (error) {
+      console.log(error);
+    });
+
+
+  </script>
+
+</body>