Slightly off topic, your site design is awesome. Would you share what libraries/frameworks/skills/time-resources are needed for something like this. Just curious. For me, the graphics & layout are far more interesting.
I'm working on a detailed blog post about that. Some highlights:
• Running Django on Heroku
• Coffeescript, jQuery
• SASS
• A lot of webkit transitions & some animations
• A souped up version of pjax for loading pages
• Getting the data from APIs from Moves, Runkeeper, Withings, Foursquare, Github, Instagram, etc.
• The run maps are a set of coordinates passed to Mapbox to make the map tiles & Leaflet for creating the SVG line.
• D3 has really nice geo stuff, I use their mercator projection to convert lat/longs to points on the map of the world
Lot's of analytics (NewRelic, gaug.es, segment.io)
Skillwise you'd need great js, great d3, eye for design, patience to layout a million state transitions and animate them all with css + js, wiring up a million data sources & api's, jquery, ajax, pushstate, and pretty legit backend skills to keep this thing running ATM.
While certainly a neat tool, it doesn't shed a lot of light on the client side stack, and apart from revealing the hosting service and web server, doesn't say much about the server side stack either.
It is fairly easy to do such animations (if you talk about the animations) with jquery alone.
A lot of simple fades in/out and background color changes compose the website as far as I have seen.
The site is slightly unresponsive, but this is probably due to all the traffic HN is generating. OP should consider adding loading animations, it would make the transitions more fluid in such a busy time.
That link points to a bunch of data sources, not how the site was designed, unless I missed something. A little sleuthing says the site is more about the launch of a CSS animations framework rather than a health tracker. Somewhere maybe there's d3.
• Running Django on Heroku • Coffeescript, jQuery • SASS • A lot of webkit transitions & some animations • A souped up version of pjax for loading pages • Getting the data from APIs from Moves, Runkeeper, Withings, Foursquare, Github, Instagram, etc. • The run maps are a set of coordinates passed to Mapbox to make the map tiles & Leaflet for creating the SVG line. • D3 has really nice geo stuff, I use their mercator projection to convert lat/longs to points on the map of the world