Data Visualization with CSS: Graphs, Charts and More
About the author : Payee Solutions
A good data presentation is an important aspect of the web industry because it is the key to let visitors understand your content within seconds. The easier or faster your visitors get a grasp of your web content, the higher it reflects your professionalism in handling presentation.
The criteria for a decent data presentation should be simple yet descriptive, well-elaborated but manage to maintain a user’s interest, takes no sweat to digest its content, convenient to compare, and lastly, the user should be able to make decisions or conclude the data presented effortlessly. As hard as these insane criteria may sound, it is possible.
In today’s post, we want to take you for a ride for various approaches to beautiful and creative data visualization tools that are entirely base on CSS/HTML. Yes just copy and paste then customize it according to your preference. These charts can be CSS bar graphs which display data in horizontal/vertical form and even Line graphs and Pie charts!
Bar charts are a definitive list with styles and classes defined in each line. The first chart has an error which occurs when the values get closer to 100% which is rectified in the second chart. Source code included for your reference.
Using the percentage width abilities of CSS, a percentage based bar graph is created in this tutorial. In a horizontal bar graph, you can either set a marker to travel the length from left to right or produce a vertical graph by using the same technique and reproducing it multiple times
Create vertical bar graphs using CSS and PHP by creating a simple list with height in pixels of individual bar, y-axis of the bar group and class to style the data sets. Eric Meyer teaches you to turn the same into a bar graph, line graph, pointed graph and a 3D graph using same techniques
Line graphs deliver information much faster than tables with numbers. Learn to create a line graph with CSS using HTML, replace the text with images and use CSS sprites and absolute positioning to obtain a line graph.
Paul Novitski teaches you to create a multi column list using CSS in this article. He discusses a lot of techniques like floating the split lists, numbering them with HTML attribute, CSS generated content, wrapping the list with XHTML, CSS etc and finally adds a little styling and background image to achieve the multi column list perfectly.
A bullet graph compares a single measure to one or more other measures and displays the qualitative range of performances. They are quite flexible for data driven sites. Learn to create a bullet graph using CSS / HTML.
A sandwich graph is created when a single bar in a bar graph is split many layers where height of a single column may indicate a global trend whereas the height of a single layer indicates a portion of this layer. Create a CSS sandwich graph from this tutorial.
For a stacked graph, a definition list is used to present data, then the margins and padding are reset to appear the same in all browsers. Axes are added and stylized to get the stacked bars. Each and every detail is precisely taught in this tutorial.
Pie charts make it quite easy to understand because they can be used in many colors which easily differentiate them with others and don’t require much space in the same time. A tutorial to create a simple Pie chart using DHTML / CSS. Insert the script for Pie chart in your page
This tutorial makes the maps more accessible, useful and visually attractive using CSS. These maps start by organizing with a data and then create a map using that data by adding some styles, displaying data as tool tip, turning off the java script and finally an interactive map is created.
An animated progress bar is created using CSS with 3 elements, 1 container and 2 nested elements and the animation is done using animated gif. A background images is used in the container with defined height and width.
Using CSS and unordered lists a CSS timeline can be created for the ‘About’ Section with simple markup. A nice looking timeline styled using CSS is created which will work even if the visitor does not have his CSS enabled.
SlickMap CSS is a style sheet that display the finished site maps from the HTML unordered list navigation. It can be customized to your own needs or styles. SlickMap streamlines the design process and eliminates the need of additional software by automating the illustration of site maps