cs573-19s · lxie41 · Jan 17, 2019 · Jan 17, 2019 · Jan 17, 2019 · Jan 17, 2019
diff --git a/README.md b/README.md
@@ -1,78 +1,31 @@
-Assignment 1 - Hello World: GitHub and d3  
-===
+Assignment 1 name : Boston Celtics performance of last 10 games
 
-This is a starting project to make sure you can write and host a webpage that generates graphics using d3. 
+As a super fan of the Boston Celtics, I believe that most fans like me want to know the team's recent performance. So I designed and produced this page to show the status of the last ten teams and the performance of the home and away games in some aspects.
 
-The primary goal is to be able to generate graphics primitives (circles, rectangles, lines, polygons) at different locations on the screen with different colors. 
+In this website, it's mainly divided into three parts.
+1)First part: Explain that the team introduced by the website is a Celtics. As everyone knows, green is the main color of the Celtics, so about the team name I used green.
+2)Second part: I created a line chart and used this line chart to represent the scores of each of the last ten Celtics, so that the viewer has a certain understanding of the team's recent offensive status. Each game has a score for each point. The red point indicates the home game and the black point indicates the away game. This point becomes larger when the mouse is over the point.（I originally wanted to make a specific score on the game when I clicked on the mouse, but I tried it for a long time and filed.）
+3)Third part: In this section, I made two polygons, the red one indicates the home field, the black one represents the away game, and then I collected the data of the home and away games in the last ten games to show the team's situation.
 
-The secondary goal is to introduce you to coding on GitHub, including creating a gh-pages branch to host your visualizations.
+work link: 
+https://jaylen0401.github.io/01-ghd3/
 
-You may write everything from scratch, or start with demo programs from books or the web. 
-If you do start with code that you found, you **must identify** the source of the code in your README and, most importantly, make non-trivial changes to the code to make it your own so you really learn what you're doing. 
+screenshots:
+1)https://github.com/Jaylen0401/01-ghd3/blob/master/screenshot1.png
+2)https://github.com/Jaylen0401/01-ghd3/blob/master/screenshot2.png
 
-For example, you could download one of the d3.js examples, read it through so you understand what it's doing, and then change the appearance of the graphical output to use different color schemes, different primitive shapes, different layouts of the primitives, and so on.
+Technical Achievement Description:
+1)Added points, lines, circles, rectangles and polygons.
+2)Changed a variety of colors and applied the judgment function.
+3)Defined the text size and position.
+4)Implement mouse interaction.
 
-Resources
----
+Design Achievement Description:
+1)Have an intuitive understanding of the team's recent offensive defense and overall situation.
+2)Improvements can be made to increase the interaction of mouse clicks to show the specifics of each game, and to increase the radar chart to show the whole situation of the team.
 
