diff --git a/.DS_Store b/.DS_Store
index 321585e..7aab51e 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/css/style.css b/css/style.css
index dc90ee2..1df16c6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -53,7 +53,7 @@ h5 {
 
 /*Cover/Title Section*/
 #cover_photo {
-    background-image: url("../img/cover.jpg");
+    background-image: url("../img/owen.gif");
     height: 100%;
     width: 160%;
     background-position: center;
@@ -72,7 +72,7 @@ h5 {
 }
 
 #cover-text #subtitle {
-    color: gray;
+    color: rgb(132, 46, 6);
     font-size: 40px;
 }
 
@@ -80,6 +80,7 @@ h5 {
     font-family: "Open Sans";
     font-size: 24px;
     line-height: 1.5;
+    color: rgb(244, 238, 235);
 }
 
 
diff --git a/data/.DS_Store b/data/.DS_Store
index 50cb87f..a75f806 100644
Binary files a/data/.DS_Store and b/data/.DS_Store differ
diff --git a/data/3PA.csv b/data/3PA.csv
new file mode 100644
index 0000000..b6168d8
--- /dev/null
+++ b/data/3PA.csv
@@ -0,0 +1,19 @@
+Year,victory,lose,csv
+2003,14.4,15,
+2004,15.7,15.3,
+2005,15.66,15.7,
+2006,16.9,16.7,
+2007,18.2,17.6,
+2008,18.16,17.9,
+2009,18.09,18.15,
+2010,18.2,17.96,
+2011,18.31,18.23,
+2012,19.78,19.56,
+2013,21.36,21.32,
+2014,22.36,22.78,
+2015,24.21,24.08,
+2016,26.54,26.21,
+2017,28.52,28.24,
+2018,32.34,32.1,
+2019,33.67,33.89,
+2020,33.84,33.87,
diff --git a/data/3PP.csv b/data/3PP.csv
new file mode 100644
index 0000000..d1bc806
--- /dev/null
+++ b/data/3PP.csv
@@ -0,0 +1,19 @@
+Year,victory,lose,csv
+2003,37.57,30.2,
+2004,38.42,31.24,
+2005,38.45,31.22,
+2006,38.03,31.45,
+2007,38.32,31.65,
+2008,38.35,32.43,
+2009,38.02,31.39,
+2010,37.96,31.65,
+2011,37.45,31.47,
+2012,38.21,31.75,
+2013,38.24,31.85,
+2014,38.04,31.67,
+2015,38.16,31.73,
+2016,38.36,31.76,
+2017,38.34,32.86,
+2018,38.23,32.64,
+2019,38.25,32.76,
+2020,39.1,32.8,
diff --git a/data/championsdata.csv b/data/championsdata.csv
new file mode 100644
index 0000000..4ecc7fc
--- /dev/null
+++ b/data/championsdata.csv
@@ -0,0 +1,40 @@
+Year,FG,FGA,TP,TPA,CSV
+1980,45,92,0,0.67,
+1981,40.17,85.33,0.5,2.83,
+1982,45.5,91.83,0.17,1.5,
+1983,43,88.5,0,0.75,
+1984,42,92.86,1.29,3.29,
+1985,46.33,90.5,1.33,3.83,
+1986,43.67,88.83,1.67,5.33,
+1987,46.67,90.67,2.67,6.83,
+1988,35.43,75.86,1.43,5.71,
+1989,41.75,79.25,1.25,5,
+1990,39.4,86.8,5,11.2,
+1991,42.6,80.8,1,4.2,
+1992,40.17,79.67,4.17,10.83,
+1993,43.83,90.67,5.33,11.5,
+1994,31.86,74.71,5.29,17.29,
+1995,40.5,85.75,9.25,23,
+1996,32.83,79,6,22.83,
+1997,32.33,74.83,6.5,18.67,
+1998,32.5,75.5,4.33,14.67,
+1999,30,67.4,4.2,12.4,
+2000,41,85.33,5.83,15.33,
+2001,36.2,77.8,7.2,15,
+2002,36.5,72.25,7.25,15.25,
+2003,32.17,74.5,4,12.5,
+2004,31.4,73.2,4.2,13.2,
+2005,30.86,71.86,7.29,18.29,
+2006,33.33,72.83,5.33,17.5,
+2007,32,72,7.25,19.5,
+2008,34.33,77.33,8.67,20.17,
+2009,38,83.2,6.4,17.2,
+2010,31.86,76.29,5,17.86,
+2011,33,72.67,8.5,20.67,
+2012,35.33,77,8.33,20.5,
+2013,38,82.17,9.33,20.5,
+2014,38.2,72.4,11,23.6,
+2015,36.17,83,11.17,31,
+2016,37.57,82.43,8,24.29,
+2017,43.2,91,14.2,37.2,
+2018,43.5,84.75,12.75,34,
diff --git a/data/res_championsdata.csv b/data/res_championsdata.csv
new file mode 100644
index 0000000..c6a8b59
--- /dev/null
+++ b/data/res_championsdata.csv
@@ -0,0 +1,40 @@
+Year,FG,FGA,FGP,TP,TPA,TPP,PTS,TPA/(TPA+FGA)
+1980,45.00 ,92.00 ,48.91%,0.00 ,0.67 ,0.00%,109.50 ,0.72%
+1981,40.17 ,85.33 ,47.07%,0.50 ,2.83 ,17.65%,96.50 ,3.21%
+1982,45.50 ,91.83 ,49.55%,0.17 ,1.50 ,11.11%,112.33 ,1.61%
+1983,43.00 ,88.50 ,48.59%,0.00 ,0.75 ,0.00%,110.50 ,0.84%
+1984,42.00 ,92.86 ,45.23%,1.29 ,3.29 ,39.13%,116.00 ,3.42%
+1985,46.33 ,90.50 ,51.20%,1.33 ,3.83 ,34.78%,115.83 ,4.06%
+1986,43.67 ,88.83 ,49.16%,1.67 ,5.33 ,31.25%,107.67 ,5.66%
+1987,46.67 ,90.67 ,51.47%,2.67 ,6.83 ,39.02%,115.17 ,7.01%
+1988,35.43 ,75.86 ,46.70%,1.43 ,5.71 ,25.00%,98.71 ,7.01%
+1989,41.75 ,79.25 ,52.68%,1.25 ,5.00 ,25.00%,109.00 ,5.93%
+1990,39.40 ,86.80 ,45.39%,5.00 ,11.20 ,44.64%,107.00 ,11.43%
+1991,42.60 ,80.80 ,52.72%,1.00 ,4.20 ,23.81%,101.40 ,4.94%
+1992,40.17 ,79.67 ,50.42%,4.17 ,10.83 ,38.46%,104.00 ,11.97%
+1993,43.83 ,90.67 ,48.35%,5.33 ,11.50 ,46.38%,106.67 ,11.26%
+1994,31.86 ,74.71 ,42.64%,5.29 ,17.29 ,30.58%,86.14 ,18.79%
+1995,40.50 ,85.75 ,47.23%,9.25 ,23.00 ,40.22%,114.00 ,21.15%
+1996,32.83 ,79.00 ,41.56%,6.00 ,22.83 ,26.28%,93.00 ,22.42%
+1997,32.33 ,74.83 ,43.21%,6.50 ,18.67 ,34.82%,87.83 ,19.96%
+1998,32.50 ,75.50 ,43.05%,4.33 ,14.67 ,29.55%,88.00 ,16.27%
+1999,30.00 ,67.40 ,44.51%,4.20 ,12.40 ,33.87%,84.80 ,15.54%
+2000,41.00 ,85.33 ,48.05%,5.83 ,15.33 ,38.04%,104.83 ,15.23%
+2001,36.20 ,77.80 ,46.53%,7.20 ,15.00 ,48.00%,100.60 ,16.16%
+2002,36.50 ,72.25 ,50.52%,7.25 ,15.25 ,47.54%,106.00 ,17.43%
+2003,32.17 ,74.50 ,43.18%,4.00 ,12.50 ,32.00%,87.83 ,14.37%
+2004,31.40 ,73.20 ,42.90%,4.20 ,13.20 ,31.82%,90.80 ,15.28%
+2005,30.86 ,71.86 ,42.94%,7.29 ,18.29 ,39.84%,84.86 ,20.29%
+2006,33.33 ,72.83 ,45.77%,5.33 ,17.50 ,30.48%,92.83 ,19.37%
+2007,32.00 ,72.00 ,44.44%,7.25 ,19.50 ,37.18%,86.50 ,21.31%
+2008,34.33 ,77.33 ,44.40%,8.67 ,20.17 ,42.98%,102.17 ,20.68%
+2009,38.00 ,83.20 ,45.67%,6.40 ,17.20 ,37.21%,100.60 ,17.13%
+2010,31.86 ,76.29 ,41.76%,5.00 ,17.86 ,28.00%,90.57 ,18.97%
+2011,33.00 ,72.67 ,45.41%,8.50 ,20.67 ,41.13%,94.67 ,22.14%
+2012,35.33 ,77.00 ,45.89%,8.33 ,20.50 ,40.65%,99.67 ,21.03%
+2013,38.00 ,82.17 ,46.25%,9.33 ,20.50 ,45.53%,98.50 ,19.97%
+2014,38.20 ,72.40 ,52.76%,11.00 ,23.60 ,46.61%,105.60 ,24.58%
+2015,36.17 ,83.00 ,43.57%,11.17 ,31.00 ,36.02%,100.67 ,27.19%
+2016,37.57 ,82.43 ,45.58%,8.00 ,24.29 ,32.94%,100.43 ,22.76%
+2017,43.20 ,91.00 ,47.47%,14.20 ,37.20 ,38.17%,121.60 ,29.02%
+2018,43.50 ,84.75 ,51.33%,12.75 ,34.00 ,37.50%,116.00 ,28.63%
diff --git a/data/res_runnerupsdata.csv b/data/res_runnerupsdata.csv
new file mode 100644
index 0000000..9d269b7
--- /dev/null
+++ b/data/res_runnerupsdata.csv
@@ -0,0 +1,40 @@
+Year,FG,FGA,FGP,TP,TPA,TPP,PTS
+1980,43.00 ,88.33 ,48.68%,0.17 ,2.67 ,6.25%,104.17 
+1981,33.83 ,89.33 ,37.87%,0.50 ,1.83 ,27.27%,86.67 
+1982,46.17 ,92.50 ,49.91%,0.67 ,2.33 ,28.57%,112.50 
+1983,40.75 ,90.25 ,45.15%,0.75 ,3.75 ,20.00%,100.50 
+1984,46.71 ,90.71 ,51.50%,0.86 ,2.57 ,33.33%,117.43 
+1985,43.83 ,92.00 ,47.64%,2.17 ,5.67 ,38.24%,113.17 
+1986,41.83 ,92.83 ,45.06%,0.83 ,2.83 ,29.41%,102.00 
+1987,43.67 ,86.17 ,50.68%,2.33 ,7.00 ,33.33%,111.00 
+1988,38.57 ,81.00 ,47.62%,1.29 ,4.43 ,29.03%,101.29 
+1989,36.00 ,77.50 ,46.45%,3.25 ,10.75 ,30.23%,102.25 
+1990,37.40 ,82.00 ,45.61%,2.20 ,9.40 ,23.40%,102.00 
+1991,33.40 ,74.80 ,44.65%,2.60 ,9.20 ,28.26%,91.60 
+1992,35.33 ,79.83 ,44.26%,1.67 ,8.67 ,19.23%,96.67 
+1993,40.67 ,86.83 ,46.83%,4.50 ,10.33 ,43.55%,106.67 
+1994,33.14 ,81.43 ,40.70%,5.14 ,15.00 ,34.29%,86.86 
+1995,40.75 ,87.50 ,46.57%,10.25 ,29.50 ,34.75%,107.00 
+1996,31.00 ,69.67 ,44.50%,5.33 ,17.00 ,31.37%,89.17 
+1997,30.83 ,71.67 ,43.02%,5.83 ,14.17 ,41.18%,87.17 
+1998,31.83 ,71.83 ,44.32%,2.17 ,10.00 ,21.67%,80.17 
+1999,30.80 ,78.60 ,39.19%,2.20 ,10.80 ,20.37%,79.80 
+2000,36.33 ,78.50 ,46.28%,8.17 ,19.33 ,42.24%,106.67 
+2001,35.40 ,83.40 ,42.45%,3.40 ,11.80 ,28.81%,93.80 
+2002,38.75 ,88.75 ,43.66%,4.50 ,14.75 ,30.51%,96.75 
+2003,30.33 ,82.00 ,36.99%,3.83 ,13.83 ,27.71%,82.00 
+2004,31.60 ,76.00 ,41.58%,4.40 ,17.80 ,24.72%,81.80 
+2005,35.43 ,81.57 ,43.43%,2.57 ,10.71 ,24.00%,86.71 
+2006,33.00 ,78.17 ,42.22%,5.50 ,19.33 ,28.45%,91.83 
+2007,31.00 ,78.50 ,39.49%,5.50 ,18.75 ,29.33%,80.50 
+2008,33.00 ,74.83 ,44.10%,7.17 ,20.67 ,34.68%,93.83 
+2009,32.20 ,75.20 ,42.82%,7.60 ,23.00 ,33.04%,91.20 
+2010,33.00 ,76.14 ,43.34%,4.71 ,15.29 ,30.84%,87.14 
+2011,33.67 ,74.67 ,45.09%,7.50 ,21.67 ,34.62%,92.33 
+2012,36.60 ,80.40 ,45.52%,6.40 ,21.00 ,30.48%,98.00 
+2013,35.86 ,79.57 ,45.06%,8.71 ,21.43 ,40.67%,97.71 
+2014,33.60 ,71.20 ,47.19%,9.20 ,23.20 ,39.66%,91.60 
+2015,32.67 ,85.17 ,38.36%,8.17 ,27.83 ,29.34%,93.50 
+2016,35.57 ,82.57 ,43.08%,13.43 ,36.00 ,37.30%,99.86 
+2017,41.60 ,90.20 ,46.12%,13.20 ,34.60 ,38.15%,114.80 
+2018,37.75 ,92.00 ,41.03%,9.00 ,30.50 ,29.51%,101.00 
diff --git a/data/runnerupsdata.csv b/data/runnerupsdata.csv
new file mode 100644
index 0000000..26e1887
--- /dev/null
+++ b/data/runnerupsdata.csv
@@ -0,0 +1,40 @@
+Year,FG,FGA,TP,TPA,CSV
+1980,43,88.33,0.17,2.67,
+1981,33.83,89.33,0.5,1.83,
+1982,46.17,92.5,0.67,2.33,
+1983,40.75,90.25,0.75,3.75,
+1984,46.71,90.71,0.86,2.57,
+1985,43.83,92,2.17,5.67,
+1986,41.83,92.83,0.83,2.83,
+1987,43.67,86.17,2.33,7,
+1988,38.57,81,1.29,4.43,
+1989,36,77.5,3.25,10.75,
+1990,37.4,82,2.2,9.4,
+1991,33.4,74.8,2.6,9.2,
+1992,35.33,79.83,1.67,8.67,
+1993,40.67,86.83,4.5,10.33,
+1994,33.14,81.43,5.14,15,
+1995,40.75,87.5,10.25,29.5,
+1996,31,69.67,5.33,17,
+1997,30.83,71.67,5.83,14.17,
+1998,31.83,71.83,2.17,10,
+1999,30.8,78.6,2.2,10.8,
+2000,36.33,78.5,8.17,19.33,
+2001,35.4,83.4,3.4,11.8,
+2002,38.75,88.75,4.5,14.75,
+2003,30.33,82,3.83,13.83,
+2004,31.6,76,4.4,17.8,
+2005,35.43,81.57,2.57,10.71,
+2006,33,78.17,5.5,19.33,
+2007,31,78.5,5.5,18.75,
+2008,33,74.83,7.17,20.67,
+2009,32.2,75.2,7.6,23,
+2010,33,76.14,4.71,15.29,
+2011,33.67,74.67,7.5,21.67,
+2012,36.6,80.4,6.4,21,
+2013,35.86,79.57,8.71,21.43,
+2014,33.6,71.2,9.2,23.2,
+2015,32.67,85.17,8.17,27.83,
+2016,35.57,82.57,13.43,36,
+2017,41.6,90.2,13.2,34.6,
+2018,37.75,92,9,30.5,
diff --git a/data_format.py b/data_format.py
new file mode 100644
index 0000000..6135880
--- /dev/null
+++ b/data_format.py
@@ -0,0 +1,14 @@
+f1 = open('./data/3PP.csv', 'r')
+f2 = open('final.txt', 'a')
+firstline = f1.readline()
+att_name = firstline.split(',')
+# f2.write('[\'Date\',\'FG3A\'],\n')
+for line in f1.readlines()[::]:
+    token = line.split(',')
+    sdate = token[att_name.index('lose')]
+    # f2.write('\"')
+    f2.write(sdate+',')
+    # f2.write(token[att_name.index('FG3A')])
+    # f2.write('],\n')
+    # line = f1.readline()
+f2.write('\n')
\ No newline at end of file
diff --git a/final.txt b/final.txt
new file mode 100644
index 0000000..02ec2c7
--- /dev/null
+++ b/final.txt
@@ -0,0 +1,28 @@
+43,33.83,46.17,40.75,46.71,43.83,41.83,43.67,38.57,36,37.4,33.4,35.33,40.67,33.14,40.75,31,30.83,31.83,30.8,36.33,35.4,38.75,30.33,31.6,35.43,33,31,33,32.2,33,33.67,36.6,35.86,33.6,32.67,35.57,41.6,37.75,
+88.33,89.33,92.5,90.25,90.71,92,92.83,86.17,81,77.5,82,74.8,79.83,86.83,81.43,87.5,69.67,71.67,71.83,78.6,78.5,83.4,88.75,82,76,81.57,78.17,78.5,74.83,75.2,76.14,74.67,80.4,79.57,71.2,85.17,82.57,90.2,92,
+0.17,0.5,0.67,0.75,0.86,2.17,0.83,2.33,1.29,3.25,2.2,2.6,1.67,4.5,5.14,10.25,5.33,5.83,2.17,2.2,8.17,3.4,4.5,3.83,4.4,2.57,5.5,5.5,7.17,7.6,4.71,7.5,6.4,8.71,9.2,8.17,13.43,13.2,9,
+2.67,1.83,2.33,3.75,2.57,5.67,2.83,7,4.43,10.75,9.4,9.2,8.67,10.33,15,29.5,17,14.17,10,10.8,19.33,11.8,14.75,13.83,17.8,10.71,19.33,18.75,20.67,23,15.29,21.67,21,21.43,23.2,27.83,36,34.6,30.5,
+'2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020',
+14.4,15.7,15.66,16.9,18.2,18.16,18.09,18.2,18.31,19.78,21.36,22.36,24.21,26.54,28.52,32.34,33.67,33.84,
+15
+,15.3
+,15.7
+,16.7
+,17.6
+,17.9
+,18.15
+,17.96
+,18.23
+,19.56
+,21.32
+,22.78
+,24.08
+,26.21
+,28.24
+,32.1
+,33.89
+,33.87
+,
+15,15.3,15.7,16.7,17.6,17.9,18.15,17.96,18.23,19.56,21.32,22.78,24.08,26.21,28.24,32.1,33.89,33.87,
+37.57,38.42,38.45,38.03,38.32,38.35,38.02,37.96,37.45,38.21,38.24,38.04,38.16,38.36,38.34,38.23,38.25,39.1,
+30.2,31.24,31.22,31.45,31.65,32.43,31.39,31.65,31.47,31.75,31.85,31.67,31.73,31.76,32.86,32.64,32.76,32.8,
diff --git a/img/cover.jpg b/fonts/cover.jpg
similarity index 100%
rename from img/cover.jpg
rename to fonts/cover.jpg
diff --git a/img/.DS_Store b/img/.DS_Store
index 4c5f8b0..22e543c 100644
Binary files a/img/.DS_Store and b/img/.DS_Store differ
diff --git a/img/final.jpeg b/img/final.jpeg
new file mode 100644
index 0000000..5ad91ed
Binary files /dev/null and b/img/final.jpeg differ
diff --git a/img/owen.gif b/img/owen.gif
new file mode 100755
index 0000000..ee5ccde
Binary files /dev/null and b/img/owen.gif differ
diff --git a/index.html b/index.html
index b0a9a30..ec289bb 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,8 @@
   <script src="js/jquery.min.js"></script>
   <script src="js/echarts.min.js"></script>
   <script src="js/jquery.fullPage.js"></script>
