a1-MilesGregg-Miles-Gregg

README-ASSIGNMENT.md

@@ -0,0 +1,86 @@
+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
+---
+
+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.
+
+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).
+
+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 "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".
+
+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
+
+```
+
+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.
+

README.md

@@ -1,86 +1,56 @@
 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
+Summary
 ---
 
-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.
+For Assignment 1 in CS480X I decided to make a a graph using California Covid Hospitalization data using the months March and December of 2021. Utilizing d3 and javascript I was able to plot this data using lines, circles, polygons(pendagon and triangle), and rectangles. I also used different colors for different shapes/lines on the graph. The API for d3 was very nice and intuitive to use for these graphs.
 
-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).
+-   **Miles Gregg**
 
-Requirements
----
+    -   GitHub: https://github.com/MilesGregg
 
-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
+Links
 ---
 
-- 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".
+- GitHub Pages: https://milesgregg.github.io/a1-ghd3/
+- GitHub Repository: https://github.com/MilesGregg/a1-ghd3
 
-Submission Details
+Technical Achievement Description
 ---
-- 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
 
-```
-
-Vis Details
----
+For the techical achievement for this assignment I was successfully able to get data from the California Covid-19 Hospital Data Website: https://data.chhs.ca.gov/dataset/covid-19-hospital-data. This allowed me to get certain data from different months to plot using d3. I plotted Covid-19 data in the state of California for  the months of March and December of 2021. Using Node.js http-server I was able to reload the webpage on port: http://127.0.0.1:8080/ whenever the HTML code would change. 
 
