Xiaojun Wang
biymon
https://biymon.github.io/01-ghd3/index.html
This page is an snowy owl, Mr.Sleepy. He always close his eyes during the night since he always sleepy. But most of the owls are nocturnal animals. I want to show this snowy owl's habitat to users.
I created a series shapes such as circle, polygons, lines, ellipses and rectangles to draw a snowy owl.
Users can press the button at the bottom to switch between day and night, then Mr.Sleepy can decide to sleep or wake up!
- Centered the svg element.
- Created different svg shapes and customized them through d3.
- Builded data sets and binded them with DOM elements through d3 selection methods.
- Selection methods are same as javascript, such as select all elements which class attirbute is "eyelids", use ".eyelids" as selector.
- Implemented animation through d3 transiton methods.
- Drawed a snowy owl. We don't have to create large numbers bitmaps files in different solutions.
- Snowy Owl doesn't has a nocturnal habit.