Assignment 1 - Hello World: GitHub and d3

a1-audreymongillo-Audrey-Mongillo

Description:

I used different kinds of graphic primitives to create my drawing of a car moving down a road. I used lines to create the different components of the road, a rectangle for the bottom half of the car and the middle window, polygons for the top half of the car and the outer windows, and circles for the wheels of the car. I then animated the car to look as though it is moving down the road.

Screenshot of the car (will need to open site to view animation):

Design Achievement:

For my design achievement, I created a car. Instead of just making a bunch of random shapes, I compiled them in a way that would be instantly recognizable by the user. The animation is also instantly recognizable as indicating the car moving down the road. By designing my page in this way, I have made the shapes and animations meaningful to the user.

Technical Achievement:

My technical achievement was animating the car. I made the car move vertically across the screen to make it look as though the car is moving down the road. I then reset the car position, so it could continue to move down the road repeatedly while the page is open.

gh-pages link:

http://audreymongillo.github.io/a1-ghd3/index.html

Sources:

• I used https://d3js.org/d3-transition/timing to figure out how to animate the car.
• I also referenced the demo done by Professor Harrison in class to start my project and get familiar with the design process.