Cloud Vid Pattern Library - Group 9

Header Image

Data Visualization

Data visualization is a powerful tool for illuminating trends and insights in your data. It empowers informed decision-making by presenting data clearly and meaningfully. Here are our standards for crafting compelling visual data stories.

Ticks and Tick labels for axes must exist on all charts. Every chart should include ticks and tick labels for both the x and y axes to ensure readers can interpret data accurately. This provides a visual reference for scale and measurement.

Must include the chart name and axes labels for every chart. To enhance chart clarity, make sure to include a descriptive chart name along with clear labels for the x and y axes. This practice aids readers in understanding the context and purpose of each chart.

Ensure that all charts are easily readable Readability is a priority. Charts should be designed to convey data effectively. Use labels, appropriate colors, and accessible design methods to make charts as clear as possible to readers.


Multi-Value Charts

Multi-Value Charts play a key role in comparing and visualizing various video metrics. Here are different chart types, each designed for specific applications.

Bar Chart

Bar Charts are used to compare data across different categories. They boast a sleek design with no rounded corners. The space between bars is maintained at 50% of the bar width for clarity. Stacked bar charts rely on distinct categorical color combos, ensuring data differentiation.

Line Chart

Our Line Charts emphasize a mature, editorial style. Solid lines depict actual data trends, while dotted lines are used for general traits such as averages or projections. These lines are consistently 2pts in weight and straight, facilitating easy data analysis.

Interactive Scatter Plot with Highlighting and Brushing

Scatter Plot Charts allow you to explore data correlations with colored points, each measuring 8px by 8px. To enhance differentiation, we employ various shapes like circles, squares, triangles, diamonds, and upside-down triangles for multiple data sets.

It must include a highlight and brush data points feature for a more in-depth analysis. Simply click on specific data points to highlight them or create a selection area by clicking and dragging your mouse over the chart. This functionality makes it easy to focus on a particular range of data points and analyze trends, identify clusters, or compare specific data points effortlessly.

Pie Chart

Pie Charts provide a visual representation of data distribution by source. However, it's recommended to use other chart types like percent bar graphs for more effective data display. If you must use a Pie Chart, employ categorical color combos for clarity.

0.25

Donut Chart

Donut Charts are a variation of Pie Charts, featuring a hole in the center. Use them for displaying data distribution while maintaining readability and aesthetics. Employ categorical color combos for clear differentiation.

Stacked Chart

Stacked Charts excel at illustrating how different categories contribute to overall performance. They offer a comprehensive view of data composition, making it easier to analyze and compare contributions.


Single-Value Charts

Single-Value Charts are crucial for highlighting key video metrics with precision. Here's an example:

Single-Value Chart

Single-Value Charts provide a focused representation of specific data points. They are designed to highlight essential video metrics in a clear and concise manner.

Metric Chart

A Metric Chart is a single-value representation of a specific video metric, providing a clear and focused view of essential data.