Assignment 1

README.md

@@ -1,78 +1,24 @@
 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.
+Link to page:
+http://mcorace.github.io/01-ghd3/index.html
 
 Resources
 ---
+The following sites were used to identify different attributes of d3 shapes and how to implement them.
 
-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.
+https://www.dashingd3js.com/svg-basic-shapes-and-d3js
 
-See the [Using d3js](https://github.com/mbostock/d3/wiki#using) documentation for how to run your own local server.
+https://stackoverflow.com/questions/25418333/how-to-draw-straight-line-in-d3-js-horizontally-and-vertically
 
-Creative solutions are welcome! In the past I've seen recreations of paintings, interactives, and more.
+https://stackoverflow.com/questions/13204562/proper-format-for-drawing-polygon-data-in-d3
 
-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
+Description
 ---
+This assinment was completed to simulate an image from my favorite book series. The illustration represents the different factions in the series The Stormlight Archive, by Brandon Sanderson. Here is the image I derived my project from.
+![alt text](https://vignette.wikia.nocookie.net/stormlightarchive/images/e/eb/Surgebinders.jpg/revision/latest?cb=20141103012851)
 
-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
+My final submission is a simplified version of this, but it allowed me to become familiar with d3 shape attributes. I used the line, rectangle, circle, and polygon shapes together to construct this image. It was helpful to learn how to organize shapes on a screen with d3 and fit objects within an svg. It was also important to learn how layering works for d3.
 
-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.
+Ideally I would have been able to implement a way to display the name of each faction when the mouse hovered over, but I was unable to implement it for more than a single circle. I attempted to use a tooltip, but it only allowed for a single name to be displayed, no matter what circle was highlighted.
 

index.html

@@ -1,10 +1,158 @@
-<script src="https://d3js.org/d3.v5.min.js"></script>
+script src="https://d3js.org/d3.v5.min.js"></script>
+
+
+
+<svg width="1300", height="700"></svg>
 
 <script>
-  console.log(d3); // test if d3 is loaded
-  // Add an SVG
-  // Add Rectangles
-  // Add Circles
-  // Add Lines
-  // Add Polygons
+
+	console.log(d3); // test if d3 is loaded
+
+	// Add an SVG
+
+	var svg = d3.select("svg")
+
+	// Add Rectangles
+
+
+	svg.append("rect").attr("width",1200).attr("height",600)
+	.attr("x",50).attr("y",50)
+	.attr("stroke", d3.rgb(99, 60, 2)).attr("stroke-width","20").attr("fill",d3.rgb(109, 96, 77));
+
+	// Add Circles
+
+
+	//Bondsmiths
+	svg.append("circle").attr("cx", 650).attr("cy", 275).attr("r", 50)
+	.attr("stroke",d3.rgb(186, 186, 39)).attr("stroke-width",5).attr("fill","white");
+
+	//Truthwatchers
+	svg.append("circle").attr("cx", 650).attr("cy", 400).attr("r", 50)
+	.attr("stroke","green").attr("stroke-width",5).attr("fill","white");
+
+	//Windrunners
+	svg.append("circle").attr("cx", 950).attr("cy", 150).attr("r", 50)
+	.attr("stroke","blue").attr("stroke-width",5).attr("fill","white");
+
+	//Edgedancers
+	svg.append("circle").attr("cx", 950).attr("cy", 550).attr("r", 50)
+	.attr("stroke",d3.rgb(193, 181, 162)).attr("stroke-width",5).attr("fill","white");
+
+	//Stonewards
+	svg.append("circle").attr("cx", 350).attr("cy", 150).attr("r", 50)
+	.attr("stroke","orange").attr("stroke-width",5).attr("fill","white");
+
+	//Lightweavers
+	svg.append("circle").attr("cx", 350).attr("cy", 550).attr("r", 50)
+	.attr("stroke","magenta").attr("stroke-width",5).attr("fill","white");
+
+	//Willshapers
+	svg.append("circle").attr("cx", 200).attr("cy", 250).attr("r", 50)
+	.attr("stroke","purple").attr("stroke-width",5).attr("fill","white");
+
+	//Elsecallers
+	svg.append("circle").attr("cx", 200).attr("cy", 450).attr("r", 50)
+	.attr("stroke",d3.rgb(66, 75, 117)).attr("stroke-width",5).attr("fill","white");
+
+	//Skybreakers
+	svg.append("circle").attr("cx", 1100).attr("cy", 250).attr("r", 50)
+	.attr("stroke",d3.rgb(184, 117, 206)).attr("stroke-width",5).attr("fill","white");
+
+	//Dustbringers
+	svg.append("circle").attr("cx", 1100).attr("cy", 450).attr("r", 50)
+	.attr("stroke",d3.rgb(232, 183, 99)).attr("stroke-width",5).attr("fill","white");
+
+	// Add Lines
+
+
+	svg.append("line").attr("x1",350).attr("y1",150).attr("x2",650).attr("y2",275)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",650).attr("y1",275).attr("x2",950).attr("y2",150)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",950).attr("y1",150).attr("x2",1100).attr("y2",250)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",1100).attr("y1",250).attr("x2",1100).attr("y2",450)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",1100).attr("y1",450).attr("x2",950).attr("y2",550)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",950).attr("y1",550).attr("x2",650).attr("y2",400)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",650).attr("y1",400).attr("x2",350).attr("y2",550)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",350).attr("y1",550).attr("x2",200).attr("y2",450)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",200).attr("y1",450).attr("x2",200).attr("y2",250)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+	svg.append("line").attr("x1",200).attr("y1",250).attr("x2",350).attr("y2",150)
+  	.style("stroke", "white").attr("stroke-width",20);
+
+
+	// Add Polygons
+
+
+	//Bondsmiths
+	svg.append("polygon")
+	.attr("points", "650,315 690,275 680,275 675,255 650,275 625,255 620,275 610,275")
+	.attr("stroke",d3.rgb(186, 186, 39)).attr("fill",d3.rgb(186, 186, 39));
+
+	//Stonewards
+	svg.append("polygon")
+	.attr("points", "350,175 380,140 350,125 320,140")
+	.attr("stroke","orange").attr("fill","orange");
+
+	//Windrunners
+	svg.append("polygon")
+	.attr("points", "950,125 975,150 975,175 955,150 950,185 945,150 925,175 925,150")
+	.attr("stroke","blue").attr("fill","blue");
+
+	//Skybreakers
+	svg.append("polygon")
+	.attr("points", "1100,285 1140,250 1105,240 1100,210 1095,240 1060,250")
+	.attr("stroke",d3.rgb(184, 117, 206)).attr("fill",d3.rgb(184, 117, 206));
+
+	//Dustbringers
+	svg.append("polygon")
+	.attr("points", "1115,475 1130,425 1115,445 1085,445 1070,425 1085,475")
+	.attr("stroke",d3.rgb(232, 183, 99)).attr("fill",d3.rgb(232, 183, 99));
+
+	//Edgedancers
+	svg.append("polygon")
+	.attr("points", "950,585 990,550 965,560 975,530 950,550 925,530 935,560 910,550")
+	.attr("stroke",d3.rgb(193, 181, 162)).attr("fill",d3.rgb(193, 181, 162));
+
+	//Truthwatchers
+	svg.append("polygon")
+	.attr("points", "650,425 620,380 650,400 680,380")
+	.attr("stroke","green").attr("fill","green");
+
+	//Lightweavers
+	svg.append("polygon")
+	.attr("points", "350,580 380,550 360,520 360,540 340,540 340,520 320,550")
+	.attr("stroke","magenta").attr("fill","magenta");
+
+	//Elsecallers
+	svg.append("polygon")
+	.attr("points", "200,480 210,450 200,420 190,450")
+	.attr("stroke",d3.rgb(66, 75, 117)).attr("fill",d3.rgb(66, 75, 117));
+	svg.append("polygon")
+	.attr("points", "165,450 185,425 175,450 185,475")
+	.attr("stroke",d3.rgb(66, 75, 117)).attr("fill",d3.rgb(66, 75, 117));
+	svg.append("polygon")
+	.attr("points", "235,450 215,425 225,450 215,475")
+	.attr("stroke",d3.rgb(66, 75, 117)).attr("fill",d3.rgb(66, 75, 117));
+
+	//Willshapers
+	svg.append("polygon")
+	.attr("points", "200,285 190,245 170,235 195,225 200,215 205,225 230,235 210,245")
+	.attr("stroke","purple").attr("fill","purple");
+
 </script>