Umesh Nair - CS 573: Assignment 1

README.md

@@ -1,78 +1,27 @@
 Assignment 1 - Hello World: GitHub and d3  
 ===
 
-This is a starting project to make sure you can write and host a webpage that generates graphics using d3. 
-
-The primary goal is to be able to generate graphics primitives (circles, rectangles, lines, polygons) at different locations on the screen with different colors. 
-
-The secondary goal is to introduce you to coding on GitHub, including creating a gh-pages branch to host your visualizations.
-
-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. 
-
-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.
-
-Resources
+Description:-
 ---
+X and O is a simple, fun and popular game, and my original intention was to simulate an instance of this game. But unfortunately, since I am new to d3, my understanding of using transitions and other dynamic components was inaccurate, and hence I was not able to use them as I had intended to. In the end, I had to content myself with just showing the final result and snapshot of the game, which is shown below: -
 
-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).
+![X and O_snapshot](XandO_snap.png)
 
-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
+gh-pages site link: -
 ---
+https://umeshnair.github.io/01-ghd3/index.html
 
-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
+Technical Achievements: -
 ---
+1. Gained a good understanding of what are svg's and how to work with them.
+2. Successfully drew different shapes like circles, rectangles with distinct dimensions and color fills.
+3. Improved upon my initial understanding of using transitions and making visualizations dynamic.
 
-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
+Design Achievements: -
 ---
+1. Layout and placement of shapes and objects on the screen to generate an effective visualization.
+2. Gained an understanding of colors and its combinations.
+3. Gained an understanding of the use of different shapes and their size variations to clearly differentiate the objects.
 
-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.
-
+References:
+https://stackoverflow.com/questions/13204562/proper-format-for-drawing-polygon-data-in-d3

index.html

@@ -1,10 +1,113 @@
 <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>
+<svg width="800", height="600"></svg>
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CS 573 Assignment 1 - X and O</title>
+  </head>
+  <body>
+    <script>
+		console.log(d3); // test if d3 is loaded
+
+		// Adding an SVG
+		var svg = d3.select("svg");
+
+		// Building the board(rectangle)
+		svg.append("rect")
+			.attr("x", 25)
+			.attr("y", 25)
+			.attr("width", 505)
+			.attr("height", 500)
+			.attr("fill", "cyan");
+
+		// Drawing the grid lines
+		svg.append("line")
+			.style("stroke", "black") 
+			.attr("x1", 175)
+			.attr("y1", 50)
+			.attr("x2", 175)
+			.attr("y2", 500); 
+
+		svg.append("line")
+			.style("stroke", "black") 
+			.attr("x1", 350)
+			.attr("y1", 50)
+			.attr("x2", 350)
+			.attr("y2", 500); 
+
+		svg.append("line")
+			.style("stroke", "black") 
+			.attr("x1", 50)
+			.attr("y1", 175)
+			.attr("x2", 500)
+			.attr("y2", 175);
+
+		svg.append("line")
+			.style("stroke", "black") 
+			.attr("x1", 50)
+			.attr("y1", 350)
+			.attr("x2", 500)
+			.attr("y2", 350);
+
+		// Drawing a triangle(X) in the cell (2,2) - X first move
+		svg.append("polygon")
+			.attr("points", "260,210 310,310 210,310")
+			.style("fill", "blue")
+			.style("stroke", "black")
+			.style("strokeWidth", "10px");
+
+		// Drawing a circle(O) in the cell (2,1) - O first move
+		svg.append("circle")
+			.attr("cx", 100)
+			.attr("cy", 260)
+			.attr("r", 50)
+			.attr("fill", "green");
+
+		// Drawing a triangle(X) in the cell (1,3) - X second move
+		svg.append("polygon")
+			.attr("points", "430,55 480,145 380,145")
+			.style("fill", "blue")
+			.style("stroke", "black")
+			.style("strokeWidth", "10px");
+
+		// Drawing a circle(O) in the cell (3,1) - O second move
+		svg.append("circle")
+			.attr("cx", 100)
+			.attr("cy", 430)
+			.attr("r", 50)
+			.attr("fill", "green");
+
+		// Drawing a triangle(X) in the cell (1,1) - X third move
+		svg.append("polygon")
+			.attr("points", "100,55 50,145 150,145")
+			.style("fill", "blue")
+			.style("stroke", "black")
+			.style("strokeWidth", "10px");
+
+		// Drawing a circle(O) in the cell (3,3) - O third move
+		svg.append("circle")
+			.attr("cx", 430)
+			.attr("cy", 430)
+			.attr("r", 50)
+			.attr("fill", "green");
+
+		// Drawing a triangle(X) in the cell (1,2) - X winning move
+		svg.append("polygon")
+			.attr("points", "260,55 310,145 210,145")
+			.style("fill", "blue")
+			.style("stroke", "black")
+			.style("strokeWidth", "10px");		
+
+		// Appending a text below the board to declare the winner
+		svg.append("text")
+			.attr("class", "result")
+			.attr("x", 265)
+			.attr("y", 550)
+			.attr("font-size", "30px")
+			.attr("text-anchor", "middle")
+			.text("X WINS!!");
+	</script>
+  </body>
+</html>