We’ve been speaking about Net 2.0 for thus lengthy now it’s already passé to argue about what it means and what it doesn’t. However one factor’s for certain, there’s a whole lot of knowledge on the market on the net nowadays. And as internet designers, we’re designing a whole lot of data-driven websites.
Article Continues Under
There are many choices on the market for knowledge visualization, too. Google’s recently-announced Charts API is a superb instance, however there are a variety of instruments and providers for creating charts and graphs as photographs and for making interactive visualizations with Flash.
There are additionally nice standards-based strategies, corresponding to Eric Meyer’s CSS bar graphs which remodel good clear semantic desk markup into charts.
All of those choices are extraordinarily helpful when your knowledge is entrance and heart, when all you’re after is a chart. However what if we wish to embody knowledge visualization as an integral a part of the location, not simply an remoted determine or an interactive chart? After we’re designing interfaces for searching data-driven websites, it’s precious to have the ability to create navigation components which can be additionally visualization instruments. We will hold the consumer knowledgeable as they discover, to allow them to make higher choices about what they’re taking a look at and what they’re clicking on.
We might construct that sort of navigation with Flash, or generate static photographs each time the information adjustments, however that may be a giant tradeoff by way of accessibility and maintainability.
Even with standards-based markup, there are tradeoffs. If we simply wish to show the information, we will get essentially the most semantic richness and accessibility hooks with a desk. However when what we’re actually constructing is navigation, tables are an ungainly and sometimes clumsy instrument for the job. What we’d like is one thing in between—markup that’s acceptable for navigation, however with some further hooks for semantics and construction.
I’m going to cowl three fundamental strategies for incorporating some easy knowledge visualization into standards-based navigation patterns. All of them begin with the constructing block of HTML navigation: an unordered record of hyperlinks. We’re going to tweak the markup a bit and add in some knowledge factors and some hooks for styling, however in every case, the fundamental sample is identical acquainted one.
Since we don’t have the pure knowledge semantics of a desk to depend on, we’ll use semantic class names within the custom of microformats to protect as a lot of the information’s construction in our markup as doable. And since we’re utilizing HTML and CSS, we will use em-based measurements all through to verify the charts adapt because the consumer scales the textual content measurement.
Horizontal bar charts#section2
This easy approach simply provides bars to an inventory of things behind the textual content (try the completed instance for an concept of what we’re capturing for). It really works for lists of any size. Longer lists profit from being sorted by depend because the relative values of the bars are simpler to learn when they’re sequential. On this instance, we’re going to show the depend for every merchandise within the record, however you possibly can go away that out if the worth is much less essential by itself and also you’re simply exhibiting the relative values for comparability.
Let’s begin with a fundamental unordered record of hyperlinks. (Line wraps marked » —Ed.)
<ul class="chartlist">
<li>
<a href="http://www.instance.com/fruits/apples/">Apples</a>
</li>
<li>
<a href="http://www.instance.com/fruits/bananas/"> »
Bananas</a>
</li>
<li>
<a href="http://www.instance.com/fruits/cherries/"> »
Cherries</a>
</li>
<li>
<a href="http://www.instance.com/fruits/dates/">Dates</a>
</li>
</ul>
The very first thing to do is add the values for every merchandise within the record. I’ll wrap them in their very own span outdoors the hyperlinks so we will type them individually. (Line wraps marked » —Ed.)
<ul class="chartlist">
<li>
<a href="http://www.instance.com/fruits/apples/">Apples</a>
<span class="depend">420</span>
</li>
<li>
<a href="http://www.instance.com/fruits/bananas/"> »
Bananas</a>
<span class="depend">280</span>
</li>
<li>
<a href="http://www.instance.com/fruits/cherries/"> »
Cherries</a>
<span class="depend">200</span>
</li>
<li>
<a href="http://www.instance.com/fruits/dates/">Dates</a>
<span class="depend">100</span>
</li>
</ul>
To be able to create the bars, we have to type the record objects as block components in order that they take up the complete width, and set them to make use of relative positioning so we will place the bars relative to every merchandise. For the reason that primary function of this record is navigation, I’ll set show: block on the hyperlink components so the clicking goal fills up the complete width of the record as properly.
.chartlist li {
place: relative;
show: block;
}
I’ll additionally add in some types to offset the counts to the appropriate of the record for simple scanning. I’ll use absolute positioning as a substitute of a float so the hyperlinks and the chart bars can all overlap within the full width of the chart with out working into one another.
.chartlist .depend {
show: block;
place: absolute;
high: 0;
proper: 0;
margin: 0 0.3em;
text-align: proper;
colour: #999;
font-weight: daring;
font-size: 0.875em;
}
Since we used absolute positioning for the counts, I’ll add some padding to the hyperlinks to verify there may be room for the numbers to suit subsequent to the hyperlink textual content with out overlapping. I’ll additionally want so as to add a few types to the hyperlinks to verify they all the time seem above the bars we’re going to place under them. I’ll set their place to relative so they are going to settle for a z-index worth, after which set their z-index to one thing above zero in order that they’ll keep on the high of the chart.
.chartlist li a {
show: block;
padding: 0.4em 4.5em 0.4em 0.5em;
place: relative;
z-index: 2;
}
Earlier than I type the bars, I want so as to add a component to the markup for every merchandise to retailer the knowledge that the bars will convey. On this case we wish to present the relative worth of every merchandise within the record in comparison with the whole depend for the entire record. So the knowledge we’ll be speaking with the bars shall be a proportion calculated from these two values. I’ll add a component to the markup and provides it an acceptable class so we will choose it up within the types. I’ll use a category of index to characterize the ratios represented by the chart bars. (Line wraps marked » —Ed.)
<ul class="chartlist">
<li>
<a href="http://www.instance.com/fruits/apples/">Apples</a>
<span class="depend">420</span>
<span class="index">(42%)</span>
</li>
<li>
<a href="http://www.instance.com/fruits/bananas/"> »
Bananas</a>
<span class="depend">280</span>
<span class="index">(28%)</span>
</li>
<li>
<a href="http://www.instance.com/fruits/cherries/"> »
Cherries</a>
<span class="depend">200</span>
<span class="index">(20%)</span>
</li>
<li>
<a href="http://www.instance.com/fruits/dates/">Dates</a>
<span class="depend">100</span>
<span class="index">(10%)</span>
</li>
</ul>
A notice in regards to the knowledge#section3
On this instance chart, we’re exhibiting every merchandise as a proportion of the entire (like a pie chart), however you should use the identical approach to indicate percentages relative to the very best worth within the record—so there may be all the time no less than one 100% bar and every part else is a proportion of that most worth. It’s also possible to calculate the odds relative to a baseline worth that you simply set at a set proportion (say, 50%), and all the opposite percentages shall be increased or decrease primarily based on their deviation from the baseline; efficiency knowledge for brand new laptop chips and comparable merchandise is commonly displayed on this means.
The mathematics to perform that is outdoors the scope of this text, however the level is that you should use the identical markup and elegance strategies to chart various kinds of knowledge. Simply make sure you use clear titles and descriptions on your charts so the values themselves make sense in context.
In these examples, I’m utilizing made-up knowledge, however there are a number of how to calculate the odds on an actual website. You possibly can calculate them on the backend and show them in a template (I’m a giant fan of the Django framework’s widthratio template tag, which makes calculating ratios between two variables very simple). It’s also possible to use JavaScript to extract the proportion worth from the markup and apply it as a width type to the bars. For the needs of those examples, I’m assuming that every one the mandatory math is already performed, so I’ll use hand-coded inline types to characterize the widths of the bars as percentages. (Line wraps marked » —Ed.)
<ul class="chartlist">
<li>
<a href="http://www.instance.com/fruits/apples/">Apples</a>
<span class="depend">420</span>
<span class="index" type="width: 42%">(42%)</span>
</li>
<li>
<a href="http://www.instance.com/fruits/bananas/"> »
Bananas</a>
<span class="depend">280</span>
<span class="index" type="width: 28%">(28%)</span>
</li>
<li>
<a href="http://www.instance.com/fruits/cherries/"> »
Cherries</a>
<span class="depend">200</span>
<span class="index" type="width: 20%">(20%)</span>
</li>
<li>
<a href="http://www.instance.com/fruits/dates/">Dates</a>
<span class="depend">100</span>
<span class="index" type="width: 10%">(10%)</span>
</li>
</ul>
Ending up the bar chart#section4
The ultimate step for this chart is so as to add the styling for the bars. I’m going to cover the precise proportion (utilizing the text-indent trick from Mike Rundle’s trusty picture alternative approach) because the exact worth isn’t as essential because the relative scale and the bar will do properly by itself. If you could present the proportion, you possibly can select to show the proportion throughout the bar or use separate components for the bar and the proportion.
I’ll set the peak of the bars to 100%, and since we’ll be setting the precise width later, I’ll set a default width of 0 so the bars received’t present up in any respect if we don’t give them an specific worth. I’ve chosen a light-weight blue for the bar backgrounds, so the hyperlink textual content shall be readable when it overlaps the bar, however the bars will nonetheless be simply seen.
.chartlist .index {
show: block;
place: absolute;
high: 0;
left: 0;
top: 100%;
background: #B8E4F5;
text-indent: -9999px;
overflow: hidden;
}
I’ll add in some hover types for the chart rows and a few borders and padding for readability, and we’ve received ourselve a chart (see the completed instance). One factor to notice is the way it appears with types turned off. As a result of we made certain to place the odds within the markup, the knowledge we’re conveying with a flowery chart continues to be accessible when that presentation degrades.
When you’ve established the fundamental recipe of excellent previous semantic navigation with a sprinkling of information and a few CSS to show the information right into a chart, there are many variations you possibly can apply to various kinds of knowledge. One simple trick is to show the chart on its aspect to make a timeline (see the second chart within the completed instance).
I’ll begin out with markup that’s similar to the primary chart. On this case, it’s an inventory of days, with a worth for every day. Since I’ve restricted area within the horizontal format to indicate labels for every bar, I’m simply going to indicate the day of the month within the label and use a header above the record to point the month. Since that is meant to be navigation, and the chart will convey the relative values (which is what we’re after), it’s okay that we’re not exhibiting all the knowledge right here. As an additional comfort, I’ll add a title to the hyperlinks with the complete date and the depend for that day, in order that element will present up in a tooltip for every bar. (Line wraps marked » —Ed.)
<ul class="timeline">
<li>
<a href="http://www.instance.com/2007/dec/1/" »
title="December 1, 2007: 40">
<span class="label">1</span>
<span class="depend">(40)</span>
</a>
</li>
<li>
<a href="http://www.instance.com/2007/dec/2/" »
title="December 2, 2007: 100">
<span class="label">2</span>
<span class="depend">(100)</span>
</a>
</li>
</ul>
Repeat as essential. On this instance, I’ve created a 30-day chart with a bar for every day, however you may make the chart any size and measurement you want. When you’re making a chart with fewer bars, you can also make them bigger and make room for longer labels beneath.
To be able to be certain that the labels match within the area beneath the bars, I’m going to measurement your complete chart utilizing ems so it can flex up and down with the textual content measurement. To make issues easier, I’ll go forward and set the textual content measurement I wish to use for the labels on the principle .timeline ingredient, so I can measurement every part relative to that. I’ll set the top of the entire chart to 10 ems, which leaves 8 ems for the bars and a couple of ems for the labels with slightly padding.
.timeline {
font-size: 0.75em;
top: 10em;
}
.timeline li {
top: 8em;
}
As earlier than, I’ll set the record objects to make use of relative positioning, since I’ll be utilizing absolute positioning to pin the bars to the underside of every one. (If I didn’t use absolute positioning relative to every record merchandise, the bars would simply dangle from the highest, which isn’t fairly the look we’re going for.) I’ll float the record objects to the left so the bars will line up subsequent to one another horizontally. I’ll set the width of every bar to 1.5 em and the peak to eight em to provide us sufficient room for the two-digit labels under, and put just a bit padding on both aspect to separate the bars from one another. I’m utilizing ems for all these dimensions so the bars and the labels will scale up collectively when the textual content measurement adjustments.
.timeline li {
top: 8em;
place: relative;
float: left;
width: 1.5em;
margin: 0 0.1em;
}
Since I need your complete space of the bar and label to be clickable, I’ll set the hyperlinks to show: block and top: 100% in order that they fill the obtainable area we’ve created for the record objects.
.timeline li a {
show: block;
top: 100%;
}
I need the labels to show under the bars, however since I need each the bars and the labels to be clickable, I’ve positioned them each contained in the a tag. To be able to transfer the labels out of the way in which, I’ll use absolute positioning with a unfavorable backside worth. For the reason that bars have a top of 8 em and the chart is 10 em I’ll transfer the labels down from the underside of the bars by -2 em. I’ll give them a line-height of two em as properly, so it doesn’t matter what the textual content measurement, they’ll have loads of room proper in the midst of that vertical area. We’ll pin them to the left aspect of the bars and set them to take up the complete width with the textual content aligned within the heart.
.timeline li .label {
show: block;
place: absolute;
backside: -2em;
line-height: 2em;
left: 0;
width: 100%;
text-align: heart;
}
Since we’re not going to be displaying the counts on this chart, I’ll simply use the depend ingredient to show the bar, utilizing the identical mixture of text-indent and overflow to cover the textual content. I’ll give the bars a stable background and place them from the underside left of the record merchandise. Reversing what we did for the horizontal bar chart, I’ll set the width of the bars to 100% and the peak to zero.
.timeline li a .depend {
show: block;
place: absolute;
backside: 0;
left: 0;
text-indent: -9999px;
overflow: hidden;
width: 100%;
top: 0;
background: #AAA;
}
For this chart, I don’t need the every bar to characterize a proportion of the whole for the entire chart, since there are such a lot of objects and the bars would all be tiny. As a substitute, I need the day with the very best depend to be the tallest bar, so I’ll set the peak on that to 100% and calculate the heights of all the odds of that highest day’s depend. You possibly can see outcomes (with giả knowledge however actual math) within the completed instance. I’ve additionally added a hover type to spotlight the bar, label, and background space so it’s clear which merchandise is about to be clicked on.
Now that we’ve tipped our chart on its aspect to make a timeline, we will shrink it right down to make a sparkline—a useful approach to present a snippet of information inline with textual content (see the completed instance). You possibly can see from the instance that we’ll mainly simply be shrinking the timeline chart. With bars as a substitute of strains, it received’t be a real sparkline, nevertheless it matches the spirit of packing a whole lot of data in a easy, word-sized chart.
The beginning markup is slightly completely different this time. Since we’re creating a number of charts, we’ll nonetheless begin with an unordered record, however every record merchandise will include a full chart. Since sparklines are meant as an unobtrusive approach to show data inline with textual content, we will attempt to mirror that even within the unstyled markup by utilizing inline components for every of the information factors. What we’re capturing for is one thing that reads fairly clearly even with out the CSS utilized. Check out this instance with the types eliminated to get a greater concept.
I’ll begin with a span because the container for the chart, and use one other span with a category of index because the container for every bar. Every quantity within the sequence is wrapped in its personal span with the depend class. That is what we’ll use to type the bar. Since I’ll be hiding all of the textual content throughout the internal span.depend tag anyway, I’ve gone forward and added commas between each and parentheses round the entire set to make the unstyled content material slightly clearer.
<span class="sparkline">
<span class="index"><span class="depend">(60, </span></span>
<span class="index"><span class="depend">220, </span></span>
<span class="index"><span class="depend">140, </span></span>
<span class="index"><span class="depend">80, </span></span>
<span class="index"><span class="depend">110, </span></span>
<span class="index"><span class="depend">90, </span></span>
<span class="index"><span class="depend">180, </span></span>
<span class="index"><span class="depend">140, </span></span>
<span class="index"><span class="depend">120, </span></span>
<span class="index"><span class="depend">160, </span></span>
<span class="index"><span class="depend">175, </span></span>
<span class="index"><span class="depend">225, </span></span>
<span class="index"><span class="depend">175, </span></span>
<span class="index"><span class="depend">125)</span></span>
</span>
I’ll float the entire chart to the left to set it subsequent to the textual content. Utilizing a float here’s a little bit of a cheat, since sparklines are supposed to have the ability to seem immediately inline with textual content. However till we get extra constant help for the inline-block show property (which is the impact we actually need), a easy float should do. Since we wish the chart to be the identical measurement because the textual content, I’ll give it a top of 1em, and slightly margin on both aspect to provide it some respiratory room.
.sparkline {
float: left;
top: 1em;
margin: 0 0.5em;
}
For the reason that .index components are the bar containers this time round, we’ll set place: relative on them, and float them to the left. I’ll make the bars 2px in width, since 1px is slightly too small to actually register. We wish them to take up the complete top of the chart, identical to within the timeline, so we’ll set the top to 100%.
.sparkline .index {
place: relative;
float: left;
width: 2px;
top: 1em;
}
For the bars themselves, we’ll comply with nearly precisely the identical sample as we did for the timeline, and apply the text-hiding trick.
.sparkline .index .depend {
show: block;
place: absolute;
backside: 0;
left: 0;
width: 100%;
top: 0;
background: #AAA;
overflow: hidden;
text-indent: -9999px;
}
I’ll additionally add some fundamental types and padding to the unordered record containing our sparkline set. You possibly can see the leads to the completed sparklines instance.
Don’t underestimate the Pressure#section7
You possibly can see all of the charts collectively within the last instance. Strive adjusting the textual content measurement and see how the charts adapt with the remainder of the web page, or try the unstyled instance to see how the markup degrades for machine readers or environments with out full CSS help.
Clearly, these charts are easy, and these strategies aren’t the best choice in each state of affairs. While you want semantically wealthy markup—when you may have a big set of information or a whole lot of classes to match, nothing beats a desk. For fancy visualizations like scatterplots and 3D pie charts, you would possibly select some type of server-side instrument to generate photographs. For further interactivity and animation, Flash might be the way in which to go.
It’s definitely not a common framework for knowledge show, nevertheless it does add a whole lot of context to what would in any other case be blind navigation. And you can begin to see how these strategies could possibly be the constructing blocks for extra advanced implementations.
So, whenever you wish to construct some ambient visualizations which can be built-in with the construction of a data-driven website, keep in mind: you possibly can go a great distance with accessible, standards-based markup and a few easy CSS.