a1-YufeiLinUlysses-Yufei-Lin

README.md

@@ -1,86 +1,62 @@
 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. 
+Link to project: [https://yufeilinulysses.github.io/a1-ghd3/index.html](https://yufeilinulysses.github.io/a1-ghd3/index.html)
 
-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
+Project Descriptions
 ---
 
-If you need a JavaScript/HTML/CSS refresher, see [JavaScript Codeacademy](https://www.codecademy.com/en/tracks/javascript) or find one of your choosing on the web.
+This project is targeted towards a demonstration on how D3 could be used to illustrate data. Therefore, it is set to be an interactive interface for users to submit an array like data and manipulate with the shapes they have created. This application provides several different input for users to change different perspectives of the data visualization: shape, colors, distance and scale.  
 
-If you need a Git/GitHub refreseher, some possible resources include [Getting Started with GitHub](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).
+<bold>I. Circles</bold>
 
-Requirements
----
+This section provides a loading transition for the circles, and the distance between circles could be determined by the distance slider, and the color A and B would be indicating the value of the elements.   
 
-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.
+<div style="text-align:center">
+<img src="./images/circles.JPG">
+</div>
 
-GitHub Details
----
+<bold>II. Rectangles</bold>
 
-- 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 "main" 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".
+Rectangles are designed in a way to represent data in a bar chart format. This has a similar feature as the circles. And these rectangles could be aligned on different angles to make different arrangement for data representations. 
 
-Submission Details
----
-- To submit, make a [Pull Request](https://help.github.com/articles/using-pull-requests/) on the original repository.
-- Note: name your pull request using the following scheme: 
-```
-a1-your Gh username-your first name-your lastname
+<div style="text-align:center">
+<img src="./images/rectangles.JPG">
+</div>
 
-```
+<bold>III. Line</bold>
 
-Vis Details
----
+This line graph is using the D3 line feature and having a similar color schema as circles and rectangles.   
 
-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.
+<div style="text-align:center">
+<img src="./images/lines.JPG">
+</div>
 
-See the [Using d3js](https://github.com/mbostock/d3/wiki#using) documentation for how to run your own local server.
+<bold>IV. Path</bold>
 
-Creative solutions are welcome! In the past I've seen recreations of paintings, interactives, and more.
+In this section, data is used to form a polygon with a closed path.   
 
-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.
+<div style="text-align:center">
+<img src="./images/path.JPG">
+</div>
 
-Grading
+Technical Achievement Desription
 ---
 
-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.
+1. Application of Bootstrap.js for better page arrangements
+2. Utilizes all four shapes with a variation in colors and transitions
+3. Offer slidebar and other ways for user interactivity
 
-Below are some, but not necessarily all, of the key points we will consider during grading:
+Design Achievement Description
+---
 
-- Circles and Rectangles  
-- Lines  
-- Paths  
-- 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
+1. Provide sufficient amount of ways for users to interact with data
+2. Offer a range of color palette for users to choose from
+3. Circles are aligned specifically to achieve an artistic feeling.
 
-Technical Achievement Desription -- 12  
-Design Achievement Description -- 12
+Citation
+---
 
-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.
+1. https://www.d3-graph-gallery.com/graph/custom_color.html
+2. https://css-tricks.com/snippets/javascript/random-hex-color/