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.
CSS Bar Graphs
Use CSS to show nice looking bar graphs based on just div and span tags
Sparkline charts
Here are three techniques for incorporating data visualization into standards-based navigation patterns.
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.
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.
Multi-Column Lists
How to produce a single, semantically logical ordered list that wraps into vertical columns.
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.
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.
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.
Creating a Graph Using Percentage Background Images
Here you use pre-made background images to shade in the appropriate data.
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.
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.
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 xhtml graph
This is simple bar-graph that shows data by month.
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 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.
Line Graph
CSS Scatter Plot
A scatter plot is a great way to graph two-dimensional data. Each data point is clickable in this solution.
Graphs with CSS
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!
Dynamic Pie Chart with CSS
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!
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!
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.
Advertisement
Related posts
- 50+ Essential Techniques and Tools for Visualizing your Data Charts and Graphs are ideal to visualize data in...
- 35+ very Useful And Powerful CSS techniques In this article tripwire magazine provides a list of very...
- 75+ Tools for Visualizing your Data, CSS, Flash, jQuery, PHP Most people would agree that the old adage “A...
- 30+ Essential Javascript Framework Supported Navigation Techniques Navigation is key to any web site or blog....
- 155+ Mega CSS Roundup of Tools, Tutorials, Cheat Sheets etc. In this article you will get access to one...
Submit
More Links
June 28th, 2009 at 8:01 am
This is what I call unique article, that stand out – very useful and new techniques!
June 30th, 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.
June 30th, 2009 at 2:01 pm
Agree with Dainis, this is the kind of article that we need to read frequently. Thanks for sharing
July 1st, 2009 at 8:23 am
Hmmm.. I think that it to be useful to me. Thanks