Designing an Infographic with HTML, CSS & jQuery

Home » Tutorials » Designing an Infographic with HTML, CSS & jQuery

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

Learn how to design an infographic with HTML, CSS and jQuery, by following this easy, step by step tutorial. Check it out and start learning!

I’ve been wanting to get stuck into a creative infographic for quite some time, so recently I started work on a personal project that involved the design and build of a graphic to portray the stats and figures of Line25. To mix things up a little and to take it a step further, I decided to have a shot at building the whole infographic as a complete web page. Here’s a walkthrough of the project, showing how resources like Cufon and jQuery’s ScrollTo plugin were used to add some flair and interactivity to the design.

The concept

View the infographic

View the infographic

The design itself was put together in Adobe Illustrator using a bunch of Line25 stats. A limited colour palette was used to stay true to traditional infographic designs like airplane safety cards, with a couple of blues, greens and greys making up the scheme for the design. Large typography was one of the main ingredients, with League Gothic being the perfect fit with its tall and bold appearance. Charts, diagrams and icons also make up large portions of the design, all aiming to add interest to the otherwise boring facts and figures.

With the idea of building a web page out of the design in mind, I bundled in some large margins and gaps between the sections, the idea being that the jQuery ScrollTo plugin could make for some cool interactive scrolling. Swirly lines and gradients in these areas would add some visual flair as the browser window zooms past.

The basic webpage

Once the overall design concept was complete, the basic information was laid out in plain old HTML. Paragraphs of text and headings were used where possible to allow the majority of the design to be rendered by the browser, then it was all styled up with CSS one section at a time.

Intro section

Intro section preview Designing an Infographic with HTML, CSS & jQuery

<div id="intro">
	<h1>The stats behind <span>Line25</span></h1>
	<p>The LINE25 web design blog by Chris Spooner is home to a range of posts that aim to provide ideas and inspiration to web creatives.
At just over one year old it’s already amassed a wealth of stats and figures. Sit back and take a look behind the scenes.</p>

	<p class="btn"><a href="#section1">Continue</a></p>
</div>
#intro {
	background: url(images/section-1.png) 0 485px no-repeat;
	padding: 0 0 1102px 0;
	margin: 0 0 0 100px;
}
	
	#intro h1 {
		font-size: 78px; 
		color: #c0d8f1;
		text-transform: uppercase;
		margin: 0 0 25px 0;
	}
		#intro h1 span { 
			display: block; width: 625px; height: 188px; margin: 8px 0 0 0;
			background: url(images/line25.png);text-indent: -9999px;
		}
		
	#intro p {
		width: 850px;
		font-size: 28px; color: #c0d8f1;
	}
		#intro p.btn a {
			display: block; width: 128px; height: 128px;
			background: url(images/down-btn.jpg); text-indent: -9999px;
			float: right; margin: 160px -3px 0 0;
		}

The intro section consists of a short header, the Line25 logo, intro paragraph and the first button element. The background of the design was added as a background image to the intro <div>, and plenty of padding added to replicate the large portions of white space. The heading is configured in size and colour, with the <span> coming in handy for some image replacement as the Line25 logo.

Section one

Section one preview

<div id="section1">
	<h2 class="march2009">March 2009</h2>
	<h2 class="launched">Line25 is launched</h2>
	<p>On its first day, Line25 brought in 1,750 visitors. One year later in March 2010, the average daily visitor rate has grown to 5,572.</p>
	<img src="images/graph.png" alt="Graph displaying visitor count from March 2009 and March 2010" />
	
	<h2 class="average">On average each month, there are:</h2>
	
	<dl>
		<dt>9</dt>
		<dd>New posts</dd>
		
		<dt>299</dt>
		<dd>New comments</dd>
		
		<dt>4,378</dt>
		<dd>New subscribers</dd>
		
		<dt>39,205</dt>
		<dd>Visits</dd>
		
		<dt>82,072</dt>
		<dd>Pageviews</dd>
	</dl>
</div>
#section1 {
	margin: 0 0 0 100px;
}
	#section1 h2.launched {
		font-size: 154px; 
		color: #c0d8f1;
		text-transform: uppercase;
		margin: 0 0 15px 0;
	}
	#section1 h2.march2009 {
		width: 858px; height: 398px; margin: -21px 0 30px 0;
		background: url(images/march-2009.png); text-indent: -9999px;
	}
	#section1 p {
		width: 850px; margin: -25px 0 45px 0;
		font-size: 37px; line-height: 47px; color: #a7a9ac;
	}
	#section1 img {
		margin: 0 0 45px 0;
	} 
	
	#section1 h2.average {
		font-size: 82px; 
		color: #c0d8f1;
		text-transform: uppercase;
		margin: 0 0 15px 0;
	}
	#section1 dl {
		overflow: hidden; margin: 0 0 100px 0;
	}
		#section1 dl dt {
			width: 360px; float: left; clear: left;
			font-size: 130px; 
			color: #c1e6e9;
			text-transform: uppercase;
			text-align: right;
			margin: 0 0 5px 0;
		}
		#section1 dl dd {
			float: left;
			*float: none; /* Quick and dirty IE7 fix */
			font-size: 70px; 
			color: #c0d8f1;
			text-transform: uppercase;
			margin: 43px 0 0 25px;
		}

