Data visualization dos and don’ts

      Data visualization tools are a great way to create impactful reports. A well designed report can give users an understanding of their data quickly and easily. And with tools like JavaScript chart library VanCharts, users can now quickly visualize and understand vast amounts of data.

Do

1. Have a goal in mind.

      Have a specific message you want to communicate. Identify the relationships and patterns of your data and focus on what you want to show.This may sound obvious, but by understanding what information you want the visualization to get across, you are more likely to accomplish it.

2. Keep it simple

      Analytic results shouldn’t be presented to 10 decimal places when the user doesn’t need that level of precision to make a decision or understand a concept. Effective visual interfaces avoid 3-D effects or ornate gauge designs when simple numbers, maps or JavaScript charts will do. This is the golden rule. Always choose the simplest way to convey your information.If it’s not important to the message you are trying to get across, eliminate it.

3. Highlight the important information

      Use color, size, and position to help the reader see what is important. Color adds emphasis, highlights particular data points, and draws connections between JavaScript charts. The hue, value, and intensity of the color are significant and may have cultural or social connotations.

      Size and position draw attention to particular data points and show hierarchy. The top of JavaScript charts and larger objects tend to draw the eye first. Cultural reading conventions also determine how people read charts.

      Color contrast can attract the eye and draw attention to particular data points. Place the largest slices in a pie chart at the top because the eye is naturally drawn there first.

4. Choose the correct charts types

      Numbers don't lie, but a bad chart decision makes it extremely difficult to understand what those numbers mean. For instance, if you are comparing data with similar values, a pie chart may not allow the user to distinguish the difference in values. A bar chart may be a better option.Here are the examples generated by JavaScript chart library VanCharts.

      Bar charts

      Depict nominal data. They are often used to illustrate comparisons. The value axis should always start at zero and use a consistent scale.

JavaScript charts bar chart

Chart from JavaScript chart library VanCharts

      Pie Charts

      Depict slices of a whole. There should not be more than five slices, and their total value should equal 100%. The largest slice should start at the top and fall to the right.

JavaScript charts pie chart

Chart from JavaScript chart library VanCharts

      Scatter Plots

      Depict relationships between two variables. They are effective with large datasets and to highlight patterns or correlations. Danger: the reader may assume a cause-and-effect relationship between the X and Y axes even when there isn’t one.

JavaScript charts scatter chart

Chart from JavaScript chart library VanCharts

      Line charts

      Depict patterns over a continuous range. They do not have to start at zero, but the data ranges should be clearly marked and the overall chart shape should retain a 5:8 height and width ratio.

JavaScript charts line chart

Chart from JavaScript chart library VanCharts

5. Use the full axis to avoid distortion.

      If there is a break in the axis, the comparison among data points can be very deceiving. Your users could reach an incorrect assumption.

JavaScript charts full axis

Chart from JavaScript chart library VanCharts

6. Make sure you include a descriptive title, including the x / y axis.

      A) Include a compelling title to orient the viewer and communicate the main focus of the visualization. Do not capitalize all letters or make them bold.

      B) Include titles in the x and y axis.

      C) If the titles are too long (bar charts), rotate so they are not truncated.

Don’t

1. Maximize the data-ink ratio

      If there is a break in the axis, the comparison among data points can be very deceiving. Your users could reach an incorrect assumption.

JavaScript charts VanCharts

2. Use special effects, such as 3D graphics.

      The perspective added in 3D graphics distorts the data and makes it difficult to interpret accurately. 3D perspective distorts the overall length of the bars. 3D perspective misrepresents the surface area of slices, distorting slices in the front to appear larger. Here are the examples generated by JavaScript chart library VanCharts.

JavaScript charts VanCharts
JavaScript charts VanCharts

Chart from JavaScript chart library VanCharts

3. Make it an eye test.

      Make sure you can read everything. This is especially important since some JavaScript charts will be viewed on a smaller screen, like a tablet or smart phone.

JavaScript charts VanCharts

Chart from JavaScript chart library VanCharts

4. Make assumptions about your audience.

      Use industry jargon and acronyms sparingly. Not everyone knows what they are.You need to understand who will be viewing the report

      Are they Technical? Operational? Management?

      You want to make sure the users will understand the data and visualization.

      With all the various chart types and visualization options, you are sure to find a visualization that helps your audience better understand their data. Use this list not as a complete checklist, but as a guide to help you on your way. Happy visualizing.