Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Alexander Rivera
Alexander Rivera
2,302 Points
Posted by Alexander Rivera
Alexander Rivera
2,302 Points

How to Develop an Interactive Infographic with HTML/CSS/JavaScript

I'm looking to develop an interactive infographic similar to the examples provided in the URL below

http://www.queness.com/post/10465/7-amazing-interactive-infographics-created-with-html-css-and-javascript

I would like to feature hover, drag and drop, elements changing or moving upon scrolling, many implemented graphics and text.

Would anyone happen to know of a resource on how to get started with this, or maybe know how to do it themselves?

Thanks!

3 Answers

Kyle Germaine
Kyle Germaine
8,174 Points
Kyle Germaine
Kyle Germaine
8,174 Points

Alexander,

This answer should be fairly easy to implement, but will require a lot of additional, some may say bloated code. If you are creating simple informational sites it shouldn't affect your load times/performance, but for a more advanced web application i would recommend a more customized solution.

First, download and add jQuery if you haven't already. (If you don't know how to do this I can walk you through it or just take the first few jQuery class here.

< Hover >

This is my favorite way to implement a hover action on an element and is how I build most of my Navigation menus, though slightly unconventional...

<div class="a_nav">
        <nav>
            <a>About Us</a>
        </nav> 
         <div id="home_div" style="position:absolute;top:30px;display:none">
                <div><a>Link 1</a></div>
                <div><a>Link 2</a></div>
                <div><a>link 3</a></div>
          </div>
</div>   

<script>
$('.a_nav').hover(
    function() { 
        $(this).children('div').stop(true).slideDown();

    }, function() { 
        $(this).children('div').stop(true).slideUp(); 
    });
</script>

< Drag and Drop>

I've actually never used this feature before, but I would use jQuery UI for this. You can see a demo here.

Then to implement go here. Click "toggle all" do deselect all check-boxes. Then select the "draggable" and "droppable" check-boxes in the "interactions" section. Download and include this file in your code the same way as you did with jQuery.

This is an example of how to implement...

<script>
$("#dock").droppable({
     drop: function(event, ui) {
               // do something with the dock
               $(this).doSomething();

               // do something with the draggable item
               $(ui.draggable).doSomething();
           }
});
</script>

< Scrolling Actions >

You can use Waypoints JS for this. Download and include in your code same as above, then implement similar to how shown below...

<div style="position:fixed;right:0;top:30%">
     <div  class="side_nav" id="toplink">
            <div>Top</div>
     </div>
     <div class="side_nav" id="aboutlink">
           <div>About<br>Us</div>
     </div>
    <div class="side_nav" id="aboutlink2">
           <div>Practice<br>Areas</div>
      </div>
    <div class="side_nav" id="maplink">
           <div>National<br>Scope</div>
    </div>
</div>

<div style="position:absolute;left:100px;top:50%;" class="about">When this div is near the top something happens</div>

<script>
$('.about').waypoint(function( down ) {

    $(".side_nav").css({'background':'#fff'});
    $("#aboutlink").css({'background':'#3a6ba1'}); 

}, { offset: 250 });


$('.about').waypoint(function ( up ) {

    $(".side_nav").css({'background':'#fff'});
    $("#aboutlink").css({'background':'#3a6ba1'}); 

}, { offset: -100 });
</script>

This will change the background of all .side_nav elements to white and then the #aboutlink element background to #3a6ba1 whenever the #aboutlink element is 250px from the top of the page when scrolling "down" and -100px from the top of the page when scrolling "up". (notice the "up/down" arguments passed to the waypoint function and the "offset" option passed in.

if you are going to do a more complex function on scrolling I would use jQuery $.when/.done function to make sure the first action completes before executing the second action.

<script>
$('.about').waypoint(function( down ) {

    $.when(  $(".side_nav").css({'background':'#fff'})  )
                 .done( function() {  
                            $("#aboutlink").css({'background':'#3a6ba1'})  
                       });

}, { offset: 250 });

</script>

I hope this helps!

Regards, kyle

Sarah Federman
Sarah Federman
14,048 Points
Sarah Federman
Sarah Federman
14,048 Points

If you're looking for an easier method besides hand coding it, you might want to look into Adobe's Edge Animate. I was at a talk from its product manager Sarah Hunt about a month ago and it looks pretty cool if you want a quicker method with less of a learning curve.

Alexander Rivera
Alexander Rivera
2,302 Points
Alexander Rivera
Alexander Rivera
2,302 Points

Thanks for all of the input! I will look into Edge to see what it offers, but I really appreciate the walkthrough regarding the code as well.