Interactive Dribbble Infographic

Shot_1279650166

25 Responses

  1. Jamie Brightmore Jamie Brightmore

    This is my debut shot and the thing which got me a Dribbble invite :)

    The project was originally going to be a static poster, but it quickly dawned on me that it would be nice to try and make it interactive in some way. This also offered the chance to play around with some CSS3 niceness, so I jumped-in and hammered out the majority of it last weekend (one night I was up until 9am grappling with the code *almost* smashing my late night record!).

    It goes without saying that it took ages to put this together, partly because the only thing I had planned was the cut-away basketball, all the other stuff was realised along the way, meaning a fair amount of experimentation.

    As all of you will appreciate, these personal projects have a tendency to get out-of-hand fast regarding self-inflicted feature creep and simply not knowing when to stop! An quick example: at one point I tried to work out if I could make all of the rings (within the ball) have a rollover state rather than just the dots, but this led me into massive unknown 'canvas' territory which was clearly just an unrealistic manoeuvre at this time.

    In the end, I had to force myself to put a lid on it and get back to pressing client work on Monday. Thankfully I managed to get it all wrapped-up and ready today.

    I've learned a ton of stuff doing this and the response on Twitter has blown me away, cheers :)

    The site is here: http://lab.4muladesign.com/dribbble/

    likes

    over 3 years ago

  2. David Sizemore David Sizemore

    Wow. I'm glad someone hooked you up with an invite—the site is fantastic!

    over 3 years ago

  3. Corey Haggard Corey Haggard

    WHAT??? SICK!!!

    over 3 years ago

  4. Morgan Allan Knutson Morgan Allan Knutson

    Love it dude, welcome aboard!

    over 3 years ago

  5. Simon Gustavsson Simon Gustavsson

    WONDERFUL site!!

    over 3 years ago

  6. Chris Meeks Chris Meeks

    Amazing. Welcome. I can't believe you weren't on here before.

    over 3 years ago

  7. Nikh Nikh

    Amazing stuff. Glad to have you here. Dribbble again very soon.

    over 3 years ago

  8. Michael Spitz Michael Spitz

    Very cool!

    over 3 years ago

  9. Matt Grantham Matt Grantham

    Looks great and welcome to the team! Now if only you could get Dan to pull the actual data for you or better yet open it up publicly...

    over 3 years ago

  10. Jesse Bennett-Chamberlain Jesse Bennett-Chamberlain

    Nice work Jamie!

    over 3 years ago

  11. Keegan Jones Keegan Jones

    Love the visualization!

    over 3 years ago

  12. Rogie King Rogie King

    Fantastic all around. Great use of CSS on the site as well. Bravo!

    over 3 years ago

  13. Bojan Janjanin Bojan Janjanin

    Hell of a debut. Love it!

    over 3 years ago

  14. Trent Walton Trent Walton

    Respect.

    over 3 years ago

  15. Robert Leeper Robert Leeper

    Really great job—well done.

    over 3 years ago

  16. Steve Lowtwait Steve Lowtwait

    I saw the page on the web before I came to Dribbble to see it here. Very cool graphic! I love how the cards flip on rollover - fun! Welcome to Dribbble!

    over 3 years ago

  17. Sean Farrell Sean Farrell

    Loving this so far

    over 3 years ago

  18. Victor Vasquez Victor Vasquez

    Soooooo Good!

    over 3 years ago

  19. Darren Geraghty Darren Geraghty

    well played.

    over 3 years ago

  20. Jamie Brightmore Jamie Brightmore

    Many thanks for all the comments. I’m currently planning another interactive infographic, slightly more complicated regarding the subject material, but it’s a really cool idea – I’m pretty excited about it!

    over 3 years ago

  21. Zachary Johnson Zachary Johnson

    I always loved infographics, nice work.

    over 3 years ago

  22. Peter Burdette Peter Burdette

    Welcome!

    over 3 years ago

  23. Nick Kumbari Nick Kumbari

    Nice one!!!!

    over 2 years ago

  24. Nidia Rocío Carrillo Nidia Rocío Carrillo

    Impressive... how did you created the effect of depth, the % are manually or are they for real?... Lovely!

    about 2 years ago

  25. Jamie Brightmore Jamie Brightmore

    Hey @Nidia Carrillo, thanks! If you mean the sliced 3D basketball, this was a custom illustration I made : )

    about 2 years ago

keyboard shortcuts: previous shot next shot L or F like