louiscklaw/004_comission
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update,

Browse Source
This commit is contained in:
louiscklaw
2025-01-31 22:17:25 +08:00
parent cdc3678990
commit 3688f9ee24
100 changed files with 65454 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
tunmnlu/task_1/Q3/rev0/1/part1.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
tunmnlu/task_1/Q3/rev0/1/part_2_3.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
tunmnlu/task_1/Q3/rev0/1/part_3_4.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
tunmnlu/task_1/Q3/rev0/2023-09-02_13-31.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

150
tunmnlu/task_1/Q3/rev0/Q3.html Normal file
View File

@@ -0,0 +1,150 @@
<!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: 50, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const full_width = 960;
const full_height = 500;
const graph_content_width = 960 - (margin.left + margin.right)
const graph_content_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, graph_content_width])
.padding(0.3);
var y = d3.scaleLinear()
.range([graph_content_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", full_width)
.attr("height", full_height)
.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 graph_content_height - y(d.running_total); });
// Add the X Axis
svg.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0, "+graph_content_height+")")
.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", graph_content_height + margin.top+ 20)
.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("transform", `rotate(-90), translate(${(-height/2)+margin.top+30},${-margin.left + 20})`)
// .attr("y", (graph_content_height / 24))
// .attr("x", (graph_content_width /100))
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Running Total");
// Add the Title
svg.append("text")
.attr("id","title")
.attr("x", (graph_content_width / 2))
.attr("y", -(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", graph_content_width - 20 )
.attr("y", graph_content_height+margin.top + 20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("text-decoration", "underline")
.text("tlou31");
}).catch(function (error) {
console.log(error);
});
</script>
</body>

9
tunmnlu/task_1/Q3/rev0/answer.rxt Normal file
View File

@@ -0,0 +1,9 @@
1. 呢個特別D，如果你要行要用呢句，唔可以就咁打開個 html file 去睇
2. 睇嘅方法
3. 佢要交嘅只有 Q3.html
4. 我比埋其餘果D file 比你，不過其實我冇改過
我都睇過果３幅圖，不過根據佢之下果個 dom tree
佢要收嘅只有一幅，所以想麻煩你幫個忙試一次 thanks.
ttps://share.louislabs.com/g/u-bkzl8iIyD

150
tunmnlu/task_1/Q3/rev0/deliver/_no_submit/Q3.html Normal file
View File

@@ -0,0 +1,150 @@
<!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: 50, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const full_width = 960;
const full_height = 500;
const graph_content_width = 960 - (margin.left + margin.right)
const graph_content_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, graph_content_width])
.padding(0.3);
var y = d3.scaleLinear()
.range([graph_content_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", full_width)
.attr("height", full_height)
.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 graph_content_height - y(d.running_total); });
// Add the X Axis
svg.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0, "+graph_content_height+")")
.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", graph_content_height + margin.top+ 20)
.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("transform", `rotate(-90), translate(${(-height/2)+margin.top+30},${-margin.left + 20})`)
// .attr("y", (graph_content_height / 24))
// .attr("x", (graph_content_width /100))
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Running Total");
// Add the Title
svg.append("text")
.attr("id","title")
.attr("x", (graph_content_width / 2))
.attr("y", -(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", graph_content_width - 20 )
.attr("y", graph_content_height+margin.top + 20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("text-decoration", "underline")
.text("tlou31");
}).catch(function (error) {
console.log(error);
});
</script>
</body>

128
tunmnlu/task_1/Q3/rev0/deliver/_no_submit/q3.csv Normal file
View File

@@ -0,0 +1,128 @@
year,running_total
1884,1
1885,1
1886,3
1887,11
1888,12
1889,12
1890,15
1891,17
1892,24
1893,25
1894,59
1895,89
1896,246
1897,430
1898,616
1899,775
1900,985
1901,1180
1902,1328
1903,1539
1904,1725
1905,1853
1906,1996
1907,2110
1908,2287
1909,2502
1910,2795
1911,3159
1912,3690
1913,4167
1914,4564
1915,5021
1916,5558
1917,6090
1918,6540
1919,6975
1920,7486
1921,7959
1922,8405
1923,8892
1924,9443
1925,10083
1926,10826
1927,11566
1928,12296
1929,13060
1930,13924
1931,14824
1932,15868
1933,16831
1934,17852
1935,18942
1936,20002
1937,21098
1938,22102
1939,23065
1940,24060
1941,25080
1942,26058
1943,26988
1944,27875
1945,28772
1946,29605
1947,30365
1948,31228
1949,32110
1950,33023
1951,33897
1952,34760
1953,35655
1954,36450
1955,37293
1956,38132
1957,39017
1958,39857
1959,40635
1960,41379
1961,42152
1962,42955
1963,43765
1964,44724
1965,45797
1966,46894
1967,48109
1968,49366
1969,50710
1970,52143
1971,53514
1972,54985
1973,56371
1974,57824
1975,59148
1976,60465
1977,61732
1978,63177
1979,64632
1980,66054
1981,67413
1982,68793
1983,70278
1984,71846
1985,73449
1986,75128
1987,77073
1988,79082
1989,81089
1990,83122
1991,85189
1992,87268
1993,89368
1994,91646
1995,94024
1996,96467
1997,98981
1998,101690
1999,104570
2000,107622
2001,110974
2002,114763
2003,118990
2004,123698
2005,129124
2006,134943
2007,140902
2008,147303
2009,154027
2010,160885
1 year running_total
2 1884 1
3 1885 1
4 1886 3
5 1887 11
6 1888 12
7 1889 12
8 1890 15
9 1891 17
10 1892 24
11 1893 25
12 1894 59
13 1895 89
14 1896 246
15 1897 430
16 1898 616
17 1899 775
18 1900 985
19 1901 1180
20 1902 1328
21 1903 1539
22 1904 1725
23 1905 1853
24 1906 1996
25 1907 2110
26 1908 2287
27 1909 2502
28 1910 2795
29 1911 3159
30 1912 3690
31 1913 4167
32 1914 4564
33 1915 5021
34 1916 5558
35 1917 6090
36 1918 6540
37 1919 6975
38 1920 7486
39 1921 7959
40 1922 8405
41 1923 8892
42 1924 9443
43 1925 10083
44 1926 10826
45 1927 11566
46 1928 12296
47 1929 13060
48 1930 13924
49 1931 14824
50 1932 15868
51 1933 16831
52 1934 17852
53 1935 18942
54 1936 20002
55 1937 21098
56 1938 22102
57 1939 23065
58 1940 24060
59 1941 25080
60 1942 26058
61 1943 26988
62 1944 27875
63 1945 28772
64 1946 29605
65 1947 30365
66 1948 31228
67 1949 32110
68 1950 33023
69 1951 33897
70 1952 34760
71 1953 35655
72 1954 36450
73 1955 37293
74 1956 38132
75 1957 39017
76 1958 39857
77 1959 40635
78 1960 41379
79 1961 42152
80 1962 42955
81 1963 43765
82 1964 44724
83 1965 45797
84 1966 46894
85 1967 48109
86 1968 49366
87 1969 50710
88 1970 52143
89 1971 53514
90 1972 54985
91 1973 56371
92 1974 57824
93 1975 59148
94 1976 60465
95 1977 61732
96 1978 63177
97 1979 64632
98 1980 66054
99 1981 67413
100 1982 68793
101 1983 70278
102 1984 71846
103 1985 73449
104 1986 75128
105 1987 77073
106 1988 79082
107 1989 81089
108 1990 83122
109 1991 85189
110 1992 87268
111 1993 89368
112 1994 91646
113 1995 94024
114 1996 96467
115 1997 98981
116 1998 101690
117 1999 104570
118 2000 107622
119 2001 110974
120 2002 114763
121 2003 118990
122 2004 123698
123 2005 129124
124 2006 134943
125 2007 140902
126 2008 147303
127 2009 154027
128 2010 160885

150
tunmnlu/task_1/Q3/rev0/deliver/submit/Q3.html Normal file
View File

@@ -0,0 +1,150 @@
<!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: 50, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const full_width = 960;
const full_height = 500;
const graph_content_width = 960 - (margin.left + margin.right)
const graph_content_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, graph_content_width])
.padding(0.3);
var y = d3.scaleLinear()
.range([graph_content_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", full_width)
.attr("height", full_height)
.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 graph_content_height - y(d.running_total); });
// Add the X Axis
svg.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0, "+graph_content_height+")")
.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", graph_content_height + margin.top+ 20)
.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("transform", `rotate(-90), translate(${(-height/2)+margin.top+30},${-margin.left + 20})`)
// .attr("y", (graph_content_height / 24))
// .attr("x", (graph_content_width /100))
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Running Total");
// Add the Title
svg.append("text")
.attr("id","title")
.attr("x", (graph_content_width / 2))
.attr("y", -(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", graph_content_width - 20 )
.attr("y", graph_content_height+margin.top + 20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("text-decoration", "underline")
.text("tlou31");
}).catch(function (error) {
console.log(error);
});
</script>
</body>

128
tunmnlu/task_1/Q3/rev0/q3.csv Normal file
View File

@@ -0,0 +1,128 @@
year,running_total
1884,1
1885,1
1886,3
1887,11
1888,12
1889,12
1890,15
1891,17
1892,24
1893,25
1894,59
1895,89
1896,246
1897,430
1898,616
1899,775
1900,985
1901,1180
1902,1328
1903,1539
1904,1725
1905,1853
1906,1996
1907,2110
1908,2287
1909,2502
1910,2795
1911,3159
1912,3690
1913,4167
1914,4564
1915,5021
1916,5558
1917,6090
1918,6540
1919,6975
1920,7486
1921,7959
1922,8405
1923,8892
1924,9443
1925,10083
1926,10826
1927,11566
1928,12296
1929,13060
1930,13924
1931,14824
1932,15868
1933,16831
1934,17852
1935,18942
1936,20002
1937,21098
1938,22102
1939,23065
1940,24060
1941,25080
1942,26058
1943,26988
1944,27875
1945,28772
1946,29605
1947,30365
1948,31228
1949,32110
1950,33023
1951,33897
1952,34760
1953,35655
1954,36450
1955,37293
1956,38132
1957,39017
1958,39857
1959,40635
1960,41379
1961,42152
1962,42955
1963,43765
1964,44724
1965,45797
1966,46894
1967,48109
1968,49366
1969,50710
1970,52143
1971,53514
1972,54985
1973,56371
1974,57824
1975,59148
1976,60465
1977,61732
1978,63177
1979,64632
1980,66054
1981,67413
1982,68793
1983,70278
1984,71846
1985,73449
1986,75128
1987,77073
1988,79082
1989,81089
1990,83122
1991,85189
1992,87268
1993,89368
1994,91646
1995,94024
1996,96467
1997,98981
1998,101690
1999,104570
2000,107622
2001,110974
2002,114763
2003,118990
2004,123698
2005,129124
2006,134943
2007,140902
2008,147303
2009,154027
2010,160885
1 year running_total
2 1884 1
3 1885 1
4 1886 3
5 1887 11
6 1888 12
7 1889 12
8 1890 15
9 1891 17
10 1892 24
11 1893 25
12 1894 59
13 1895 89
14 1896 246
15 1897 430
16 1898 616
17 1899 775
18 1900 985
19 1901 1180
20 1902 1328
21 1903 1539
22 1904 1725
23 1905 1853
24 1906 1996
25 1907 2110
26 1908 2287
27 1909 2502
28 1910 2795
29 1911 3159
30 1912 3690
31 1913 4167
32 1914 4564
33 1915 5021
34 1916 5558
35 1917 6090
36 1918 6540
37 1919 6975
38 1920 7486
39 1921 7959
40 1922 8405
41 1923 8892
42 1924 9443
43 1925 10083
44 1926 10826
45 1927 11566
46 1928 12296
47 1929 13060
48 1930 13924
49 1931 14824
50 1932 15868
51 1933 16831
52 1934 17852
53 1935 18942
54 1936 20002
55 1937 21098
56 1938 22102
57 1939 23065
58 1940 24060
59 1941 25080
60 1942 26058
61 1943 26988
62 1944 27875
63 1945 28772
64 1946 29605
65 1947 30365
66 1948 31228
67 1949 32110
68 1950 33023
69 1951 33897
70 1952 34760
71 1953 35655
72 1954 36450
73 1955 37293
74 1956 38132
75 1957 39017
76 1958 39857
77 1959 40635
78 1960 41379
79 1961 42152
80 1962 42955
81 1963 43765
82 1964 44724
83 1965 45797
84 1966 46894
85 1967 48109
86 1968 49366
87 1969 50710
88 1970 52143
89 1971 53514
90 1972 54985
91 1973 56371
92 1974 57824
93 1975 59148
94 1976 60465
95 1977 61732
96 1978 63177
97 1979 64632
98 1980 66054
99 1981 67413
100 1982 68793
101 1983 70278
102 1984 71846
103 1985 73449
104 1986 75128
105 1987 77073
106 1988 79082
107 1989 81089
108 1990 83122
109 1991 85189
110 1992 87268
111 1993 89368
112 1994 91646
113 1995 94024
114 1996 96467
115 1997 98981
116 1998 101690
117 1999 104570
118 2000 107622
119 2001 110974
120 2002 114763
121 2003 118990
122 2004 123698
123 2005 129124
124 2006 134943
125 2007 140902
126 2008 147303
127 2009 154027
128 2010 160885

BIN
tunmnlu/task_1/Q3/rev1/1/part1.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
tunmnlu/task_1/Q3/rev1/1/part_2_3.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
tunmnlu/task_1/Q3/rev1/1/part_3_4.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
tunmnlu/task_1/Q3/rev1/2023-09-02_13-31.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

149
tunmnlu/task_1/Q3/rev1/Q3.html Normal file
View File

@@ -0,0 +1,149 @@
<!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: 50, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const full_width = 960;
const full_height = 500;
const graph_content_width = 960 - (margin.left + margin.right)
const graph_content_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, graph_content_width])
.padding(0.3);
var y = d3.scaleLinear()
.range([graph_content_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("id","svg1")
.attr("width", full_width)
.attr("height", full_height)
.append("g")
.attr("id","container")
.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.append("g")
.attr("id", "bars")
.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 graph_content_height - y(d.running_total); });
// Add the X Axis
svg.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0, "+graph_content_height+")")
.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("text")
.attr("id","x_axis_label")
.attr("y", graph_content_height + margin.top+ 20)
.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("text")
.attr("id","y_axis_label")
.attr("transform", `rotate(-90), translate(${(-height/2)+margin.top+30},${-margin.left + 20})`)
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Running Total");
// Add the Title
svg.append("text")
.attr("id","title")
.attr("x", (graph_content_width / 2))
.attr("y", -(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", graph_content_width - 20 )
.attr("y", graph_content_height+margin.top + 20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("text-decoration", "underline")
.text("tlou31");
}).catch(function (error) {
console.log(error);
});
</script>
</body>

9
tunmnlu/task_1/Q3/rev1/answer.rxt Normal file
View File

@@ -0,0 +1,9 @@
1. 呢個特別D，如果你要行要用呢句，唔可以就咁打開個 html file 去睇
2. 睇嘅方法
3. 佢要交嘅只有 Q3.html
4. 我比埋其餘果D file 比你，不過其實我冇改過
我都睇過果３幅圖，不過根據佢之下果個 dom tree
佢要收嘅只有一幅，所以想麻煩你幫個忙試一次 thanks.
ttps://share.louislabs.com/g/u-bkzl8iIyD

209
tunmnlu/task_1/Q3/rev1/deliver/_no_submit/Q3-correct.html Normal file
View File

@@ -0,0 +1,209 @@
<!doctype html>
<!-- cse6242 -->
<!-- run: http-server & -->
<head>
<!-- define CSS rules -->
<style></style>
<title>Running Total of TMDb Movies by Year</title>
</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 width = 960;
var height = 500;
var margin = { top: 30, right: 50, bottom: 30, left: 0 };
var cont_width = width - margin.left - margin.right;
var cont_height = height - margin.top - margin.bottom;
// define function to parse time in years format
var parseTime = d3.timeParse("%Y");
// create scales x & y for X and Y axis and set their ranges
var x = d3.scaleTime().range([margin.left, cont_width - margin.right]);
var y = d3.scaleLinear().range([cont_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("id", "svg1")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "container")
.attr("transform", "translate(80,20)");
// Get the data
var pathToCsv = "q3.csv"; // path to csv
d3.dsv(",", pathToCsv, function (d) {
return {
// format data attributes if required-- this function returns a dictionary
year: parseTime(d.year),
running_total: +d.running_total,
};
})
.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(
d3.extent(data, 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
.append("g")
.attr("id", "bars")
.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(d.year);
})
.attr("y", function (d) {
return y(d.running_total);
})
.attr("width", 3)
.attr("height", function (d) {
return cont_height - y(d.running_total);
})
.attr("fill", "blue");
// Add the X Axis
var x_axis = d3.axisBottom(x).ticks(d3.timeYear.every(10));
svg
.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0," + cont_height + ")")
.call(x_axis);
// Add the text label for X Axis
svg
.append("text")
.attr("id", "x_axis_label")
.attr("transform", "translate(450, 475)")
.attr("text-anchor", "middle")
.text("Year");
// Add the Y Axis
var y_axis = d3.axisLeft(y).ticks(10);
svg
.append("g")
.attr("id", "y_axis")
.attr("transform", "translate(" + margin.left + ", 0)")
.call(y_axis);
// Add the text label for Y axis
svg
.append("text")
.attr("id", "y_axis_label")
.attr("transform", "rotate(-90)")
.attr("x", -cont_height / 2)
.attr("y", 30)
.attr("dy", "-5em")
.attr("text-anchor", "end")
.text("Running Total");
//add GT Username
svg
.append("text")
.attr("id", "credit")
.attr("transform", "translate(800,475)")
.attr("text-anchor", "right")
.text("tlou31");
// add title
svg
.append("text")
.attr("id", "title")
.attr("transform", "translate(" + width * 0.3 + ", " + 0 + ")")
.attr("text-anchor", "right")
.text("Running Total of TMDb Movies by Year");
})
.catch(function (error) {
console.log(error);
});
</script>
<div id="first_x" style="font-size: 3rem"></div>
<div id="second_x" style="font-size: 3rem"></div>
<div id="third_x" style="font-size: 3rem"></div>
<div id="last_third_x" style="font-size: 3rem"></div>
<div id="last_two_x" style="font-size: 3rem"></div>
<div id="last_x" style="font-size: 3rem"></div>
<script>
window.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
console.log(
document.querySelectorAll("rect.bar").item(0).getAttribute("x"),
);
console.log(
document.querySelectorAll("rect.bar").item(1).getAttribute("x"),
);
console.log(
document.querySelectorAll("rect.bar").item(125).getAttribute("x"),
);
console.log(
document.querySelectorAll("rect.bar").item(126).getAttribute("x"),
);
document.querySelector("#first_x").textContent =
Math.abs(
document.querySelectorAll("rect.bar").item(0).getAttribute("x") - 0,
) < 0.05;
document.querySelector("#second_x").textContent =
Math.abs(
document.querySelectorAll("rect.bar").item(1).getAttribute("x") -
6.84,
) < 0.05;
document.querySelector("#third_x").textContent =
Math.abs(
document.querySelectorAll("rect.bar").item(2).getAttribute("x") -
13.66,
) < 0.05;
document.querySelector("#last_third_x").textContent =
Math.abs(
document.querySelectorAll("rect.bar").item(124).getAttribute("x") -
846.34,
) < 0.05;
document.querySelector("#last_two_x").textContent =
Math.abs(
document.querySelectorAll("rect.bar").item(125).getAttribute("x") -
853.18,
) < 0.05;
document.querySelector("#last_x").textContent =
Math.abs(
document.querySelectorAll("rect.bar").item(126).getAttribute("x") -
860.0,
) < 0.05;
}, 1000);
});
</script>
</body>