+  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.js"></script>
+  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   <!-- 引入 vintage 主题 -->
   <script src="js/essos.js"></script>
   <title>W.O.W.</title>
@@ -17,6 +19,8 @@
   <!--<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,400italic,700' rel='stylesheet' type='text/css'>-->
   <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 
+  <!-- <body { background-image:url("./img/owen.gif"); background-repeat:repeat; }></body> -->
+
   <link rel="stylesheet" href="css/w3.css">
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/style.css">
@@ -40,7 +44,6 @@
   <div class="w3-top">
     <div class="w3-bar w3-white w3-wide w3-padding w3-card">
       <a href="#cover" class="w3-bar-item w3-button"><b>3PointsBall</b></a>
-      <!-- Float links to the right. Hide them on small screens -->
       <div class="w3-right w3-hide-small">
         <a href="#firstPage" class="w3-bar-item w3-button">Pioneer</a>
         <a href="#secondPage" class="w3-bar-item w3-button">Concentration</a>
@@ -62,10 +65,10 @@
         <br><br><br><br><br><br><br><br><br><br>
         <div id="cover-text">
           <h1><b>Is raining threes worth it?</b></h1>
-          <h2 id="subtitle"><b><i>An exploration of female faculty at Harvard and beyond.</i></b></h2>
-          <h2 id="story_begin">Take a look around your classroom.<br>
-            You will most likely see an even distribution between male and female students.<br>
-            But what about the professor lecturing in front?
+          <h2 id="subtitle"><b><i>An exploration of 3-points ball at NBA.</i></b></h2>
+          <h2 id="story_begin">In the last years the NBA has changed dramatically.<br>
+            The playstyle is now more oriented toward early three point shot and fast offensive transitions.<br>
+            Many analyst have been wondering if this basketball revolution benefits to the show and helps the team to win the matches.
           </h2>
           <br><br><br><br><br><br><br><br>
           <div style="text-align: center">