-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.
+![alt text](https://github.com/MilesGregg/a1-ghd3/blob/master/main.png?raw=true)
 
-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 Achievement Description
 ---
 
-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.
-
+For the design achievement I was able to make a accurate graph that represents very important data for people to see. I wanted to see the Covid Hospitalizations for the two completely different months of 2021. Designing the graph I made four different shapes for each statisic I am trying to show. The four statistics I'm trying to show are Vax and Unvax Hospitlizations in March 2021 and Vax and Unvax Hospitlizations in December 2021. For the different colors in my graph I was able to use Google Color Picker to choose different colors for different shpaes and lines. 
+
+![alt text](https://github.com/MilesGregg/a1-ghd3/blob/master/color_picker.png?raw=true)
+
+The polygon shapes were very difficult to do since I had to make points around the current point on the graph. I did this with the following code below. Basically it has 5-3 different points around the current point we are trying to plot. The 5-3 varies based of the shape I am trying to plot. It will then draw the polyPoints variable on the svg using the polygon feature in d3js. The only diffence between the triangle and pendagon code is that the array is different on the second line of code. The pendagon is a size of 5 and triangle is a size of 3.
+
+```js
+var polyPoints = []
+var pendagonSide = [[-10, -10], [10, -10], [15, 5], [0, 20], [-15, 5]]
+for (var i = 0; i < vax_hos_march.length; i++) {
+    var outputString = "";
+    for (var j = 0; j < pendegonSide.length; j++) {
+        var x = vax_hos_march[i][0] + (pendegonSide[j][0]*0.025);
+        var y = vax_hos_march[i][1] + (pendegonSide[j][1]*0.15);
+        outputString += xScaleGraph1(x.toString()) + "," + yScaleGraph1(y.toString()) + " "
+    }
+    polyPoints.push(outputString);
+}
+
+svg.append('g')
+    .selectAll("polygon")
+    .data(polyPoints)
+    .enter()
+    .append("polygon")
+    .attr("points", function(d) { return d })
+    .attr("transform", "translate(100, 100)")
+    .style("fill", "#1900ff");
+```

index.html

@@ -1,10 +1,184 @@
 <script src="https://d3js.org/d3.v6.min.js"></script>
+<svg width="2000" height="1000"></svg>
 
 <script>
-  console.log(d3); // test if d3 is loaded
-  // Add an SVG
-  // Add Rectangles
-  // Add Circles
-  // Add Lines
-  // Add Polygons
-</script>
+
+  d3.select("svg")
+      .append("text")
+      .attr("x", 20)
+      .attr("y", 40)
+      .attr("font-size", "40px")
+      .text("CS480X Assignment 1 - California Covid Hospitalizations in Dec and March 2021");
+
+  var vax_hos_dec = [[1, 97],[2, 79],[3, 62],[4, 54],[5, 73],[6, 73],[7, 45],[8, 57],[9, 56],[10,49],[11,53],[12,48],[13,60],[14,63],[15,67],[16,62],[17,59],[18,59],[19,54],[20,84],[21,108],[22,99],[23,85],[24,92],[25,86],[26,113],[27,159],[28,136],[29,123],[30,106],[31,78]];
+  var unvax_hos_dec = [[1, 250],[2, 200],[3, 237],[4, 172],[5, 181],[6, 234],[7, 228],[8, 207],[9, 176],[10,191],[11,179],[12,147],[13,173],[14,168],[15,148],[16,154],[17,159],[18,120],[19,132],[20,185],[21,140],[22,159],[23,167],[24,178],[25,167],[26,165],[27,203],[28,181],[29,165],[30,126],[31,95]];
+  var vax_hos_march = [[1, 0],[2, 3],[3, 2],[4, 2],[5, 2],[6, 2],[7, 2],[8, 2],[9, 1],[10,4],[11,6],[12,3],[13,5],[14,2],[15,6],[16,4],[17,2],[18,3],[19,3],[20,1],[21,4],[22,4],[23,3],[24,3],[25,4],[26,6],[27,3],[28,1],[29,2],[30,8],[31,5]];
+  var unvax_hos_march = [[1, 221],[2, 174],[3, 145],[4, 168],[5, 207],[6, 137],[7, 149],[8, 183],[9, 136],[10,163],[11,148],[12,129],[13,136],[14,91],[15,160],[16,148],[17,142],[18,132],[19,144],[20,84],[21,106],[22,158],[23,125],[24,113],[25,110],[26,127],[27,101],[28,117],[29,122],[30,111],[31,110]];
+
+  var svg = d3.select("svg");
+  var xScaleGraph1 = d3.scaleLinear().domain([0, 31]).range([0, 500]);
+  var yScaleGraph1 = d3.scaleLinear().domain([0, 250]).range([500, 0]);
+  var g = svg.append("g").attr("transform", "translate(100, 100)");
+
+  svg.append('text')
+    .attr('x', 500/2 + 100)
+    .attr('y', 100)
+    .attr('text-anchor', 'middle')
+    .style('font-size', 20)
+    .text('Covid Hospitalizations in March vs December of 2021');
+
+  svg.append('text')
+    .attr('x', 500/2+100)
+    .attr('y', 500-15+150)
+    .style('font-size', 20)
+    .text('Days');
+
+  svg.append('text')
+    .attr('text-anchor', 'middle')
+    .attr('transform', 'translate(30, 350)rotate(-90)')
+    .style('font-size', 20)
+    .text('Hospitalizations');
+
+  g.append("g").attr("transform", "translate(0, 500)").call(d3.axisBottom(xScaleGraph1));
+  g.append("g").call(d3.axisLeft(yScaleGraph1));
+
+  var graphLines = d3.line().x(function(d) { return xScaleGraph1(d[0]); }).y(function(d) { return yScaleGraph1(d[1]); }) 
+
+  // Vax Hospitalizations in Dec
+  svg.append("path")
+    .datum(unvax_hos_dec) 
+    .attr("class", "line") 
+    .attr("transform", "translate(100, 100)")
+    .attr("d", graphLines)
+    .style("fill", "none")
+    .style("stroke", "#03fc03")
+    .style("stroke-width", "2");
+
+  svg.append("path")
+    .datum(vax_hos_dec) 
+    .attr("class", "line") 
+    .attr("transform", "translate(100, 100)")
+    .attr("d", graphLines)
+    .style("fill", "none")
+    .style("stroke", "#fc0303")
+    .style("stroke-width", "2");
+
+  svg.append('g')
+    .selectAll("circle")
+    .data(vax_hos_dec)
+    .enter()
+    .append("circle")
+    .attr("cx", function (d) { return xScaleGraph1(d[0]); })
+    .attr("cy", function (d) { return yScaleGraph1(d[1]); })
+    .attr("r", 5)
+    .attr("transform", "translate(100, 100)")
+    .style("fill", "#03fc03");
+
+  svg.append('g')
+    .selectAll("rect")
+    .data(unvax_hos_dec)
+    .enter()
+    .append("rect")
+    .attr("x", function (d) { return xScaleGraph1(d[0])-5; })
+    .attr("y", function (d) { return yScaleGraph1(d[1])-5; })
+    .attr("width", 10)
+    .attr("height", 10)
+    .attr("transform", "translate(100, 100)")
+    .style("fill", "#fc0303");
+
+  // MARCH IS BELOW!!!!!!!!!!!!!!!!!!!
+  svg.append("path")
+    .datum(vax_hos_march) 
+    .attr("class", "line") 
+    .attr("transform", "translate(100, 100)")
+    .attr("d", graphLines)
+    .style("fill", "none")
+    .style("stroke", "#ff00e6")
+    .style("stroke-width", "2");
+
+  var polyPoints = []
+  var pendegonSide = [[-10, -10], [10, -10], [15, 5], [0, 20], [-15, 5]]
+  for (var i = 0; i < vax_hos_march.length; i++) {
+    var outputString = "";
+    for (var j = 0; j < pendegonSide.length; j++) {
+      var x = vax_hos_march[i][0] + (pendegonSide[j][0]*0.025);
+      var y = vax_hos_march[i][1] + (pendegonSide[j][1]*0.15);
+      outputString += xScaleGraph1(x.toString()) + "," + yScaleGraph1(y.toString()) + " "
+    }
+    polyPoints.push(outputString);
+  }
+
+  svg.append('g')
+    .selectAll("polygon")
+    .data(polyPoints)
+    .enter()
+    .append("polygon")
+    .attr("points", function(d) { return d })
+    .attr("transform", "translate(100, 100)")
+    .style("fill", "#1900ff");
+
+  svg.append("path")
+    .datum(unvax_hos_march) 
+    .attr("class", "line") 
+    .attr("transform", "translate(100, 100)")
+    .attr("d", graphLines)
+    .style("fill", "none")
+    .style("stroke", "#00ccff")
+    .style("stroke-width", "2");
+
+  var polyPoints2 = []
+  var triangleSide = [[-10, -10], [10, -10], [0, 20]]
+  for (var i = 0; i < unvax_hos_march.length; i++) {
+    var outputString = "";
+    for (var j = 0; j < triangleSide.length; j++) {
+      var x = unvax_hos_march[i][0] + (triangleSide[j][0]*0.025);
+      var y = unvax_hos_march[i][1] + (triangleSide[j][1]*0.15);
+      outputString += xScaleGraph1(x.toString()) + "," + yScaleGraph1(y.toString()) + " "
+    }
+    polyPoints2.push(outputString);
+  }
+
+  svg.append('g')
+    .selectAll("polygon")
+    .data(polyPoints2)
+    .enter()
+    .append("polygon")
+    .attr("points", function(d) { return d })
+    .attr("transform", "translate(100, 100)")
+    .style("fill", "#ff9900");
+
+  d3.select("svg")
+    .append("text")
+    .attr("x", 650)
+    .attr("y", 380)
+    .attr("font-size", "20")
+    .text("Lines are the Red, Green, and Blue Lines");
+
+  d3.select("svg")
+    .append("text")
+    .attr("x", 650)
+    .attr("y", 180+2)
+    .attr("font-size", "20")
+    .text("Triangle Points Orange: Unvax Hospitalizations in March 2021");
+
+  d3.select("svg")
+    .append("text")
+    .attr("x", 650)
+    .attr("y", 130+2)
+    .attr("font-size", "20")
+    .text("Pentagon Polygon Points Blue: Vax Hospitalizations in March 2021");
+
+  d3.select("svg")
+    .append("text")
+    .attr("x", 650)
+    .attr("y", 282)
+    .attr("font-size", "20")
+    .text("Circle Points Green: Vax Hospitalizations December 2021");
+
+  d3.select("svg")
+    .append("text")
+    .attr("x", 650)
+    .attr("y", 230)
+    .attr("font-size", "20")
+    .text("Rectangle Points Red: Unvax Hospitalizations December 2021");
+</script>