Patterns
Dashboard
Present data visualization from the variation of information
Data visualization is a complex task. Choosing a certain way to display multiple pieces of information is often confusing. It can be static or dynamic and can change over time. Selecting the proper data visualization is essential to avoid data misinterpretation. This pattern will recommend the data visualization based on the function that the user needs and some use cases to provide better decision-making when using the component.
Data visualization is divided into 4 categories to help navigate the charts based on the relationship between data, throughout the time. 4 categories are Comparison, Composition, Relationship, and Distribution.
Comparison
Using visualization to compare one or many values sets is so much easier than looking at numbers in the grid. Column and line charts are probably the most used.
Bar charts represent numerical values compared to each other. The length of the bar represents the value of each variable. One axis of the chart shows the specific categories being compared and the other axis represents a discrete value scale.
Use Case: The use of popular mobile device by quantity
Similar to bar chart, where the categories are placed on the x-axis. These are preferred over bar charts for short labels, date ranges, or negatives in values.
Use Case: Package subscription analysis (over the year)
Area chart connect data points with line segments, stacking variables on top of one another and using color to distinguish between variables. Area chart are used to display the development of quantitative values over an interval or time period.
Use Case: Website usage statistic over time
Spline chart that uses curves instead of straight lines. It is designed to emphasize trends in data over a time period but in a more smooth, gradual way than a line chart does.
Use Case: Task status of employee over time
This chart is used to display quantitative values over a continuous interval or time period. Line chart is most frequently used to show trends and analyze how the data has changed over time.
Use Case: Transaction of active customers over time
Same as Line chart, Multiline captures numeric variables over time. Allowing comparison of different units and scale ranges.
Use Case: Transaction by types of fossil fuel
Composition
Show how a single entity can be broken down into its component elements. These charts are used to illustrate a part to a whole data, usually in percentages, with all the segments equaling to 100%.
Pie Charts help show proportions and percentages between categories, by dividing a circle into proportional segments. Pie Charts are ideal for giving the reader a quick idea of the proportional distribution of the data.
Use Case: Profiling percentage by age group in customer dashboard
Benefit of Donut Chart (compared to pie chart) is to make the viewer focus more on the changes in overall values. You are focused on reading the length of the arcs, rather than comparing the proportions between slices.
Use Case: Statistic of customers who refuel their vehicles in a month
Treemap chart is displaying the quantities for each category that is assigned a rectangle area with the subcategory rectangles nested inside. Treemaps are also great at comparing the proportions between categories via their area size.
Use Case: Comparison of college majors in a university
Heatmaps are good for showing variance across multiple variables, revealing any patterns, displaying whether any variables are similar to each other, and for detecting if any correlations exist. Heatmaps visualise by variations in colouring.
Use Case: Busy hour over the weekdays in customer service dashboard
Shows the data series that are stacked one on top of the other in vertical columns. Stacked column charts can show changes over time because it's easy to compare total column lengths.
Use Case: Production details per commodity in Agriculture
Plotted in the form of several area series stacked on top of one another. Stacked Area chart also use the areas to convey whole numbers, so they do not work for negative values. they are useful for comparing multiple variables changing over time.
Use Case: Workload status overtime
Relationship
Using visualization to show relationship between two or more variables. Many readers will assume the relationship in the chart to be causal, i.e. one causes the other (unless you tell them otherwise).
A Scatter chart function is to display all the values between two variables. Primarily used for correlation and distribution analysis. By having an axis for each variable, you can detect if a relationship or correlation between the two exists.
Use Case: Relation between temperature and dates in differenct cities
A hybrid between a scatter plot and a line plot, the scatter dots are connected with a line for quickly surface potential relation.
Use Case: Relation between Click Through Rate (CTR) and Conversion Rate in commerce website
Bubble Charts is used to plot points along a grid where the X and Y axis are separate variables. Each point is assigned a label or category. Each plotted point then represents a third variable by the area of its circle and also colors.
Use Case: Statistics of tasks among number of digital workers and their roles
Distribution
Show values in a dataset and how often they occur. The shape of a distribution can be a way of highlighting the uniformity or equality in the data.
Box plot chart is a convenient way of visually displaying the data distribution through their quartiles. Box plot is useful when comparing distributions between many groups or datasets. Box Plots can be drawn either vertically or horizontally.
Use Case: Tren of product purchase over time
A Histogram visualises the distribution of data over a continuous interval. Each bar in a histogram represents the tabulated frequency at each interval/bin. Histograms help give an estimate as to where values are concentrated.
Use Case: Customer waiting time on monthly basis