@@ -189,20 +192,23 @@ <h5 style="font-size: 12px !important;">* Note: Dotted line indicates that data
     <!--other schools-->
     <div class="section">
       <div class="w3-container w3-padding-32" id="other_schools">
-        <h3 class="section-title w3-border-bottom w3-border-light-grey w3-padding-16">To examine this further, let's explore data from other Ivy League universities.</h3>
+        <h3 class="section-title w3-border-bottom w3-border-light-grey w3-padding-16">Let's take a look at 3-points ball in the NBA Finals.</h3>
       </div>
 
       <div class="w3-row-padding row">
-        <h3>Female Faculty Percentage and Wage Across Ivy League Universities</h3>
-        <h4 class="instruction">Click on the map to see the percentage of female professors as well as wage difference on that campus.</h4>
-        <h5 style="font-size: 12px; font-family: 'Open Sans';">* Note: Wage difference was calculated by dividing female faculty wage by male faculty wage. These figures are based on 2015 data.</h5>
+        <h2></h2> Players are always exposed to intense and fierce physical play in th NBA Finals. 3-points ball can help you go big or go home. 
+        <h3 class="instruction">Click on the table to see the change players shoot 3-points ball between 1980-2018.</h3>
         <div class="row">
+          
           <div class="col-md-6">
