002
Can I run on every street within a year and track my progress?
# SVG, Animation, Running
002
# SVG, Animation, Running
Description
I like to run, but like most people, I have trouble with the motivation. I found that setting goals and tracking them help me maintain interest. In the past I had tracked only miles, but was interested to see where I ran. In addition to the tracking motivation, I wanted to use this year’s running as an excuse to explore my local environment. I had lived on Wilmington Island for about six years, but had only traveled on roads that took me where I wanted to go. Life is short! I traced a map of the island in Illustrator and used that vector data as a way to distinguish between have and have not run on. I found so many cool little neighborhoods! I had no idea there were so many houses on our seemingly small island.
Visit pseudosuede.com/2015running for the in progress version.
Checklist
Checklist Tests
I'm still in the progress of figuring out the correct calculations to build into the jQuery functions, but I am well on my way. I want there to be a elegant solution for viewing the map data when a user of the site visits the map using a small screen. I'm not sure this is the best way but I have learned a lot during this experiment. The following is my current CodePen trials.
See the Pen Image Positioning In Progress by sethakkerman (@sethakkerman) on CodePen.
Research / Citations
Data Visualizations using Canvas on noceilings.org.
Animated SVGs: Custom easing and timing
Getting Started with SVG Animation from Issue 27 of the MailChimp UX Newsletter