-If you need a JavaScript/HTML/CSS refresher, see [Technology Fundamentals by Scott Murray](http://chimera.labs.oreilly.com/books/1230000000345/ch03.html#_html) and/or [JavaScript Codeacademy](https://www.codecademy.com/en/tracks/javascript).
-
-If you need a Git/GitHub refreseher, see [GitHub Bootcamp](https://help.github.com/categories/bootcamp/), the [GitHub Guides](https://guides.github.com/) (especially the ones on Hello World, and Understanding the GitHub Flow, and Forking Projects), and [CodeSchool's Try Git Course](https://www.codeschool.com/courses/try-git).
-
-Requirements
----
-
-1. Your project should contain at least four kinds of graphics primitives (circles, rectangles, lines, polygons) in different colors. 
-2. Your document should identify the source of the code if you start with code that you found. 
-3. Your code should be forked from the GitHub repo and linked using GitHub pages. See the "GitHub Details" section below for detailed instructions on how to do this.
-
-GitHub Details
----
-
-- Fork the GitHub Repository for Assignment 1. You now have a copy associated with your username.
-- Make changes to index.html to fulfill the project requirements. 
-- Make sure your "master" branch matches your "gh-pages" branch. See the GitHub Guides referenced above if you need help.
-- Edit the README.md with a link to your gh-pages site "http://YourUsernameGoesHere.github.io/01-ghd3/index.html".
-- To submit, make a [Pull Request](https://help.github.com/articles/using-pull-requests/) on the original repository.
-
-Vis Details
----
-
-For this project you should use d3.js. 
-You can learn from examples on the [d3.js](http://d3js.org) site or start from scratch.
-
-See the [Using d3js](https://github.com/mbostock/d3/wiki#using) documentation for how to run your own local server.
-
-Creative solutions are welcome! In the past I've seen recreations of paintings, interactives, and more.
-
-Go beyond the minimum requirements of this project.
-Experiment with other aspects of the [d3 API](https://github.com/mbostock/d3/wiki/API-Reference) and [d3 Tutorials](https://github.com/mbostock/d3/wiki/Tutorials). 
-Try making the elements interactive, for example, or animate them.
-
-Grading
----
-
-Grades are on a 120 point scale. 
-96 points will be graded for functionality: the program does what the assignment requests with an informative README. 
-
-We will use Google Chrome to view submissions. 
-Be sure to test your code there.
-
-Below are some, but not necessarily all, of the key points we will consider during grading:
-
-- Circles and Rectangles  
-- Lines  
-- Polygons  
-- Different colors  
-- README Quality
-    - A description of what you have created. 1-2 screenshots are recommended for the README.  
-    - A working link to the hosted files (usually the gh-pages 'live' url)  
-    - Section for Technical and Design Achievements
-
-Technical Achievement Desription -- 12  
-Design Achievement Description -- 12
-
-Remember, it is up to *you* to define what constitutes a technical and design achievements.
-Be ambitious as these are designed to allow you to shape your learning.
-These are the only way to move from B to A territory.
+Reference:
+1)https://www.dashingd3js.com/table-of-contents
+2)http://xgfe.github.io/2015/11/23/chenwubai/d3-basicCharts-line/
+3)https://getbootstrap.com/docs/4.0/components/alerts/
 
diff --git a/index.html b/index.html
@@ -1,10 +1,197 @@
-<script src="https://d3js.org/d3.v5.min.js"></script>
-
-<script>
-  console.log(d3); // test if d3 is loaded
-  // Add an SVG
-  // Add Rectangles
-  // Add Circles
-  // Add Lines
-  // Add Polygons
-</script>
+<!DOCTYPE html>
+<html>
+  <head>
+      <meta charset="UTF-8">
+      <title>Boston Celtics performance of last 10 games</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+  </head>
+  <body>
+    <div id="Team_name" style="font-size:80px; text-align: center; color: green; border: 2px solid black">
+      Boston Celtics
+    </div>
+    <div class="alert alert-success" role="alert" style="font-size: 20px; text-align: justify">
+	    Points per game
+	    </div>
+    <div id="Line_chart" style="text-align: center"></div>
+    <div class="alert alert-success" role="alert" style="font-size: 20px; text-align: justify">
+      Home & Away
+      </div>
+    <div id="History" style="text-align: center"></div>
+  </body>
+
+  <script>
+    console.log(d3); //test if d3 is loaded
+// three div
+    var width=1300,
+        height=500;
+
+    var svg_L=d3.select("#Line_chart")
+                .append("svg")
+                .attr("width", width)
+                .attr("height", height);
+
+    var svg_H=d3.select("#History")
+                .append("svg")
+                .attr("width", width)
+                .attr("height", height);
+
+//data
+    var gamepoint=[[1, 113], [2, 112], [3, 111], [4, 115], [5, 114],
+                   [6, 116], [7, 135], [8, 99], [9, 103],  [10, 102]];
+
+//line_chart
+
+    var margin={top:30, right:50, bottom:100, left:200};
+
+
+    var xScale = d3.scaleLinear()
+                   .domain([1, 10])
+                   .range([0,width - margin.left - margin.right]);
+    var yScale = d3.scaleLinear()
+                   .domain([90, 140])
+                   .range([height - margin.top - margin.bottom, 0]);
+    var XAxis = d3.axisBottom()
+                  .scale(xScale);
+
+    var YAxis = d3.axisLeft()
+                  .scale(yScale);
+
+    svg_L.append("g")
+       .attr("class", "axis")
+       .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")")
+       .call(XAxis);
+
+    svg_L.append("g")
+           .attr("class", "axis")
+           .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+           .call(YAxis);
+    var linePath = d3.line()
+                     .x(function(d) {return xScale(d[0]) })
+                     .y(function(d) {return yScale(d[1]) });
+//add line
+    svg_L.append("g")
+         .append("path")
+         .attr("class", "line-path")
+         .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+         .attr("d", linePath(gamepoint))
+         .attr("fill", "none")
+         .attr("stroke-width", 3)
+         .attr("stroke", "green");
+//add circle
+    svg_L.append("g")
+         .selectAll("circle")
+         .data(gamepoint)
+         .enter()
+         .append("circle")
+         .attr("r", 5)
+         .attr("transform", function(d) {
+           return "translate(" + (xScale(d[0]) + margin.left) + "," + (yScale(d[1]) + margin.top) + ")"
+         })
+         .attr("fill", function(d,i) {
+           var returnColor;
+           if (i === 3) {returnColor = "red";
+           }else if (i === 4) {returnColor = "red";
+           }else if (i === 5) {returnColor = "red";
+           }else if (i === 6) {returnColor = "red";}
+
+           return returnColor;
+          })
+         .on("mouseover", over)
+         .on("mouseout", out);
+
+//mouse
+     function over(d,i){
+         d3.select(this)
+           .attr("r",10)
+        };
+
+
+     function out(d,i){
+         d3.select(this)
+           .attr("r",5)
+        };
+
+
+
+
+
+
+
+
+//home & away data
+//polygon
+    svg_H.append("polygon")
+         .attr("points", "250,10 200,60 200,120 300,120 300,60")
+         .attr("fill", "red");
+
+    svg_H.append("text")
+         .attr("x", 350)
+         .attr("y", 40)
+         .attr("stroke", "red")
+         .attr("stroke-width", 1)
+         .attr("font-size", 18)
+         .text("Home data:");
+
+     svg_H.append("text")
+          .attr("x", 350)
+          .attr("y", 70)
+          .attr("stroke", "red")
+          .attr("stroke-width", 1)
+          .attr("font-size", 18)
+          .text("win:4 lose:0");
+     svg_H.append("text")
+          .attr("x", 350)
+          .attr("y", 100)
+          .attr("stroke", "red")
+          .attr("stroke-width", 1)
+          .attr("font-size", 18)
+          .text("Points: 120");
+     svg_H.append("text")
+          .attr("x", 350)
+          .attr("y", 130)
+          .attr("stroke", "red")
+          .attr("stroke-width", 1)
+          .attr("font-size", 18)
+          .text("Opponent points:99.5");
+
+     svg_H.append("text")
+          .attr("x", 900)
+          .attr("y", 40)
+          .attr("stroke", "red")
+          .attr("stroke-width", 1)
+          .attr("font-size", 18)
+          .text("Away data:");
+
+     svg_H.append("text")
+          .attr("x", 900)
+          .attr("y", 70)
+          .attr("stroke", "red")
+          .attr("stroke-width", 1)
+          .attr("font-size", 18)
+          .text("win:1 lose:5");
+     svg_H.append("text")
+          .attr("x", 900)
+          .attr("y", 100)
+          .attr("stroke", "red")
+          .attr("stroke-width", 1)
+          .attr("font-size", 18)
+          .text("Points: 106.7");
+     svg_H.append("text")
+          .attr("x", 900)
+          .attr("y", 130)
+          .attr("stroke", "red")
+          .attr("stroke-width", 1)
+          .attr("font-size", 18)
+          .text("Opponent points:113.1");
+
+//polygon2
+    svg_H.append("polygon")
+         .attr("points", "750,10 850,10 850,70 800,120 750,70")
+         .attr("fill", "black");
+
+
+
+
+  </script>
+</html>
diff --git a/screenshot1.png b/screenshot1.png
diff --git a/screenshot2.png b/screenshot2.png