-            <div id="ivy-league-map"></div>
+            <!--div id="ivy-league-map"-->
+            <!-- <img src="img/final.jpeg" width="650" height="450" > -->
           </div>
-          <div class="col-md-6">
+          <div id="final" style="position:relative;left:-100px;top:0px;width:1580px;height:680px;"></div>
+          <script src="js/final.js"></script>
+          <!-- <div class="col-md-6">
             <div id="ivy-league-bar-chart"></div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -436,15 +442,14 @@ <h3 class="sub-title-2" style="margin-right: 10px">
 
     <!--survey-->
     <div class="section w3-container w3-padding-32">
-      <div class="row" id="survey">
-        <div>
-          <br>
-          <h3 class="section-title w3-border-bottom w3-border-light-grey w3-padding-16">
-            <i>Now tell us how YOU feel!</i>
-          </h3>
-        </div>
-        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfcvNGuVIzgpi5ee3PJ6rGbPi0TwhXI0LWw6TFDjAsXlstGrQ/viewform?embedded=true#responses"
-                width="1000" height="550" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
+      <div class="w3-container" id="survey">
+        
+            <div id="3PA_win_lose" style="position:relative;left:0px;top:0px;width:800px;height:700px;"></div> 
+            <script src="js/3PA_win_lose.js"></script> 
+        
+            <div id="3PP_win_lose" style="position:relative;left:800px;top:0px;width:800px;height:700px;"></div> 
+            <script src="js/3PP_win_lose.js"></script>
+            
       </div>
     </div>
 
