Skip to main content

Visualization Best Practice Guide Overview

1. Guide Overview

The Visualization Best Practice Guide is a supporting implementation reference guide provided by Guandata based on the visualization capabilities of the data analysis platform.

The Best Practice Guide includes page layout, common charts, color schemes, overall cases, etc., aiming to help users understand the best effects achievable within the platform and provide reference and guidance when users build analytical dashboards.

2. Guide Introduction

2.1 Analysis Dashboard Building Process

  • Step1: Choose appropriate visualization types based on analysis data and analysis purposes;

  • Step2: Based on data viewing order and narrative logic, consider layout aesthetics for canvas layout;

  • Step3: After completing layout adjustments, details need to be optimized;

  • Step4: Detail beautification and highlighting key information in graphical ways.

2.2 Visualization Design Principles

  • Accurate: When converting from data to visual expression, do not distort, mislead, or omit, accurately reflect the information contained in the data.
  • Effective: Information transmission has focus, restrained without redundancy, avoiding information overload, using the most appropriate data-ink ratio to express the most useful information.
  • Clear: The presentation method is clear and readable, organized, can help users quickly achieve goals, and obtain more information in the least time.
  • Beautiful: Perfect expression of data, reasonable use of visual elements for artistic creation, not over-decorated, giving users an elegant experience.
  • Scalable: Make visualizations adapt to different devices and sizes, while anticipating user needs for data depth and complexity.

1.png

2.3 General Visual Design Principles (CRAP)

  • Contrast: Distinguish different information through strong contrast.

2.jpg

  • Repetition: Repeatedly use a certain element.

3.jpg

  • Alignment: Align elements horizontally and vertically for easy visual recognition.

4.jpg

  • Proximity: Physically place related information together, while separating less related information through white space and other means.

5.jpg

3. Guide Directory

  • [《Page Components and Style Usage Methods》](1-Page Components and Style Usage Methods.md)

  • [《Common Chart Usage Methods》](2-Common Chart Usage Methods.md)

  • [《Basic Color Matching Methods》](3-Basic Color Matching Methods.md)