20+ CSS Data Visualization Techniques

by Lars on June 25, 2009

20+ CSS Data Visualization Techniques

In this article you will find more than 20 unique and worth knowing CSS Data Visualization Techniques. The techniques show in this article reallt takes CSS to a new level and even if you’re not going to visualize data you may get inspired from investigating them.


ElegantThemes
ThemeForest

Advertisement

CSS Bar Graphs

Use CSS to show nice looking bar graphs based on just div and span tags

css Bar Graphs

Sparkline charts

Here are three techniques for incorporating data visualization into standards-based navigation patterns.

Sparkline charts

A More Accessible Map

Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive? Yes: using an accessible CSS-based map in which the underlying map data is separated from the visual layout.

A More Accessible Map

StyleMap: HTML Visual Sitemap Tool

StyleMap uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an embedded definition list. The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.

StyleMap HTML Visual Sitemap Tool

Multi-Column Lists

How to produce a single, semantically logical ordered list that wraps into vertical columns.

Multi-Column Lists

Accessible Data Visualization with Web Standards

This simple technique just adds bars to a list of items behind the text (check out the finished example for an idea of what we’re shooting for). It works for lists of any length. Longer lists benefit from being sorted by count since the relative values of the bars are easier to read when they are sequential. In this example, we’re going to display the count for each item in the list, but you can leave that out if the value is less important on its own and you’re just showing the relative values for comparison.

Accessible Data Visualization with Web Standards

Vertical Bar Graphs using CSS and PHP

Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.

Vertical Bar Graphs with CSS and PHP

Accessible Bar Chart

  • Table headers are there but hidden using the aural text class discussed in a previous article. Sighted users have already received information on what the chart is about.
  • A bar is created using an image which is stretched to the appropriate size.
  • Bar widths are calculated relative to the largest value.
  • Value cells have a repeated background image which shows the vertical lines.
  • Browsing the chart without CSS or images will render an ordinary table.
  • Value labels can be hidden by using the aural text class.

Accessible Data Visualization with Web Standards

Creating a Graph Using Percentage Background Images

Here you use pre-made background images to shade in the appropriate data.

Accessible Data Visualization with Web Standards

Definition List Bar Chart

Here you find two examples of styling lists into horizontal bar charts. Each definition list item is assigned a class that adjusts its width using percentage units.

Accessible Data Visualization with Web Standards

PHP and CSS- A Simple Graph

Easy way to display a simple percentage graph using PHP to work out the percentages and do the maths and CSS to display the data on our page.

Accessible Data Visualization with Web Standards

Pure Css Data Chart

Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let’s say simple data chart? How about giving it a try with nothing but good ol’ css?

Pure Css Data Chart

Pure CSS xhtml graph

This is simple bar-graph that shows data by month.

Pure Css Data Chart

CSS Vertical Bar Graphs

Here’s a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really.

charts-daten-semantik-css

Pure Css Data Chart

Pure Css Line Graph

This technique takes structured html, replace text with images and by using css sprites and absolute positioning it creates a simulation of a line graph.

Pure Css Data Chart

Line Graph

Pure Css Data Chart

CSS Scatter Plot

A scatter plot is a great way to graph two-dimensional data. Each data point is clickable in this solution.

Pure Css Data Chart

Graphs with CSS

Pure Css Data Chart

Pie Graph script

This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent background for it!

piegraph

Dynamic Pie Chart with CSS

csspie

DHTML / CSS based bar graph

This vertical bar graph is done completely using DHTML and CSS! Unlike an applet based solution, this loads fast and blends in with the rest of the page. You can even use a transparent background for it!

graph

DHTML / CSS based line graph

This line graph is done completely using DHTML and CSS! Unlike an applet based solution, this loads fast and blends in with the rest of the page. You can even use a transparent background for it!

multigraph

CSS Stacked Bar Graphs

There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs. So I’ve done it here. Based off Alen Grakalic’s Pure CSS Data Chart.

css-stacked-bar-graphs

Advertisement

WP Zoom Yamidoo MagazineWooThemes - Finally a themes club that is here to stayWP REMIX 2.0WP Zoom Yamidoo Magazine

{ 6 comments… read them below or add one }

Dainis Graveris June 28, 2009 at 8:01 am

This is what I call unique article, that stand out – very useful and new techniques!

Reply

murrydan June 30, 2009 at 1:53 pm

Wow, thanks. I have been looking for a way to convey some of the confusing material we have for an alternative sweetener web site, and these will come in handy.

Reply

Luis Ahmed June 30, 2009 at 2:01 pm

Agree with Dainis, this is the kind of article that we need to read frequently. Thanks for sharing

Reply

Flex developer July 1, 2009 at 8:23 am

Hmmm.. I think that it to be useful to me. Thanks

Reply

Stone Deft April 16, 2011 at 6:30 am

Lars you look great thanks for this, I will try out some of these today

Reply

Lars April 16, 2011 at 8:10 am

You are welcome Stone Deft

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 28 trackbacks }

Previous post:

Next post:


Web Analytics