Designers often face the challenge of presenting extensive data in formats like annual reports, brochures, or blog posts. This task can be daunting, as clients frequently provide documents filled with dry information tables, expecting a “makeover” akin to an “Extreme Makeover: Data Edition.” The key to success lies in the strategic use of charts and graphs to visualize this data effectively.Contrary to the belief that charts are as monotonous as tables, they can be crafted with style and sophistication. This article delves into the appropriate use of charts, the variety of chart types available, their design elements, data collection methods, and the process of creating a chart.Before we delve into the intricacies of creating impactful charts, it’s essential to understand their fundamental utility. As the wise King Solomon said, “To everything there is a season,” and this applies to the use of charts. They are most valuable when transforming complex data into a simplified, user-friendly format for comparison and trend analysis. Google Analytics is a prime example of effective chart usage in the real world. Imagine if Google Analytics presented raw numbers instead of charts. We would miss out on crucial insights. Consider a scenario where you are tasked with illustrating survey results comparing Coke to Pepsi preferences for a Coca-Cola brochure. A chart can provide a visually engaging snapshot that compares the two brands, offering immediate understanding without the need for detailed tables.As I wrote this section, I realized the immense power of graphics in conveying information. Visuals are often more appealing than text, as they facilitate quicker comprehension. This principle applies to data visualization as well. Here are some popular chart and graph types for data representation.Pie ChartA pie chart is a circular graph divided into sections to illustrate proportions.Bar ChartA bar chart, or bar graph, uses rectangular bars either horizontally or vertically, with lengths proportional to the values they represent.Scatter PlotA scatter plot displays data as points, with each point plotted on the chart based on two variables.Line/Area ChartAn area chart, a variation of a line chart, connects data points with lines, creating an area filled with color.When designing a chart, there are typically four main customizable elements: the title, the legend, the data, and the parameters (axes, tick marks).The chart title should clearly convey the chart’s purpose, be easily readable, yet not overly dominant. It should serve its purpose and then step aside.The legend explains the data, ensuring the chart’s clarity. It is often smaller than the data itself and is typically positioned below the data, though placement can vary. The colors in the legend should correspond to those on the chart.Data can take various forms depending on the chart type, from 2D to 3D, and may include textures. The axes and tick marks should be subtle yet readable when needed.When data is provided in a table format, it’s easier to create a chart. Otherwise, data must be gathered and organized into a table to visualize it effectively. Essentially, it’s as simple as entering numbers into a spreadsheet, though some spreadsheet applications offer more advanced chart creation tools.Case Example: Visualizing Promotion Techniques of Design BlogsWhen gathering data from scratch, I start with a blank spreadsheet and label it appropriately. For instance, I recently created a blog post about the favorite promotion techniques used by authors of popular design blogs, based on interviews I conducted. To enhance the post, I used a bar graph to illustrate the most common techniques.To create this graph, I compiled the data into a table, then transformed it into a chart. This involved creating a new spreadsheet, labeling the first column with different promotion techniques, and entering the number of mentions for each in the second column.Several programs are excellent for creating professional-looking charts. The three main ones are Illustrator, Numbers, and Excel. Numbers and Excel are both spreadsheet programs, with Numbers offering 3D charts and textures. Illustrator, on the other hand, provides ultimate flexibility, allowing for 3D effects and easy manipulation of chart elements.Creating a Chart in Illustrator: OverviewAfter opening a new document, navigate to Window > Show Tools, then select the Graph Tool. Choose a chart type, click and drag to position and size the graph, and import your data.Creating a Chart in Numbers: OverviewWith data in a spreadsheet, simply highlight the cells, click Charts in the toolbar, and select a chart type. Changes to the data will automatically update the chart.Creating a Chart in Excel: OverviewLike Numbers, Excel allows you to create charts with a few clicks. Highlight the cells, go to Insert > Charts, select a chart type, and you’re ready to go!DIY Charts: Create Your OwnWhile some charts require program assistance, others can be crafted by hand. Information graphics, or infographics, are a great example, combining charts with creative flair.There are various ways to enhance your charts and make them stand out. For instance, using textures instead of solid colors, adding depth for a 3D effect, or hand-drawing charts for a unique touch.Custom icons can replace boring labels, and real-world objects can be used to represent data visually, such as a pie chart with a real pie or a bar chart using stacked cans.Designers often need to find creative ways to present data, and charts are an intelligent solution. I hope this article has demonstrated that charts can be both visually appealing and easy to create, inspiring you to explore the world of visual graphics.Do you have more tips, techniques, or tutorials on using charts and graphs? Share them in the comments.
Graphing/Charting Data on Web Pages: JavaScript Solutions
20 Fresh JavaScript Data Visualization Libraries
Innovative (and Experimental) CSS Examples and Techniques