user profile image

Demo-ing ways to make information more engaging, rethinking infographics. This is responsive, with some accessible information for screen readers, and fallbacks for graceful degradation. Explained by this blog post: http://codepen.io/sdras/blog/rethinking-information-presentation


  1. This is awesome, but what is up with the transform origin jump on Chrome?

  2. Huh, @grayghostvisuals, I'm not seeing that- Can you let me know what environment you're on so that I can try to duplicate please?

  3. This is really amazing, especially considering this subject is rather important to me (and really, to all life on earth).

  4. This is sooooo awesome. It's the perfect infographic. Interactive. Useful information made more digestible through the format and the interaction. And viewable on any size screen to boot? The best.

    I think this is the weird jumpy thing @grayghostvisuals was seeing: http://d.pr/v/1cI9T/3ZP0cSXw

  5. Hey @chriscoyier! Thanks for the awesome feedback, much appreciated.

    Yeah, that was a huge design failure on my end. By making the highlight offset from that center axis, I had to keep pushing it over to keep it aligned with the middle red part which resulted in small discernable differences. By the time I realized, I was halfway done.

    For some reason when Dennis said transform-origin jump, I was picturing this: http://codepen.io/GreenSock/pen/053d0ee8da31db3bdca1a4531e0628ee, so I was confused.

    I plan on reworking it- either to have the highlight fully centered with the red middle circle- or to do the SUPER COOL AWESOME THING that @chrisgannon teaches, using a null object http://greensock.com/cube-dial-tutorial - highly recommend this demo to anyone reading this, it's very smart.

  6. Awesome, I wish I had 1/3 of the thinking to come up with stuff like this. Re: transform origin I'm getting this https://dl.dropboxusercontent.com/u/4635252/gsw-codepen.ogv I'm on ubuntu/firefox 38

  7. nice one!

  8. After way too long, I finally fixed the transformOrigin bug- by switching it out to svgOrigin. Thank you for the feedback! It should be much stable now.

  9. Absolutely beautiful! Everything about this piece is elegant.

  10. Amazing!

  11. Can we loop the cycle animation?

  12. anyone have the code for the fixed version of this pls ?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.