Line25

Designing an Infographic with HTML, CSS & jQuery

Read the full post

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

<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

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

63 Comments

  1. Michael Pehl says:

    Impressive stuff :)

    I like this very much. Thanks for "experimenting" and for sharing :)

    Michael

  2. Marco says:

    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 ;) .

  3. Nice big typography. Like the simple graphic and scroll down efect.

    :)

  4. 9swords says:

    <p>That is so cool.<br />

    Love the huge type in the graphic.<br />

    Super awesome is what it is.</p>

  5. ximi says:

    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.

  6. Gaurav M says:

    nice experiments Chris

  7. Thanks for sharing this wonderful information Chris. The work is pretty and awesome!

  8. Ionut Popa says:

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

  9. Rob Record says:

    The average Line25 user: browses for 1:39 .. what?
    Minutes? Hours?

  10. This is very nice Chris. I love the outcome and what you have done with jquery is quite awesome :)

  11. really useful and latest techniques you sharing in this article. thanks for sharing

  12. MBDealer says:

    Thank you Chris for this detailed jQuery-tutorial, It's great!

  13. 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

  14. papayashake says:

    nice article… keep up the good work

  15. MyFreeWeb says:

    Why Cufon? Why not CSS @font-face?

    • Oscar Lemström says:

      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.

  16. Pablo says:

    Rly nice article!!

    Thx for the article!!!

  17. Andrew says:

    Love this!

  18. Garry Aylott says:

    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.

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

  19. This is a really nice project Chris, great job! :)

  20. Rondell Paul says:

    this looks great!!!
    great use of HTML
    well done Chris

  21. Tim Smith says:

    This is absolutely awesome Chris!! Love it!

  22. vero says:

    Chris, each time you experiment and share your work, I learn new stuff, thanks for that!

    Have a good week!

  23. Kwame says:

    This is Awesome Chris. Can you do this in Photoshop too and code it in Dreamweaver?

  24. Paul Sizer says:

    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

  25. a*p says:

    I like the design, but it's more of an illustrator design job than css, really.

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

  27. David Silva says:

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

  28. Pam says:

    That was a fun ride Chris!

  29. Janko says:

    I love the end result, it looks fantastic. League Gothics really rocks.

  30. Nice job, it is easy to read and to navigate.
    Good continuation!

  31. Mark James says:

    Great stuff Chris, keep the experiments coming!

  32. Matthew Budd says:

    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.

  33. Saifu says:

    chris, this is really awesome……..

    working perfectly in ie……

  34. Felix says:

    Interesting stuff! Great job man!

  35. Lawrence says:

    Loving this website. Just stumbled upon it. I'll be checking it out some more. Thanks for this article Chris

  36. Very impressive and easy to follow the content. Thanks for this article.

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

  38. Dan Ellis says:

    Sweet infographic Chris! Really great way to display fairly dry info! Bravo!

  39. Gavin Steele says:

    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? ;-)

  40. Great experience!

  41. Stacy says:

    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.

  42. Elektric says:

    More…

  43. The result looks great, thanks for calling is awesome ;-)

  44. Lisewike says:

    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 !

  45. Jae Xavier says:

    Lovely. Just lovely.

    A good follow up to this article would be in HTML5 and CSS.

  46. A very nice article of 2010. Please keep posting such good ones.. thanks

  47. Web designer says:

    This is awesome!! Great article and great work.

  48. Absolutely amazing! So well explained. Thanks a million!

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

  50. 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?

  51. I love the end result, it looks fantastic. League Gothics really rocks…

  52. Cameron D says:

    Chris Spooner, you've done it again!! Thanks for the great TUT your awesome!

  53. Rondell Paul says:

    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!

  54. 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.

  55. Pol Moneys says:

    best article I've seen on line25. applause. and thanks for sharing.

  56. M.shafique Attari says:

    I am so happy to see the work on HTML. It is my first experience.
    Thanks to Chris Spooner

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

  58. amul says:

    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.

Comments are now closed