150
tunmnlu/task_1/Q3/rev1/deliver/_no_submit/Q3.html Normal file
View File

@@ -0,0 +1,150 @@
<!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: 50, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const full_width = 960;
const full_height = 500;
const graph_content_width = 960 - (margin.left + margin.right)
const graph_content_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, graph_content_width])
.padding(0.3);
var y = d3.scaleLinear()
.range([graph_content_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", full_width)
.attr("height", full_height)
.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 graph_content_height - y(d.running_total); });
// Add the X Axis
svg.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0, "+graph_content_height+")")
.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", graph_content_height + margin.top+ 20)
.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("transform", `rotate(-90), translate(${(-height/2)+margin.top+30},${-margin.left + 20})`)
// .attr("y", (graph_content_height / 24))
// .attr("x", (graph_content_width /100))
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Running Total");
// Add the Title
svg.append("text")
.attr("id","title")
.attr("x", (graph_content_width / 2))
.attr("y", -(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", graph_content_width - 20 )
.attr("y", graph_content_height+margin.top + 20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("text-decoration", "underline")
.text("tlou31");
}).catch(function (error) {
console.log(error);
});
</script>
</body>

128
tunmnlu/task_1/Q3/rev1/deliver/_no_submit/q3.csv Normal file
View File

@@ -0,0 +1,128 @@
year,running_total
1884,1
1885,1
1886,3
1887,11
1888,12
1889,12
1890,15
1891,17
1892,24
1893,25
1894,59
1895,89
1896,246
1897,430
1898,616
1899,775
1900,985
1901,1180
1902,1328
1903,1539
1904,1725
1905,1853
1906,1996
1907,2110
1908,2287
1909,2502
1910,2795
1911,3159
1912,3690
1913,4167
1914,4564
1915,5021
1916,5558
1917,6090
1918,6540
1919,6975
1920,7486
1921,7959
1922,8405
1923,8892
1924,9443
1925,10083
1926,10826
1927,11566
1928,12296
1929,13060
1930,13924
1931,14824
1932,15868
1933,16831
1934,17852
1935,18942
1936,20002
1937,21098
1938,22102
1939,23065
1940,24060
1941,25080
1942,26058
1943,26988
1944,27875
1945,28772
1946,29605
1947,30365
1948,31228
1949,32110
1950,33023
1951,33897
1952,34760
1953,35655
1954,36450
1955,37293
1956,38132
1957,39017
1958,39857
1959,40635
1960,41379
1961,42152
1962,42955
1963,43765
1964,44724
1965,45797
1966,46894
1967,48109
1968,49366
1969,50710
1970,52143
1971,53514
1972,54985
1973,56371
1974,57824
1975,59148
1976,60465
1977,61732
1978,63177
1979,64632
1980,66054
1981,67413
1982,68793
1983,70278
1984,71846
1985,73449
1986,75128
1987,77073
1988,79082
1989,81089
1990,83122
1991,85189
1992,87268
1993,89368
1994,91646
1995,94024
1996,96467
1997,98981
1998,101690
1999,104570
2000,107622
2001,110974
2002,114763
2003,118990
2004,123698
2005,129124
2006,134943
2007,140902
2008,147303
2009,154027
2010,160885
1 year running_total
2 1884 1
3 1885 1
4 1886 3
5 1887 11
6 1888 12
7 1889 12
8 1890 15
9 1891 17
10 1892 24
11 1893 25
12 1894 59
13 1895 89
14 1896 246
15 1897 430
16 1898 616
17 1899 775
18 1900 985
19 1901 1180
20 1902 1328
21 1903 1539
22 1904 1725
23 1905 1853
24 1906 1996
25 1907 2110
26 1908 2287
27 1909 2502
28 1910 2795
29 1911 3159
30 1912 3690
31 1913 4167
32 1914 4564
33 1915 5021
34 1916 5558
35 1917 6090
36 1918 6540
37 1919 6975
38 1920 7486
39 1921 7959
40 1922 8405
41 1923 8892
42 1924 9443
43 1925 10083
44 1926 10826
45 1927 11566
46 1928 12296
47 1929 13060
48 1930 13924
49 1931 14824
50 1932 15868
51 1933 16831
52 1934 17852
53 1935 18942
54 1936 20002
55 1937 21098
56 1938 22102
57 1939 23065
58 1940 24060
59 1941 25080
60 1942 26058
61 1943 26988
62 1944 27875
63 1945 28772
64 1946 29605
65 1947 30365
66 1948 31228
67 1949 32110
68 1950 33023
69 1951 33897
70 1952 34760
71 1953 35655
72 1954 36450
73 1955 37293
74 1956 38132
75 1957 39017
76 1958 39857
77 1959 40635
78 1960 41379
79 1961 42152
80 1962 42955
81 1963 43765
82 1964 44724
83 1965 45797
84 1966 46894
85 1967 48109
86 1968 49366
87 1969 50710
88 1970 52143
89 1971 53514
90 1972 54985
91 1973 56371
92 1974 57824
93 1975 59148
94 1976 60465
95 1977 61732
96 1978 63177
97 1979 64632
98 1980 66054
99 1981 67413
100 1982 68793
101 1983 70278
102 1984 71846
103 1985 73449
104 1986 75128
105 1987 77073
106 1988 79082
107 1989 81089
108 1990 83122
109 1991 85189
110 1992 87268
111 1993 89368
112 1994 91646
113 1995 94024
114 1996 96467
115 1997 98981
116 1998 101690
117 1999 104570
118 2000 107622
119 2001 110974
120 2002 114763
121 2003 118990
122 2004 123698
123 2005 129124
124 2006 134943
125 2007 140902
126 2008 147303
127 2009 154027
128 2010 160885

150
tunmnlu/task_1/Q3/rev1/deliver/submit/Q3.html Normal file
View File

@@ -0,0 +1,150 @@
<!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: 50, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const full_width = 960;
const full_height = 500;
const graph_content_width = 960 - (margin.left + margin.right)
const graph_content_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, graph_content_width])
.padding(0.3);
var y = d3.scaleLinear()
.range([graph_content_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", full_width)
.attr("height", full_height)
.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 graph_content_height - y(d.running_total); });
// Add the X Axis
svg.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0, "+graph_content_height+")")
.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", graph_content_height + margin.top+ 20)
.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("transform", `rotate(-90), translate(${(-height/2)+margin.top+30},${-margin.left + 20})`)
// .attr("y", (graph_content_height / 24))
// .attr("x", (graph_content_width /100))
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Running Total");
// Add the Title
svg.append("text")
.attr("id","title")
.attr("x", (graph_content_width / 2))
.attr("y", -(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", graph_content_width - 20 )
.attr("y", graph_content_height+margin.top + 20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("text-decoration", "underline")
.text("tlou31");
}).catch(function (error) {
console.log(error);
});
</script>
</body>

128
tunmnlu/task_1/Q3/rev1/q3.csv Normal file
View File

@@ -0,0 +1,128 @@
year,running_total
1884,1
1885,1
1886,3
1887,11
1888,12
1889,12
1890,15
1891,17
1892,24
1893,25
1894,59
1895,89
1896,246
1897,430
1898,616
1899,775
1900,985
1901,1180
1902,1328
1903,1539
1904,1725
1905,1853
1906,1996
1907,2110
1908,2287
1909,2502
1910,2795
1911,3159
1912,3690
1913,4167
1914,4564
1915,5021
1916,5558
1917,6090
1918,6540
1919,6975
1920,7486
1921,7959
1922,8405
1923,8892
1924,9443
1925,10083
1926,10826
1927,11566
1928,12296
1929,13060
1930,13924
1931,14824
1932,15868
1933,16831
1934,17852
1935,18942
1936,20002
1937,21098
1938,22102
1939,23065
1940,24060
1941,25080
1942,26058
1943,26988
1944,27875
1945,28772
1946,29605
1947,30365
1948,31228
1949,32110
1950,33023
1951,33897
1952,34760
1953,35655
1954,36450
1955,37293
1956,38132
1957,39017
1958,39857
1959,40635
1960,41379
1961,42152
1962,42955
1963,43765
1964,44724
1965,45797
1966,46894
1967,48109
1968,49366
1969,50710
1970,52143
1971,53514
1972,54985
1973,56371
1974,57824
1975,59148
1976,60465
1977,61732
1978,63177
1979,64632
1980,66054
1981,67413
1982,68793
1983,70278
1984,71846
1985,73449
1986,75128
1987,77073
1988,79082
1989,81089
1990,83122
1991,85189
1992,87268
1993,89368
1994,91646
1995,94024
1996,96467
1997,98981
1998,101690
1999,104570
2000,107622
2001,110974
2002,114763
2003,118990
2004,123698
2005,129124
2006,134943
2007,140902
2008,147303
2009,154027
2010,160885
1 year running_total
2 1884 1
3 1885 1
4 1886 3
5 1887 11
6 1888 12
7 1889 12
8 1890 15
9 1891 17
10 1892 24
11 1893 25
12 1894 59
13 1895 89
14 1896 246
15 1897 430
16 1898 616
17 1899 775
18 1900 985
19 1901 1180
20 1902 1328
21 1903 1539
22 1904 1725
23 1905 1853
24 1906 1996
25 1907 2110
26 1908 2287
27 1909 2502
28 1910 2795
29 1911 3159
30 1912 3690
31 1913 4167
32 1914 4564
33 1915 5021
34 1916 5558
35 1917 6090
36 1918 6540
37 1919 6975
38 1920 7486
39 1921 7959
40 1922 8405
41 1923 8892
42 1924 9443
43 1925 10083
44 1926 10826
45 1927 11566
46 1928 12296
47 1929 13060
48 1930 13924
49 1931 14824
50 1932 15868
51 1933 16831
52 1934 17852
53 1935 18942
54 1936 20002
55 1937 21098
56 1938 22102
57 1939 23065
58 1940 24060
59 1941 25080
60 1942 26058
61 1943 26988
62 1944 27875
63 1945 28772
64 1946 29605
65 1947 30365
66 1948 31228
67 1949 32110
68 1950 33023
69 1951 33897
70 1952 34760
71 1953 35655
72 1954 36450
73 1955 37293
74 1956 38132
75 1957 39017
76 1958 39857
77 1959 40635
78 1960 41379
79 1961 42152
80 1962 42955
81 1963 43765
82 1964 44724
83 1965 45797
84 1966 46894
85 1967 48109
86 1968 49366
87 1969 50710
88 1970 52143
89 1971 53514
90 1972 54985
91 1973 56371
92 1974 57824
93 1975 59148
94 1976 60465
95 1977 61732
96 1978 63177
97 1979 64632
98 1980 66054
99 1981 67413
100 1982 68793
101 1983 70278
102 1984 71846
103 1985 73449
104 1986 75128
105 1987 77073
106 1988 79082
107 1989 81089
108 1990 83122
109 1991 85189
110 1992 87268
111 1993 89368
112 1994 91646
113 1995 94024
114 1996 96467
115 1997 98981
116 1998 101690
117 1999 104570
118 2000 107622
119 2001 110974
120 2002 114763
121 2003 118990
122 2004 123698
123 2005 129124
124 2006 134943
125 2007 140902
126 2008 147303
127 2009 154027
128 2010 160885

BIN
tunmnlu/task_1/Q3/rev2/1/08605ed1-d96c-4d5d-9505-f19d6ae379d3_progressive.jpg (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
tunmnlu/task_1/Q3/rev2/2023-09-02_13-31.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

151
tunmnlu/task_1/Q3/rev2/Q3.html Normal file
View File

@@ -0,0 +1,151 @@
<!doctype html>
<!-- cse6242 -->
<!-- run: http-server & -->
<head>
<!-- define CSS rules -->
<style></style>
<title>Running Total of TMDb Movies by Year</title>
</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 width = 960;
var height = 500;
var margin = { top: 30, right: 50, bottom: 30, left: 0 };
var cont_width = width - margin.left - margin.right;
var cont_height = height - margin.top - margin.bottom;
// define function to parse time in years format
var parseTime = d3.timeParse("%Y");
// create scales x & y for X and Y axis and set their ranges
var x = d3.scaleTime().range([margin.left, cont_width - margin.right]);
var y = d3.scaleLinear().range([cont_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("id", "svg1")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("id", "container")
.attr("transform", "translate(80,20)");
// Get the data
var pathToCsv = "q3.csv"; // path to csv
d3.dsv(",", pathToCsv, function (d) {
return {
// format data attributes if required-- this function returns a dictionary
year: parseTime(d.year),
running_total: +d.running_total,
};
})
.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(
d3.extent(data, 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
.append("g")
.attr("id", "bars")
.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function (d) {
return x(d.year);
})
.attr("y", function (d) {
return y(d.running_total);
})
.attr("width", 3)
.attr("height", function (d) {
return cont_height - y(d.running_total);
})
.attr("fill", "blue");
// Add the X Axis
var x_axis = d3.axisBottom(x).ticks(d3.timeYear.every(10));
svg
.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0," + cont_height + ")")
.call(x_axis);
// Add the text label for X Axis
svg
.append("text")
.attr("id", "x_axis_label")
.attr("transform", "translate(450, 475)")
.attr("text-anchor", "middle")
.text("Year");
// Add the Y Axis
var y_axis = d3.axisLeft(y).ticks(10);
svg
.append("g")
.attr("id", "y_axis")
.attr("transform", "translate(" + margin.left + ", 0)")
.call(y_axis);
// Add the text label for Y axis
svg
.append("text")
.attr("id", "y_axis_label")
.attr("transform", "rotate(-90)")
.attr("x", -cont_height / 2)
.attr("y", 30)
.attr("dy", "-5em")
.attr("text-anchor", "end")
.text("Running Total");
//add GT Username
svg
.append("text")
.attr("id", "credit")
.attr("transform", "translate(800,475)")
.attr("text-anchor", "right")
.text("tlou31");
// add title
svg
.append("text")
.attr("id", "title")
.attr("transform", "translate(" + width * 0.3 + ", " + 0 + ")")
.attr("text-anchor", "right")
.text("Running Total of TMDb Movies by Year");
})
.catch(function (error) {
console.log(error);
});
</script>
</body>

9
tunmnlu/task_1/Q3/rev2/answer.rxt Normal file
View File

@@ -0,0 +1,9 @@
1. 呢個特別D，如果你要行要用呢句，唔可以就咁打開個 html file 去睇
2. 睇嘅方法
3. 佢要交嘅只有 Q3.html
4. 我比埋其餘果D file 比你，不過其實我冇改過
我都睇過果３幅圖，不過根據佢之下果個 dom tree
佢要收嘅只有一幅，所以想麻煩你幫個忙試一次 thanks.
ttps://share.louislabs.com/g/u-bkzl8iIyD

150
tunmnlu/task_1/Q3/rev2/deliver/_no_submit/Q3.html Normal file
View File

@@ -0,0 +1,150 @@
<!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: 50, left: 80},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const full_width = 960;
const full_height = 500;
const graph_content_width = 960 - (margin.left + margin.right)
const graph_content_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, graph_content_width])
.padding(0.3);
var y = d3.scaleLinear()
.range([graph_content_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", full_width)
.attr("height", full_height)
.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 graph_content_height - y(d.running_total); });
// Add the X Axis
svg.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0, "+graph_content_height+")")
.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", graph_content_height + margin.top+ 20)
.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("transform", `rotate(-90), translate(${(-height/2)+margin.top+30},${-margin.left + 20})`)
// .attr("y", (graph_content_height / 24))
// .attr("x", (graph_content_width /100))
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Running Total");
// Add the Title
svg.append("text")
.attr("id","title")
.attr("x", (graph_content_width / 2))
.attr("y", -(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", graph_content_width - 20 )
.attr("y", graph_content_height+margin.top + 20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("text-decoration", "underline")
.text("tlou31");
}).catch(function (error) {
console.log(error);
});
</script>
</body>

128
tunmnlu/task_1/Q3/rev2/deliver/_no_submit/q3.csv Normal file
View File

@@ -0,0 +1,128 @@
year,running_total
1884,1
1885,1
1886,3
1887,11
1888,12
1889,12
1890,15
1891,17
1892,24
1893,25
1894,59
1895,89
1896,246
1897,430
1898,616
1899,775
1900,985
1901,1180
1902,1328
1903,1539
1904,1725
1905,1853
1906,1996
1907,2110
1908,2287
1909,2502
1910,2795
1911,3159
1912,3690
1913,4167
1914,4564
1915,5021
1916,5558
1917,6090
1918,6540
1919,6975
1920,7486
1921,7959
1922,8405
1923,8892
1924,9443
1925,10083
1926,10826
1927,11566
1928,12296
1929,13060
1930,13924
1931,14824
1932,15868
1933,16831
1934,17852
1935,18942
1936,20002
1937,21098
1938,22102
1939,23065
1940,24060
1941,25080
1942,26058
1943,26988
1944,27875
1945,28772
1946,29605
1947,30365
1948,31228
1949,32110
1950,33023
1951,33897
1952,34760
1953,35655
1954,36450
1955,37293
1956,38132
1957,39017
1958,39857
1959,40635
1960,41379
1961,42152
1962,42955
1963,43765
1964,44724
1965,45797
1966,46894
1967,48109
1968,49366
1969,50710
1970,52143
1971,53514
1972,54985
1973,56371
1974,57824
1975,59148
1976,60465
1977,61732
1978,63177
1979,64632
1980,66054
1981,67413
1982,68793
1983,70278
1984,71846
1985,73449
1986,75128
1987,77073
1988,79082
1989,81089
1990,83122
1991,85189
1992,87268
1993,89368
1994,91646
1995,94024
1996,96467
1997,98981
1998,101690
1999,104570
2000,107622
2001,110974
2002,114763
2003,118990
2004,123698
2005,129124
2006,134943
2007,140902
2008,147303
2009,154027
2010,160885
1 year running_total
2 1884 1
3 1885 1
4 1886 3
5 1887 11
6 1888 12
7 1889 12
8 1890 15
9 1891 17
10 1892 24
11 1893 25
12 1894 59
13 1895 89
14 1896 246
15 1897 430
16 1898 616
17 1899 775
18 1900 985
19 1901 1180
20 1902 1328
21 1903 1539
22 1904 1725
23 1905 1853
24 1906 1996
25 1907 2110
26 1908 2287
27 1909 2502
28 1910 2795
29 1911 3159
30 1912 3690
31 1913 4167
32 1914 4564
33 1915 5021
34 1916 5558
35 1917 6090
36 1918 6540
37 1919 6975
38 1920 7486
39 1921 7959
40 1922 8405
41 1923 8892
42 1924 9443
43 1925 10083
44 1926 10826
45 1927 11566
46 1928 12296
47 1929 13060
48 1930 13924
49 1931 14824
50 1932 15868
51 1933 16831
52 1934 17852
53 1935 18942
54 1936 20002
55 1937 21098
56 1938 22102
57 1939 23065
58 1940 24060
59 1941 25080
60 1942 26058
61 1943 26988
62 1944 27875
63 1945 28772
64 1946 29605
65 1947 30365
66 1948 31228
67 1949 32110
68 1950 33023
69 1951 33897
70 1952 34760
71 1953 35655
72 1954 36450
73 1955 37293
74 1956 38132
75 1957 39017
76 1958 39857
77 1959 40635
78 1960 41379
79 1961 42152
80 1962 42955
81 1963 43765
82 1964 44724
83 1965 45797
84 1966 46894
85 1967 48109
86 1968 49366
87 1969 50710
88 1970 52143
89 1971 53514
90 1972 54985
91 1973 56371
92 1974 57824
93 1975 59148
94 1976 60465
95 1977 61732
96 1978 63177
97 1979 64632
98 1980 66054
99 1981 67413
100 1982 68793
101 1983 70278
102 1984 71846
103 1985 73449
104 1986 75128
105 1987 77073
106 1988 79082
107 1989 81089
108 1990 83122
109 1991 85189
110 1992 87268
111 1993 89368
112 1994 91646
113 1995 94024
114 1996 96467
115 1997 98981
116 1998 101690
117 1999 104570
118 2000 107622
119 2001 110974
120 2002 114763
121 2003 118990
122 2004 123698
123 2005 129124
124 2006 134943
125 2007 140902
126 2008 147303
127 2009 154027
128 2010 160885

169
tunmnlu/task_1/Q3/rev2/deliver/submit/Q3.html Normal file
View File

@@ -0,0 +1,169 @@
<!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: 30, bottom: 30, left: 63.2 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const full_width = 960;
const full_height = 500;
const graph_content_width = 960 - (margin.left + margin.right);
const graph_content_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, graph_content_width]).padding(0.001);
var y = d3.scaleLinear().range([graph_content_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", full_width)
.attr("height", full_height)
.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 graph_content_height - y(d.running_total);
});
// Add the X Axis
svg
.append("g")
.attr("id", "x_axis")
.attr("transform", "translate(0, " + graph_content_height + ")")
.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", graph_content_height + margin.top + 20)
.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(
"transform",
`rotate(-90), translate(${-height / 2 + margin.top + 30},${
-margin.left + 20
})`,
)
// .attr("y", (graph_content_height / 24))
// .attr("x", (graph_content_width /100))
.attr("text-anchor", "end")
.attr("stroke", "black")
.text("Running Total");
// Add the Title
svg
.append("text")
.attr("id", "title")
.attr("x", graph_content_width / 2)
.attr("y", -(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", graph_content_width - 20)
.attr("y", graph_content_height + margin.top + 20)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("text-decoration", "underline")
.text("tlou31");
})
.catch(function (error) {
console.log(error);
});
</script>
</body>