After a short scroll section one begins with a simple graphic, followed by paragraph text which introduces the first chart. The large lists of facts and figures fits perfectly as a definition list, with the two pieces of related information being marked up as either <dt> or <dd>.

Section two

Section two background swirls

Section two chart

<div id="section2">
	<h2 class="total">In total <span>(as of May 2010)</span>, that's...</h2>
	<p class="btn total"><a href="#stats">Continue</a></p>
	[...]
	<h2 class="categories">The 126 posts are split into 4 categories:</h2>
	<img src="images/pie-chart.png" alt="Pie chart displaying posts per category" />
	
	<p class="btn continue"><a href="#user">Continue</a></p>
</div>
#section2 {
	background: #476079 url(images/swirls.png) 220px 210px no-repeat; padding: 75px 0 50px 100px;
}
	#section2 h2.total {
		font-size: 82px; 
		color: #fff;
		text-transform: uppercase;
		margin: 0 0 2362px 0;
		float: left;
	}
		#section2 h2.total span {
			font-size: 55px;
		}
		#section2 p.btn.total a {
			display: block; width: 128px; height: 128px;
			background: url(images/down-btn.jpg); text-indent: -9999px;
			float: left; margin: -32px 0 0 10px;
		}
		[...]
		#section2 h2.categories {
			font-size: 82px; 
			color: #fff;
			text-transform: uppercase;
			margin: 0 0 150px 0;
		}
		#section2 img {
			margin: 0 0 150px 0;
		}
		#section2 p.btn.continue a {
			display: block; width: 128px; height: 128px;
			background: url(images/down-btn.jpg); text-indent: -9999px;
			margin: 0 0 0 415px;
		}

Section two switches from a grey background to a dark blue, and starts with a short title and swirly pattern graphic before heading down to the meaty information lower down. This graphic is added as a background image to the section2 <div> and lots of padding added to bump down the content. Classes on each title allows the sizing to be altered to adhere to the original design.

Section three

Section three preview

<div id="section3">
	<h2 class="user" id="user">The average Line25 user...</h2>
	<ul>
		<li class="firefox">Uses Firefox</li>
		<li class="pc">Has a PC</li>
		<li class="time">Browses for 1:39</li>
		<li class="usa">Lives in the USA</li>
		<li class="awesome">Is awesome</li>
	</ul>
	
	<img src="images/thankyou.png" alt="Thank You, The End" />
	
	<h3>Again?</h3>
	<p class="btn"><a href="#intro">Back to top</a></p>
</div>
#section3 {
	background: #c1e6e9 url(images/gradient.jpg) repeat-x; padding: 4100px 0 200px 100px;
	overflow: hidden;
}
	#section3 h2.user {
		font-size: 120px; 
		color: #476079;
		text-transform: uppercase;
		margin: 0 0 100px 0; padding: 100px 0 0 0;
	}
	#section3 ul {
		width: 534px; height: 1135px; padding: 75px 0 200px 600px;
		background: url(images/user-bg.png) no-repeat;
	}
		#section3 ul li {
			list-style: none; height: 60px; padding: 40px 0 30px 130px; margin: 0 0 106px 0;
			font-size: 70px; 
			color: #476079;
			text-transform: uppercase;
		}
			#section3 ul li.firefox {
				background: url(images/firefox-icon.png) left no-repeat;
			}
			#section3 ul li.pc {
				background: url(images/pc-icon.png) left no-repeat;
			}
			#section3 ul li.time {
				background: url(images/clock-icon.png) left no-repeat;
			}
			#section3 ul li.usa {
				background: url(images/usa-icon.png) left no-repeat;
			}
			#section3 ul li.awesome {
				background: url(images/awesome-icon.png) left no-repeat;
			}
		#section3 img {
			margin: 0 0 100px 0;
		}
		#section3 h3 {
			font-size: 70px; 
			color: #476079;
			text-transform: uppercase;
			float: left; margin: 0 0 0 830px;
		}
		#section3 p.btn a {
			display: block; width: 115px; height: 115px; float: left; margin: -30px 0 0 10px;
			background: url(images/top-btn.png); text-indent: -9999px;
		}

Section three begins after another short scroll which transitions from the dark blue background to mint green. This section presents information overlaid over a graphic, which is set as the background of a <ul> and the information itself marked up as <li> elements. Classes on each <li> make it easy to attach icon graphics alongside each title, and margins align up each list item between the dotted area of the background image.

Entire HTML in summary

Summary of HTML code

Javascript coolness

