For this assignment I have created a picture of a swimmer underwater and animated some bubbles in the picture. To see the bubbles float to the top more than once, you must refresh the page. I found example code to help guide my project.

To create the animation of the bubbles, I found transition examples from this website: https://www.d3-graph-gallery.com/graph/interactivity_transition.html#portfolio. In order to distinguish which circles to animate I used the class atribute which I learned about from stackoverflow: https://stackoverflow.com/questions/11926238/selecting-a-subset-of-circles-using-d3. To practice with databinding I worked with professor's code example from the first day of class and this website: https://www.tutorialsteacher.com/d3js/data-binding-in-d3js. I used this website to make an ellipse: https://www.tutorialsteacher.com/d3js/create-svg-elements-in-d3js. I used this website to make the star shaped polygon found on the turtle's back: https://www.w3schools.com/graphics/svg_polygon.asp.

This is the link to see the project: https://vygrasso.github.io/01-ghd3/index. I attached two screenshots of the project as separate attachments.

I used data binding, transitions, as well as learned about the class attribute to complete my project. Data binding was used to create multiple circles and polygons for the yellow fish. In order to create bubbles and animate them, I had to distinguish these circles from any other circle on the screen. I learned I could do this from the class attribute which I could then select when calling upon transitions. I used transitions to animate these blue circles and had them move to the top of the screen to simulate them floating to the surface of water.

In order to create a visually appealing scene, I used basic math and geometry to make coordinates line up correctly between shapes. For example, I centered the star polygon on the center of the turtle's back. I also reflected one triangle (used to make a flipper) over the line that made the swimmer's body to make the two triangles the same shape and size. I also used lots of HTML colors from this website: https://www.w3schools.com/colors/colors_names.asp to make a more appealing image.