Charting - Create a decision tree / framework to fit use case to optimal data visualization.

[halocline]

Tracked by #3389

ToDos

There are well established best practices for which data visualizations best support particular types of analysis, including a few decision tree frameworks established by academics specializing in data visualization -- HPE Design System should leverage these experts' work.

• [x] Research / collect available data visualization decision frameworks (I have seen one presented as kind of 4 quadrants where the center is a starting point and the reader answers a few yes/no type questions and is guided to the right viz for their need).
• [x] Curate shortlist of most useful.

Deliverable

• [x] Prototype of decision tree or framework which guides a designer from their use case (analytical question) to optimal visualization.

[vavalos5]

Assuming we're trying to do something similar to this image below.

For whoever is working on this, here's a previous file we've worked out of before.

[kurt-ph]

Here is a short curated list of the most useful & relevent according to my research findings & case studies on data visualizations:

Bar Charts:

• Group Bar Charts
• Cluster Bar Charts
• Histogram Bar Charts
• Stacked Bar Charts

Line Charts:

• Basic Line Chart
• Smooth Line Chart
• Step Line Chart
• Area Line Chart
• Range Line Chart
• Multi-Line Chart

Pie Charts:

• Basic Pie Chart
• Donut Chart
• Exploded Pie Chart
• Multi-level Pie Chart
• Nested Pie Chart
• Variable Width Pie Chart

Scatter Plots:

• Basic Scatter Chart
• Bubble Chart
• Grouped Scatter Chart
• Heatmap Scatter Chart
• Contour Scatter Chart
• 3D Scatter Chart
• Polar Scatter Chart

Area Charts:

• Basic Area Chart
• Stacked Area Chart
• Range Area Chart
• Polar Area Chart

Heatmaps:

• Basic Heatmap Chart
• Correlation Heatmap Chart
• Geographic Heatmap Chart
• Hierarchical Heatmap Chart

Treemaps:

• Basic Treemap
• Squarified Treemap
• Slice-and-Dice Treemap
• Strip Treemap
• Circular Treemap

Gauge Charts:

• Basic Gauge Chart
• Dial Gauge Chart
• Thermometer Gauge Chart
• Angular Gauge Chart
• Semi-Circular Gauge Chart

Network Diagrams:

• Node-Link Diagram
• Force-Directed Graph
• Sankey Diagram
• Chord Diagram
• Radial Tree Diagram

Sankey Diagrams:

• Basic Sankey Diagram
• Multi-Level Sankey Diagram
• Circular Sankey Diagram
• Horizontal Sankey Diagram
• Vertical Sankey Diagram

Sunburst Chart:

• Basic Sunburst Chart
• Hierarchical Sunburst Chart
• Radial Sunburst Chart
• Multi-level Sunburst Chart
• Nested Sunburst Chart

[kurt-ph]

Updates for Charting:

• Explored and analyzed existing data visualization decision tree frameworks developed by academics and experts to understand the best practices and guidelines for selecting appropriate charts.
• Conducted a comparative analysis of various data visualization techniques, considering factors such as data complexity, message clarity, audience engagement, and visual effectiveness.
• Researched and gathered insights on the latest trends and emerging techniques in data visualization, used example from HPE Products & System which are aligned with industry standards.
• Research general and best practices on how charts are use in applications as a general use case.
• Made a list of some recommendations of data charts that would be useful according to my research & findings.
• In progress of developing decision tree in order to summarize data viz decisions that points and guide designers to the most appropriate data visualization.

[kurt-ph]

Here is the Charting on the decision tree so far: I've included the 4 different quadrants. https://www.figma.com/file/HuUVMlbOx6Nrc9EgFCkHrY/Data-Visualization?type=design&node-id=1%3A6&t=vEiD7VZlv36Cqa2H-1

[kurt-ph]

@halocline @SeamusLeonardHPE In Review: Any feedback would be helpful, sharing with other designers for feedback https://www.figma.com/file/HuUVMlbOx6Nrc9EgFCkHrY/Data-Visualization?type=design&node-id=1%3A6&t=XIQ4qJLP40TRU58M-1

[vavalos5]

Nice work Kurt, I left a comment on the Figma file. Will post my comment here below too:

"I am having a hard time following the lines to the different types of data visualizations, is it possible to reorganize this similarly to the image I attached on the GitHub ticket? I feel it might be easier to follow. In addition, I'm wondering if it would be easier for us and other designers to better understand the types by utilizing real use cases screenshots/examples. This might be easier to consume"

[vavalos5]

I'm including a screenshot to a mind map template Figma has that I think you can utilize which could make the variety of different types of data visualizations easier to read and follow.

[kurt-ph]

@vavalos5 Thanks Vicky, I will try that figma template and look at the example you attached on the GitHub ticket.

Sure, I can look into gathering relevant examples and screenshots to reflect the real use case as much as possible. I have most from HPE, but I'll look at other real life product examples for reference I can add. Some might be harder to find, as certain types of charts aren't used much in some digital products. Will try to find out as much as I can.

Let me know if you have any other suggestions or ideas.

[SeamusLeonardHPE]

Hey @kurt-ph @vavalos5

I had a quick pass at creating a mind map template in figma today ( I needed a break from button order!) Please review and let me know if this is helpful. My main goal was to simplify the appearance and act as a quick guidance/signpost to facilitate decision making, rather then getting deep into the complexity of the datatypes.

https://www.figma.com/file/HuUVMlbOx6Nrc9EgFCkHrY/Data-Visualization?type=design&node-id=2800-2234&t=6wsPUB8WLGt41wOl-4

Its incomplete in terms of copy and screenshots/examples but I thought it might help our discussion.

[kurt-ph]

@vavalos5 @halocline Included a link on the updated chart and reorganize the chart based on recent feedback: https://www.figma.com/file/HuUVMlbOx6Nrc9EgFCkHrY/Data-Visualization?type=design&node-id=1%3A6&mode=design&t=mW76ggXpcR1a7RaH-1

[vavalos5]

Nice work Kurt! This decision tree is much easier to read and follow! Thanks for making changes 😄 ✨

[kurt-ph]

As we discussed before, I created the framework as the initial first step after getting team and individual feedback. Closing this ticket as we agreed in standup that this is complete.