a1-vlm-wpi-victoria-mirecki

README.md

@@ -1,86 +1,16 @@
 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. 
+For my Assignment 1, I decided to create a picture. This picture contains a car on the road at a stop sign. The sun is out, and there are clouds in the sky. Some source code that I used was compiled from different websites including [Create SVG elements](https://www.tutorialsteacher.com/d3js/create-svg-elements-in-d3js#:~:text=var%20svg%20%3D%20d3.select%20%28%22body%22%29.append%20%28%22svg%22%29.attr%20%28%22width%22%2C%20width%29.attr,svg%2C%20so%20that%20we%20can%20use%20it%20later.) which I used for creating text inside of a polygon, [How to Draw a Line in d3](https://webdva.github.io/how-to-draw-a-line-in-d3js/) for drawing lines, and Professor's code from class. The link to my "gh-pages" branch is "https://vlm-wpi.github.io/a1-ghd3/" and the page should look like this: ![image1](https://github.com/vlm-wpi/a1-ghd3/blob/479e7b17623812310070d8ee7c7c9d82393fe65a/assignment1.png)
 
-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
+Design Achievement Description
 ---
 
-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.
+In this project, I was able to create a picture using lines, polygons, circles, and rectangles. When I first started playing around with d3, I tried to make a polygon and the first shape that popped into my head was an octagon, and the color I chose was red. Once I created this shape, I realized that it looked like a stop sign, and started to design the rest of my picture around that. I then had a circle in the upper right hand corner of the page, and decided to make it the sun, containing thick orange lines coming off of the sun as rays. I decided to make the clouds blue since I created lines around the border of the picture to be blue, and the background is white. I designed another polygon (trapezoid) to act as a car, and added circles to the bottom of the car. This car is green, since I wanted to use another color that I hadn't yet. Finally I was able to design a road using a black rectangle and adding thick yellow lines on top of it to act as the lines on a road. This was my first time using d3 and at the beginning of the assignment my goal was just to be able to print the different types of shapes on an svg. Once I realized I could do this, I decided to make these shapes into objects that could be made into a picure. These objects that I designed were objects most people are familiar with, so that this image would be easily understood.
 
-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
+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.
-
-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
+Once I was able to print different shapes and colors on an svg, I focused on the technicalily of this assignment. For my picture, all of the objects need to be in precise spots on the svg, so that the image makes sense. For example, I made sure to place the rectangle for the road at the edge of the pole for the stop sign, and the yellow marks needed to be in the middle of that rectangle. The rays for the sun were difficult to make, especially since   I did not have grid lines to go off of when defining the coordinates of these lines. Something that I was also able to do is make straightforward shapes look more complex. For example, the blue clouds in the sky are multiple circles on top of each other to make the image look like it is one cloud-like shape. This assignment was a lot of trial and error in figuring out where I wanted to place each item so that the image I had in my mind would show up on the page. I also decided to add text into my drawing and figured out how to append the text to the shape I wanted it to go on. By doing this, I did not have to figure out if the shape or text would be drawn on top of the other, I just had to add the text to the octagon and the text would automatically appear visibally within the shape.
 
-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.
 

index.html

@@ -1,10 +1,290 @@
 <script src="https://d3js.org/d3.v6.min.js"></script>
-
+  <svg width=600 height=600></svg>
 <script>
   console.log(d3); // test if d3 is loaded
-  // Add an SVG
+  // SVG added above
   // Add Rectangles
+  //rectangle for stop sign
+  d3.select('svg')
+    .append('rect')
+    .attr('x', 120)
+    .attr('y', 200)
+    .attr('height', 200)
+    .attr('width', 10)
+  //rectangle as road
+  d3.select('svg')
+    .append('rect')
+    .attr('x', 0)
+    .attr('y', 400)
+    .attr('height', 200)
+    .attr('width', 600)
   // Add Circles
+  //the sun
+  d3.select('svg')
+    .append('circle')
+    .attr('cx', 500)
+    .attr('cy', 100)
+    .attr('r', 50)
+    .style('fill', 'yellow');
+  //wheels of car
+  d3.select('svg')
+    .append('circle')
+    .attr('cx', 400)
+    .attr('cy', 420)
+    .attr('r', 40)
+    .style('fill', 'green');
+  d3.select('svg')
+    .append('circle')
+    .attr('cx', 300)
+    .attr('cy', 420)
+    .attr('r', 40)
+    .style('fill', 'green');
+  //clouds
+  d3.select('svg')
+    .append('circle')
+    .attr('cx', 30)
+    .attr('cy', 30)
+    .attr('r', 25)
+    .style('fill', 'blue');
+  d3.select('svg')
+    .append('circle')
+    .attr('cx', 60)
+    .attr('cy', 35)
+    .attr('r', 25)
+    .style('fill', 'blue');
+  d3.select('svg')
+    .append('circle')
+    .attr('cx', 55)
+    .attr('cy', 55)
+    .attr('r', 25)
+    .style('fill', 'blue');
+  //another cloud
+  d3.select('svg')
+    .append('circle')
+    .attr('cx', 300)
+    .attr('cy', 50)
+    .attr('r', 50)
+    .style('fill', 'blue');
+  d3.select('svg')
+    .append('circle')
+    .attr('cx', 320)
+    .attr('cy', 70)
+    .attr('r', 50)
+    .style('fill', 'blue');
+    d3.select('svg')
+    .append('circle')
+    .attr('cx', 280)
+    .attr('cy', 80)
+    .attr('r', 50)
+    .style('fill', 'blue');
+
   // Add Lines
+  //https://webdva.github.io/how-to-draw-a-line-in-d3js/
+  //two yellow lines for the road
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'yellow')
+    .style('stroke-width', 5)
+    .attr("x1", 0)
+    .attr("y1", 490)
+    .attr("x2", 600)
+    .attr("y2", 490);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'yellow')
+    .style('stroke-width', 5)
+    .attr("x1", 0)
+    .attr("y1", 510)
+    .attr("x2", 600)
+    .attr("y2", 510);
+  //4 border lines
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'blue')
+    .style('stroke-width', 1)
+    .attr("x1", 0)
+    .attr("y1", 0)
+    .attr("x2", 0)
+    .attr("y2", 600);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'blue')
+    .style('stroke-width', 1)
+    .attr("x1", 0)
+    .attr("y1", 0)
+    .attr("x2", 600)
+    .attr("y2", 0);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'blue')
+    .style('stroke-width', 1)
+    .attr("x1",600)
+    .attr("y1", 600)
+    .attr("x2", 600)
+    .attr("y2", 0);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'blue')
+    .style('stroke-width', 1)
+    .attr("x1", 600)
+    .attr("y1", 600)
+    .attr("x2", 0)
+    .attr("y2", 600);
+  //the sun's rays
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 500)
+    .attr("y1", 10)
+    .attr("x2", 500)
+    .attr("y2", 45);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 500)
+    .attr("y1", 155)
+    .attr("x2", 500)
+    .attr("y2", 190);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 555)
+    .attr("y1", 100)
+    .attr("x2", 590)
+    .attr("y2", 100);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 445)
+    .attr("y1", 100)
+    .attr("x2", 410)
+    .attr("y2", 100);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 535)
+    .attr("y1", 15)
+    .attr("x2", 520)
+    .attr("y2", 50);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 565)
+    .attr("y1", 30)
+    .attr("x2", 540)
+    .attr("y2", 60);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 585)
+    .attr("y1", 65)
+    .attr("x2", 550)
+    .attr("y2", 75);
+  //upper left
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 480)
+    .attr("y1", 50)
+    .attr("x2", 465)
+    .attr("y2", 20);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 460)
+    .attr("y1", 65)
+    .attr("x2", 440)
+    .attr("y2", 35);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 450)
+    .attr("y1", 80)
+    .attr("x2", 420)
+    .attr("y2", 65);
+  //bottom left
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 450)
+    .attr("y1", 125)
+    .attr("x2", 415)
+    .attr("y2", 130);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 463)
+    .attr("y1", 140)
+    .attr("x2", 435)
+    .attr("y2", 163);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 480)
+    .attr("y1", 155)
+    .attr("x2", 467)
+    .attr("y2", 185);
+  //bottom right
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 515)
+    .attr("y1", 155)
+    .attr("x2", 530)
+    .attr("y2", 185);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 530)
+    .attr("y1", 145)
+    .attr("x2", 555)
+    .attr("y2", 170);
+  d3.select('svg')
+    .append('line')
+    .style('stroke', 'orange')
+    .style('stroke-width', 10)
+    .attr("x1", 555)
+    .attr("y1", 125)
+    .attr("x2", 580)
+    .attr("y2", 140);
+    //Text to STOP sign
+  var g= d3.select('svg')
+    .append('g')
+    .attr("transform", function(d, i){
+      return "translate(0,0)";
+    })
   // Add Polygons
+  //stop sign
+  var stopSign = g.append('polygon')
+    .style('fill', 'red')
+    .style('stroke-width', '3')
+    .attr('points', '100,100 150,100 175,125 175,175 150,200 100,200 75,175 75,125')
+    .append("text")
+  //car
+  d3.select('svg')
+    .append('polygon')
+    .style('fill', 'green')
+    .style('stroke-width', '3')
+    .attr('points', '300,275 400,275 475,420 225,420')
+  //text
+  g.append("text")
+    .attr("x", 105)
+    .attr("y", 155)
+    .attr("stroke", "#fff")
+    .text("STOP");
 </script>