diff --git a/js/3PA_win_lose.js b/js/3PA_win_lose.js
new file mode 100644
index 0000000..2c1ea52
--- /dev/null
+++ b/js/3PA_win_lose.js
@@ -0,0 +1,109 @@
+var chartDom = document.getElementById('3PA_win_lose');
+var myChart = echarts.init(chartDom);
+var option;
+
+// prettier-ignore
+let dataAxis = ['2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'];
+// prettier-ignore
+let data = [14.4,15.7,15.66,16.9,18.2,18.16,18.09,18.2,18.31,19.78,21.36,22.36,24.21,26.54,28.52,32.34,33.67,33.84];
+let data2 = [
+  15, 15.3, 15.7, 16.7, 17.6, 17.9, 18.15, 17.96, 18.23, 19.56, 21.32, 22.78,
+  24.08, 26.21, 28.24, 32.1, 33.89, 33.87
+];
+let yMax = 500;
+let dataShadow = [];
+for (let i = 0; i < data.length; i++) {
+  dataShadow.push(yMax);
+}
+option = {
+  title: {
+    text: 'Three point shots attempted evolution'
+  },
+  xAxis: {
+    data: dataAxis,
+    axisLabel: {
+      inside: false
+      // color: '#fff'
+    },
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    z: 10
+  },
+  yAxis: {
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#999'
+    }
+  },
+  dataZoom: [
+    {
+      type: 'inside'
+    }
+  ],
+  series: [
+    {
+      type: 'bar',
+      showBackground: true,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#562104' },
+          { offset: 0.5, color: '#ab4e1b' },
+          { offset: 1, color: '#e37439' }
+        ])
+      },
+      emphasis: {
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#eba103' },
+            { offset: 0.7, color: '#fade53' },
+            { offset: 1, color: '#ffd500' }
+          ])
+        }
+      },
+      data: data
+    },
+    {
+      type: 'bar',
+      showBackground: true,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#5d1902' },
+          { offset: 0.5, color: '#ae2e03' },
+          { offset: 1, color: '#f13e03' }
+        ])
+      },
+      emphasis: {
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#eba103' },
+            { offset: 0.7, color: '#fade53' },
+            { offset: 1, color: '#ffd500' }
+          ])
+        }
+      },
+      data: data2
+    }
+  ]
+};
+// Enable data zoom when user click bar.
+const zoomSize = 6;
+myChart.on('click', function (params) {
+  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
+  myChart.dispatchAction({
+    type: 'dataZoom',
+    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
+    endValue:
+      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
+  });
+});
+
+option && myChart.setOption(option);
diff --git a/js/3PP_win_lose.js b/js/3PP_win_lose.js
new file mode 100644
index 0000000..270ab87
--- /dev/null
+++ b/js/3PP_win_lose.js
@@ -0,0 +1,109 @@
+var chartDom = document.getElementById('3PP_win_lose');
+var myChart = echarts.init(chartDom);
+var option;
+
+// prettier-ignore
+let dataAxis = ['2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'];
+// prettier-ignore
+let data = [37.57,38.42,38.45,38.03,38.32,38.35,38.02,37.96,37.45,38.21,38.24,38.04,38.16,38.36,38.34,38.23,38.25,39.1];
+let data2 = [
+  30.2, 31.24, 31.22, 31.45, 31.65, 32.43, 31.39, 31.65, 31.47, 31.75, 31.85,
+  31.67, 31.73, 31.76, 32.86, 32.64, 32.76, 32.8
+];
+let yMax = 500;
+let dataShadow = [];
+for (let i = 0; i < data.length; i++) {
+  dataShadow.push(yMax);
+}
+option = {
+  title: {
+    text: 'Three point shots percentages evolution'
+  },
+  xAxis: {
+    data: dataAxis,
+    axisLabel: {
+      inside: false
+      // color: '#fff'
+    },
+    axisTick: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    z: 10
+  },
+  yAxis: {
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#999'
+    }
+  },
+  dataZoom: [
+    {
+      type: 'inside'
+    }
+  ],
+  series: [
+    {
+      type: 'bar',
+      showBackground: true,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#562104' },
+          { offset: 0.5, color: '#ab4e1b' },
+          { offset: 1, color: '#e37439' }
+        ])
+      },
+      emphasis: {
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#eba103' },
+            { offset: 0.7, color: '#fade53' },
+            { offset: 1, color: '#ffd500' }
+          ])
+        }
+      },
+      data: data
+    },
+    {
+      type: 'bar',
+      showBackground: true,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#5d1902' },
+          { offset: 0.5, color: '#ae2e03' },
+          { offset: 1, color: '#f13e03' }
+        ])
+      },
+      emphasis: {
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#eba103' },
+            { offset: 0.7, color: '#fade53' },
+            { offset: 1, color: '#ffd500' }
+          ])
+        }
+      },
+      data: data2
+    }
+  ]
+};
+// Enable data zoom when user click bar.
+const zoomSize = 6;
+myChart.on('click', function (params) {
+  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
+  myChart.dispatchAction({
+    type: 'dataZoom',
+    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
+    endValue:
+      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
+  });
+});
+
+option && myChart.setOption(option);
diff --git a/js/IvyLeagueMap.js b/js/IvyLeagueMap.js
deleted file mode 100644
index 1ec0f60..0000000
--- a/js/IvyLeagueMap.js
+++ /dev/null
@@ -1,156 +0,0 @@
-IvyLeagueMap = function(_parentElement, _data,_mapPosition) {
-
-    this.parentElement = _parentElement;
-    this.data = _data;
-    this.center = _mapPosition;
-
-    L.Icon.Default.imagePath = 'img/';
-
-    this.margin = {
-        top: 40,
-        right: 10,
-        bottom: 40,
-        left: 60
-    };
-
-    this.width = 960 - this.margin.left - this.margin.right;
-    this.height = 500 - this.margin.top - this.margin.bottom;
-
-    this.initVis();
-}
-
-/*
- *  Initialize station map
- */
-
-IvyLeagueMap.prototype.initVis = function() {
-    var vis = this;
-    vis.map = L.map(vis.parentElement,{
-        dragging:false,
-        touchZoom: false,
-        scrollWheelZoom: false,
-        doubleClickZoom: false,
-        boxZoom: false,
-        tap: false,
-        keyboard: false,
-        zoomControl: false,
-        attributionControl: false,
-        prefix: false
-    }).setView(vis.center,6);
-
-    L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
-        attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ'
-    }).addTo(vis.map);
-
-
-    vis.wrangleData();
-}
-
-/*
- *  Data wrangling
- */
-
-IvyLeagueMap.prototype.wrangleData = function() {
-    var vis = this;
-
-    // Currently no data wrangling/filtering needed
-    vis.displayData = vis.data;
-    // Update the visualization
-    vis.updateVis();
-}
-
-
-/*
- *  The drawing function
- */
-
-IvyLeagueMap.prototype.updateVis = function() {
-    var vis = this;
-
-    var LeafIcon = L.Icon.extend({
-        options: {
-            shadowUrl: 'img/marker-shadow.png',
-            iconSize: [30,50],
-            iconAnchor: [12, 41],
-            popupAnchor: [0, -28]
-        }
-    });
-
-    // https://icons8.com/icon/set/school-mates/all
-    var harvardMarker = new LeafIcon({ iconUrl: 'img/harvardlogo.jpg' });
-
-    vis.markerLayer = L.layerGroup().addTo(vis.map);
-    updateBarChart("Harvard University", vis);
-
-    // //create marker
-    $.each(vis.displayData,function(index,d){
-        var label = "<strong>"+d.name+"</strong><br/>";
-        var school = d.name;
-
-        var Marker = new LeafIcon({ iconUrl: 'img/'+d.icon });
-
-
-        // if (d.name == "Harvard University"){
-        vis.marker = L.marker([d.lat, d.long],{icon: Marker})
-            .bindTooltip(label).on("click",function(d){
-                updateBarChart(school, vis);
-            });
-
-        // Add marker to layer group
-        vis.markerLayer.addLayer(vis.marker);
-    })
-};
-
-function displayBarChart(event) {
-    // Get the bar chart element
-    var chart = document.getElementById("bar-chart");
-  
-    // Make the chart visible
-    chart.style.display = "block";
-  
-    // Create the bar chart using D3.js or Chart.js
-    // (code for creating the chart goes here)
-    // Set the dimensions of the chart
-  var width = 500;
-  var height = 500;
-
-  // Set the data for the chart
-  var data = [
-    { label: "Category 1", value: 50 },
-    { label: "Category 2", value: 25 },
-    { label: "Category 3", value: 75 }
-  ];
-
-  // Create a scale to map the data values to the height of the bars
-  var yScale = d3.scaleLinear()
-    .domain([0, d3.max(data, function(d) { return d.value; })])
-    .range([height, 0]);
-
-  // Create an SVG element to contain the chart
-  var svg = d3.select("#bar-chart")
-    .append("svg")
-    .attr("width", width)
-    .attr("height", height);
-
-  // Create the bars
-  svg.selectAll("rect")
-    .data(data)
-    .enter()
-    .append("rect")
-    .attr("x", function(d, i) { return i * (width / data.length); })
-    .attr("y", function(d) { return yScale(d.value); })
-    .attr("width", width / data.length - 10)
-    .attr("height", function(d) { return height - yScale(d.value); });
-}
-
-  
-  // Add event listeners to the images
-  var image1 = document.getElementById("image1");
-  image1.addEventListener("click", displayBarChart);
-  
-  var image2 = document.getElementById("image2");
-  image2.addEventListener("click", displayBarChart);
-  
-  var image3 = document.getElementById("image3");
-  image3.addEventListener("click", displayBarChart);
-  
\ No newline at end of file
diff --git a/js/final.js b/js/final.js
new file mode 100644
index 0000000..36c3b69
--- /dev/null
+++ b/js/final.js
@@ -0,0 +1,135 @@
+var nameset=[];//数组初始化
+var numset1=[];
+var numset2=[];
+
+
+
+
+var chartDom = document.getElementById('final');
+var myChart = echarts.init(chartDom,'essos');
+var option;
+
+
+option = {
+    title: {
+        text: ''
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['FGA_winner', 'FG_winner', 'TPA_winner', 'TP_winner','FGA_loser', 'FG_loser', 'TPA_loser', 'TP_loser']
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018',]
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: 'FGA_winner',
+        type: 'line',
+        // stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [92,85.33,91.83,88.5,92.86,90.5,88.83,90.67,75.86,79.25,86.8,80.8,79.67,90.67,74.71,85.75,79,74.83,75.5,67.4,85.33,77.8,72.25,74.5,73.2,71.86,72.83,72,77.33,83.2,76.29,72.67,77,82.17,72.4,83,82.43,91,84.75]
+      },
+      {
+        name: 'FG_winner',
+        type: 'line',
+        // stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [45,40.17,45.5,43,42,46.33,43.67,46.67,35.43,41.75,39.4,42.6,40.17,43.83,31.86,40.5,32.83,32.33,32.5,30,41,36.2,36.5,32.17,31.4,30.86,33.33,32,34.33,38,31.86,33,35.33,38,38.2,36.17,37.57,43.2,43.5]
+      },
+      {
+        name: 'TPA_winner',
+        type: 'line',
+        // stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [0.67,2.83,1.5,0.75,3.29,3.83,5.33,6.83,5.71,5,11.2,4.2,10.83,11.5,17.29,23,22.83,18.67,14.67,12.4,15.33,15,15.25,12.5,13.2,18.29,17.5,19.5,20.17,17.2,17.86,20.67,20.5,20.5,23.6,31,24.29,37.2,34]
+      },
+      {
+        name: 'TP_winner',
+        type: 'line',
+        // stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: [0,0.5,0.17,0,1.29,1.33,1.67,2.67,1.43,1.25,5,1,4.17,5.33,5.29,9.25,6,6.5,4.33,4.2,5.83,7.2,7.25,4,4.2,7.29,5.33,7.25,8.67,6.4,5,8.5,8.33,9.33,11,11.17,8,14.2,12.75]
+    },
+    {
+        name: 'FGA_loser',
+        type: 'line',
+        // stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+            focus: 'series'
+        },
+        data: [88.33,89.33,92.5,90.25,90.71,92,92.83,86.17,81,77.5,82,74.8,79.83,86.83,81.43,87.5,69.67,71.67,71.83,78.6,78.5,83.4,88.75,82,76,81.57,78.17,78.5,74.83,75.2,76.14,74.67,80.4,79.57,71.2,85.17,82.57,90.2,92]
+        },
+        {
+        name: 'FG_loser',
+        type: 'line',
+        // stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+            focus: 'series'
+        },
+        data: [43,33.83,46.17,40.75,46.71,43.83,41.83,43.67,38.57,36,37.4,33.4,35.33,40.67,33.14,40.75,31,30.83,31.83,30.8,36.33,35.4,38.75,30.33,31.6,35.43,33,31,33,32.2,33,33.67,36.6,35.86,33.6,32.67,35.57,41.6,37.75]
+        },
+        {
+        name: 'TPA_loser',
+        type: 'line',
+        // stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+            focus: 'series'
+        },
+        data: [2.67,1.83,2.33,3.75,2.57,5.67,2.83,7,4.43,10.75,9.4,9.2,8.67,10.33,15,29.5,17,14.17,10,10.8,19.33,11.8,14.75,13.83,17.8,10.71,19.33,18.75,20.67,23,15.29,21.67,21,21.43,23.2,27.83,36,34.6,30.5        ]
+        },
+        {
+        name: 'TP_loser',
+        type: 'line',
+        // stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+            focus: 'series'
+        },
+        data: [0.17,0.5,0.67,0.75,0.86,2.17,0.83,2.33,1.29,3.25,2.2,2.6,1.67,4.5,5.14,10.25,5.33,5.83,2.17,2.2,8.17,3.4,4.5,3.83,4.4,2.57,5.5,5.5,7.17,7.6,4.71,7.5,6.4,8.71,9.2,8.17,13.43,13.2,9        ]
+        }
+    ]
+};
+myChart.setOption(option);
\ No newline at end of file