We all live in the era of information. Every day we receive tons of new data, but to gain real value from it, we need to think about how it’s presented. Data visualization is the process of making received information more human readable. We commonly do this via tables and charts.
Data Analysis With Tables and Charts
Tables and charts are two common ways of representing and analyzing data.
Tables display data in rows and columns. A row can have many columns. A table can also include additional features like search, sorting, and pagination that make data analysis easier.
Charts display data graphically in varied forms. For better visualization, they can include helper features like tooltips and captions. Some of the well-known chart types are:
- Bar Charts
- Column Charts
- Line Charts
- Organizational Charts
- Pie Charts
- Bubble Charts
- Doughnut (or Donut) Charts
It’s worth noting that the existence of one doesn’t negate the existence of the other. We can perfectly display data in both ways at the same time and make them synchronize. We’ll see this in action during the penultimate tutorial.
Enough talk! Let’s have a look at all the custom chart tutorials that are available on Tuts+!
Organizational charts represent the relationships between entities in a tree structure format. For example, we can use them to describe a company’s or a study program’s structure.
In this exercise, we’re building a CSS-only four-level deep vertical organizational chart.
Building on top of the previous chart, we keep exploring the organizational charts. This time we’re building a horizontal organizational chart that turns into a vertical one on mobile screens.
Gantt charts look like bar charts. They are primarily used as a project management tool for planning and distributing tasks across team members. All popular project management platforms make use of them in their dashboards.
Would you like to learn how to build a Gantt chart in pure CSS? If so, be sure to follow Ian Yates, Web Design editor here at Tuts+, as he covers a flexible approach for developing such a chart with CSS Grid.
Thermometer charts look like stacked column charts. They aim to show the percentage of completion (progress) of a specific goal.
In this tutorial, we’re implementing a CSS-only animated thermometer chart that visualizes the funding of a charitable organization over the years.
Column (or vertical) charts use vertical columns to present and compare data. If there are multiple columns, it’s recommended to use them on large screens so users can see all the columns.
In this demonstration, we’re building a CSS-only responsive column chart as part of a one-page portfolio that showcases our web skills. Click Skills to see it in action.
Bar charts use horizontal columns to present and compare data. They are ideal for small screens as users can scroll vertically to see the data.
Donut charts are another type of chart. They are similar to pie charts, but they have a round hole in the center that makes them look like a donut. Semi-circle donut charts are half of the donut charts.
In this exercise, we’re creating a CSS-only animated semi-circle chart where we list our web skills. Each skill is associated with a percentage. The higher the percentage, the bigger the presence of the skill in the chart.
The nice thing here is that we synchronize the table and chart so that they both listen to user changes.
That concludes another roundup, folks! Hopefully, this list has given you enough inspiration to see the capabilities of CSS and start making your own charts. Enjoy the demos, read the associated tutorials, and last but not least, be sure to follow Envato Tuts+ on CodePen for more creative pens!
As always, thanks a lot for reading!