A couple of simple Javascript resources quickly add some extra coolness to the design. Firstly we have Cufon, which allows us to bring the League Gothic font from the concept into the web based design. Then there’s the implementation of jQuery and the handy ScrollTo plugin which adds all the fancy page scrolling functionality we need.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/League_Gothic_400.font.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

In total there’s five Javascript files; the jQuery library; the Cufon script; a Cufon generated font file for League Gothic; the ScollTo plugin for jQuery; and finally my own scripts file for activating and configuring all the Javascript functionality.

To activate League Gothic on the appropriate HTML elements, they’re inserted into the scripts file like so:

Cufon.replace('h1, h2, h3, dl, ul');

As for the scrolling, I already added anchor links to the relevant element IDs in the HTML, so to implement auto-scrolling, the ScrollTo plugin is activated:

$(document).ready(function() {
	$("p.btn a").click(function() {
		$.scrollTo($(this).attr("href"), 1000);
		return false;
	});
});

Rather than write commands for every button, I targeted the ‘btn’ anchor, then used .attr("href") to grab the target from that particular anchor. return false; then stops the original HTML anchor link from working.

The final design

So here it is, the final result of my little experiment!

View the infographic

View the infographic

Author
Iggy
Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

62 thoughts on “Designing an Infographic with HTML, CSS & jQuery”

  1. Bookmarked! And subscribed also :) Maybe I do not belong to average user but I also have firefox, PC ;) Nicely done :) thnx for tips

    Reply
  2. wow. Very cool. Really appreciated the breakdown and effort.

    Nice color pallette and design too.. Felt that it could have been scaled down a couple of notches..

    awesome though.. keep em comin.

    Reply
  3. Thanks for the kind comments everyone, it was good fun to put together so I'm glad to see people showing an interest in it.

    Reply
  4. Hey Chris, just commenting again to let you know that i'm going to be using something based on this during our coverage of T&T 2010 Election. Thanks for this tutorial again bro!

    Reply
  5. I have just upgraded to CSS8. But Password manager stopped up working. I was able to do the info backup to save the passwords, and used the upgrade installer to get it loaded. Anyone here can guide me what is the problem?

    Reply
  6. That's awesome Chris! Not only an interesting infographic but fantastic use of CSS & Cufon. Well done :-)

    Reply
  7. Hey Chris, once again an excellent and easy to follow tutorial…I humbly learn new things every week ! Can't wait to see what you'll cook up next friday… ;-)

    One question always springs to mind though…where the h*ll do you find the time to makes these things ???

    Thanks again !

    Reply
  8. Thank you for sharing how you built this, Chris. Not only is it lovely to look at, but the explanation of your process is very insightful as well.

    Reply
  9. Fantastic stuff. Will definately give Cufon a go as an alternative to Font Face. Looking forward to the next piece!

    Reply
  10. I really like this, great job.

    I guess the next step is to load the data dynamically? Have no idea how, but that would be cool.

    The design is great, maybe a convert/upgrade to CSS5 tutorial at a later date? ;-)

    Reply
  11. Excellent stuff. I've been looking for a start point on creating some beautiful and living infographics, you've really helped point me in the right direction.

    Reply
  12. Good one Chris. Great way for people to display their info for advertising stats or freelance/online resume also.

    Reply
  13. Really nice clean design and really like the use of the large typography. ScrollTo is one of my favourite plugins it just makes the whole experience fluid.

    Great Job Chris :D

    Reply
  14. You're so good with Illustrator! I love the design. Thanks for sharing, the tutorial might come in handy for uniquely styled blog posts.

    Reply
    • I assume it is because of copyright issues or something. When using @font-face you need to upload the font too, thus making the font available for download for everyone.

      Reply
      • I played with Font-Face in the last article, so Cufon was the new flavour of the week.
        Could have easily been created with either method.

        Reply
  15. This would have been perfect as a HTML5 project mate, seeing as your div's are labelled 'section1', 'section2' etc and most of your users are on Firefox it would have been supported fine (and non-html5 supporting browsers would have coped if you used the html5shiv script).

    Still looks brilliant though mate, well done.

    Reply
    • Absolutely, I should create a HTML5 clip in Coda. I quickly dumped in my usual XHTML Strict Doctype for this project without second thoughts!

      Reply
  16. Hi Chris, thanks for the tutorial.. it Rocks!!!

    I'll use whenever I have a necessity like this one…..

    Keep on publishing tutorials man… your's are excelent

    Reply
  17. Hello,
    this is nothing extraordinary, you should have done the graphics with svg/canvas. that would have been nice

    Reply
  18. This is a really amazing concept.

    I love the infographic and I really enjoyed that you converted it into an actual, scrollable web page, create way to present information.

    Reply
  19. Very cool Chris – the real deal over here is the design; converting it to HTML/CSS/jQuery wasn't the hard part.

    Oh, and thanks for calling me (or "us") awesome ;) .

    Reply

Leave a Comment

Verified by MonsterInsights