8
tunmnlu/task_1/Q3/rev2/meta.md Normal file
View File

@@ -0,0 +1,8 @@
---
tags: [csv, excel, d3js, javascript, html]
---
# task3
ttps://share.louislabs.com/g/u-iOAl1Q6J_

128
tunmnlu/task_1/Q3/rev2/q3.csv Normal file
View File

@@ -0,0 +1,128 @@
year,running_total
1884,1
1885,1
1886,3
1887,11
1888,12
1889,12
1890,15
1891,17
1892,24
1893,25
1894,59
1895,89
1896,246
1897,430
1898,616
1899,775
1900,985
1901,1180
1902,1328
1903,1539
1904,1725
1905,1853
1906,1996
1907,2110
1908,2287
1909,2502
1910,2795
1911,3159
1912,3690
1913,4167
1914,4564
1915,5021
1916,5558
1917,6090
1918,6540
1919,6975
1920,7486
1921,7959
1922,8405
1923,8892
1924,9443
1925,10083
1926,10826
1927,11566
1928,12296
1929,13060
1930,13924
1931,14824
1932,15868
1933,16831
1934,17852
1935,18942
1936,20002
1937,21098
1938,22102
1939,23065
1940,24060
1941,25080
1942,26058
1943,26988
1944,27875
1945,28772
1946,29605
1947,30365
1948,31228
1949,32110
1950,33023
1951,33897
1952,34760
1953,35655
1954,36450
1955,37293
1956,38132
1957,39017
1958,39857
1959,40635
1960,41379
1961,42152
1962,42955
1963,43765
1964,44724
1965,45797
1966,46894
1967,48109
1968,49366
1969,50710
1970,52143
1971,53514
1972,54985
1973,56371
1974,57824
1975,59148
1976,60465
1977,61732
1978,63177
1979,64632
1980,66054
1981,67413
1982,68793
1983,70278
1984,71846
1985,73449
1986,75128
1987,77073
1988,79082
1989,81089
1990,83122
1991,85189
1992,87268
1993,89368
1994,91646
1995,94024
1996,96467
1997,98981
1998,101690
1999,104570
2000,107622
2001,110974
2002,114763
2003,118990
2004,123698
2005,129124
2006,134943
2007,140902
2008,147303
2009,154027
2010,160885
1 year running_total
2 1884 1
3 1885 1
4 1886 3
5 1887 11
6 1888 12
7 1889 12
8 1890 15
9 1891 17
10 1892 24
11 1893 25
12 1894 59
13 1895 89
14 1896 246
15 1897 430
16 1898 616
17 1899 775
18 1900 985
19 1901 1180
20 1902 1328
21 1903 1539
22 1904 1725
23 1905 1853
24 1906 1996
25 1907 2110
26 1908 2287
27 1909 2502
28 1910 2795
29 1911 3159
30 1912 3690
31 1913 4167
32 1914 4564
33 1915 5021
34 1916 5558
35 1917 6090
36 1918 6540
37 1919 6975
38 1920 7486
39 1921 7959
40 1922 8405
41 1923 8892
42 1924 9443
43 1925 10083
44 1926 10826
45 1927 11566
46 1928 12296
47 1929 13060
48 1930 13924
49 1931 14824
50 1932 15868
51 1933 16831
52 1934 17852
53 1935 18942
54 1936 20002
55 1937 21098
56 1938 22102
57 1939 23065
58 1940 24060
59 1941 25080
60 1942 26058
61 1943 26988
62 1944 27875
63 1945 28772
64 1946 29605
65 1947 30365
66 1948 31228
67 1949 32110
68 1950 33023
69 1951 33897
70 1952 34760
71 1953 35655
72 1954 36450
73 1955 37293
74 1956 38132
75 1957 39017
76 1958 39857
77 1959 40635
78 1960 41379
79 1961 42152
80 1962 42955
81 1963 43765
82 1964 44724
83 1965 45797
84 1966 46894
85 1967 48109
86 1968 49366
87 1969 50710
88 1970 52143
89 1971 53514
90 1972 54985
91 1973 56371
92 1974 57824
93 1975 59148
94 1976 60465
95 1977 61732
96 1978 63177
97 1979 64632
98 1980 66054
99 1981 67413
100 1982 68793
101 1983 70278
102 1984 71846
103 1985 73449
104 1986 75128
105 1987 77073
106 1988 79082
107 1989 81089
108 1990 83122
109 1991 85189
110 1992 87268
111 1993 89368
112 1994 91646
113 1995 94024
114 1996 96467
115 1997 98981
116 1998 101690
117 1999 104570
118 2000 107622
119 2001 110974
120 2002 114763
121 2003 118990
122 2004 123698
123 2005 129124
124 2006 134943
125 2007 140902
126 2008 147303
127 2009 154027
128 2010 160885