AI & Data Visualization: How Generative AI is transforming Data Visualization and Product Design

Melissa Matias
12 min readNov 10, 2023

--

I am delighted to share my vision of how Artificial Intelligence (AI) is reshaping the world of data visualization and playing a pivotal role in digital product design.

My journey as a digital product designer started a decade ago in Europe. It was in Barcelona in 2014 when I ventured into the fascinating world of data. Contrary to the common belief that designers and mathematics don’t mix well, I discovered an exciting career opportunity in the field of data visualization. I fell in love with numbers and decided to focus on this discipline, seeking perfection along the way.

“The fusion between art, design and data has become my source of inspiration for my creative process.”

Over the years, I specialized and learned new data visualization tools to collaborate with multinational SaaS and Business Intelligence companies. Tools such as Tableau, PowerBI, ServiceNow, Contentsquare, Hotjar, Heap and R ggplot2 became essential for gaining a comprehensive understanding of data in terms of types and nature.

Today, the Information Technology sector is highly competitive and in constant evolution. Consequently, the demand for professionals specialized in data visulization, information design and designing with AI principles is more pressing than ever.

The contents of this publication include:

  • The Data Visualization Key Principles, with inspiring examples to encourage further exploration.
  • The Generative AI Fundamentals and Data Visualization
  • The Role of Generative AI & Data Visualization in Digital Product Design, and how I apply it in my daily work.
  • A List of Applications & AI tools I use in Data Visualization and Product Design.
  • Conclusions.

Let’s begin with the basics.

Eduardo Tufte, a pioneer in data visualization, defined “graphical excellence” as the ability to convey the most ideas in the in the shortest time, using the least ink and space.

Let’s explore these principles through three historical examples, with a common theme related to health data:

  1. Florence Nightingale’s rose chart, depicting the causes of military deaths in hospitals during a year of the war. This “Area Polar Chart” uses the blue segment to represent deaths caused by hygiene and hospital cleanliness issues, the red area signifies deaths due to combat injuries, and the black sector reflects deaths due to other external reasons. What’s remarkable about this chart is its ability to simplify complex information into an effective representation, enabling us to quickly identify the primary causes of death in seconds.
  2. A contemporary example is The New York Times the espiral chart illustrating the evolution of COVID cases in the United States. This spiral chart clearly shows seasonal patterns and areas with disease outbreaks during those years. What’s remarkable about this chart is its ability to emotionally engage with users to quickly identify areas with a higher presence of COVID cases.
  3. The third example is a well-known health graph for those of us using fitness tracking applications. It’s a line chart displaying the number of steps taken during the day and how it compares to the previous period. This graph makes quick reading easy because it uses the visual variable of color to highlight total steps per day distributed over time. However, the challenge here lies in utilizing screen space for mobile format.

In summary, these three charts achieve the goal of conveying information in a simple, effective and attractive way at different times in history. I believe that the visualization of personal health data will continue to grow and evolve according to the technologies of its time. I hope more designers choose a clean, clear, and minimalist style to visualize data that shapes our future in a accessible way and and ethically responsible.

Data Visualization Key Principles

Navigating the path to creating data-driven digital solutions is a challenge. Throughout my experience, I’ve identified three key phases that simplify this process, from data to visual solutions:

The approach:

  • Data: This is the raw material that kicks off the project. In this phase, we gather, refine, and process data to understand what to build and what problems to solve. There are various data sources, and you can explore more about them at this link to World Bank Data.
  • Space: This is where we take the first step to transform data into information. We define metrics, KPIs, and the target audience. In this phase, we define the information architecture, which includes the navigation structure and visual flow of the dashboard, along with key actions and components with which our users will interact. We always need to keep on mind the user needs, pains and desires. You can learn more about information design in Analytics with the AntDesign System
  • Form: Choosing the appropriate visualization, here is where we turn data into visual representations in dashboards. We facilitate the identification of insights, trends, and patterns through carefully selected graphs and their relationship with the dataset. Ensuring information accessibility through the design elements is essential for all user types. You can explore a complete classification of charts by family, function and form in DataViz project by Ferdio.

The outcome: The result is the “artifact” loaded with context, characteristics and details obtained from our process. Through this “artifact”, the end-user will interpret and analyze the data to obtain insights, identify patterns, and make informed decisions. This artifact takes the form of a dashboard, a platform-specific feature, a website, a report, or any visual solution you can imagine. The final product is what matters and this process is always iterative.

Now, I’ll explain how I apply these principles in examples of projects I’ve developed throughout my career.

Example 1: This project consists of visualizing the activity of panelists of an application developed in Tableau. The goal was to create a multi-view dashboard that would allow end-users to explore the data and tell a story using Tableu’s interactive storytelling features and then export and share findings with their stakeholders.
The process begins with the refinement of the data, there were large amounts of data that had to be classified. Meanwhile, you are posing the problem to be solved and then giving rise to the multiple possibilities that data visualization gives you.

My Skills Dashboard with Sample Data in React

Example 2: This project consists of visualizing the performance of the technical and leadership skills of a company’s workers developed in React. The goal was to create a platform that allowed users to explore both their technical and leadership skills, and see their progress through training suggestions over time. Additionally, the end user can analyze the different dimensions of the skills and their levels to compare their performance with other profiles within the company and identify areas for improvement.

If you see the example, you will discover that it uses the traditional process for data visualization, obtaining a result that is quite pleasant and accessible to the end user.

But, what does all of this have to do with AI?

Generative AI Fundamentals and Data Visualization

According to Statista, It’s estimated that by 2025, more than 180 zettabytes of data will be generated worldwide, with 80% of this data being unstructured. To give you an idea, 1 zettabyte is greater than a trillion gigabytes, which is 1 followed by 12 zeros. That’s an immense amount of data, isn’t it?

Data visualization allows us to simplify this data complexity, reduce storage space, and this is where AI comes into play. More than ever, there is a need for resources and experts capable of condensing complex information into the smallest space possible, with the least ink and making it accessible to all.

Data visualization is a powerful with AI because:

  1. Simplify data complexity: Data visualization transforms complex datasets into graphical representations, making it easier for individuals to identify patterns and insights.
  2. Reduce storage space: Visualizations allow for the summarization of information, reducing the need to store and manage massive datasets. This not only saves storage space but also facilitates quicker analysis.
  3. Enhace data visualization: Artificial Intelligence enhances data visualization by automating the analysis and interpretation of data. Integrating machine learning models into visualization tools aids in uncovering hidden patterns and providing real-time insights.
  4. Accessibility: Visualizations make data more accessible to a broader audience (for example for those who are visually impaired), enabling easier understanding for decision-makers, stakeholders, and the general public who may not have a deep understanding of the underlying data.

AI is the new electricity that transforms data within seconds. Users not only see the data but interact with it, engaging in real-time predictive storytelling.

One of the first tools I discovered for generating graphs was ChartGPT. This plugin follows the familiar structure of AI tools, with widgets to input prompts and visualize results. As you train your bot, it becomes more proficient in predicting future data points.

Next, let’s explore the blending proccess of traditional data visualization with Generative AI

Generative AI and Traditional Data Visualization Process

The integration of traditional data visualization with Generative AI processes represents a significant advancement. This process commences with structured data as the raw material, driving AI through prompts using algorithms. The transformation is guided by fundamentals and parameters crucial for training the model for a specific task.

The approach:

  • Data: This is the raw material that kicks off the project. Similar to the traditional approach, the AI collect raw data from various sources to clean and the data, preparing it for input into the generative AI model. Traditional data visualization often relies on structured data for creating meaningful visual representations. But, integrating this structured data with Generative AI processes allows for the exploration and generation of visualizations that go beyond what may be manually designed.
  • Training — Space: Generative AI start with the language model or the neural network which can be driven by prompts and algorithms to create visualizations. The interaction between AI and data visualization often involves the use of AI algorithms to generate or enhance visualizations based on specific queries or patterns identified in the data. Since the model is trained on a data set, it is ready to generate new meaningful visualizations based on user intent.
  • Task— Form: Upon completion of the training phase, the generative AI model achieves the capability to independently produce innovative visualizations in response to user prompts. This autonomous process eliminates the need for explicit manual design by the human user. The resulting visual artifact takes shape based on the task description provided in the prompt. The clarity and specificity of the task description directly influence the model’s ability to process information seamlessly, automating the analysis process and offering data interpretation. With a more detailed prompt, the AI model becomes adept at uncovering intricate patterns and revealing hidden insights that might elude human identification in a traditional manual process.

The outcome: The result is an advanced “artifact” enriched by neural networks, underpinned by continuous learning mechanisms. This design enables the model to not only evolve over time but also make informed decisions while analyzing vast datasets. The AI collaborating seamlessly with the user, it facilitates the creation of visually intelligent, dynamic, and real-time narratives.

Before you start building with AI, make sure the product or feature you have in mind requires AI or could be improved with it. Google provides valuable insights into AI design patterns and offers guidance for thoughtful and responsible AI integration to ensure a rich, personalized user experience.

What is the role of generative ai and data visualization in product design?

The role of Generative AI in digital product design

AI simplifies complex data in seconds, personalizes experiences, and enhances efficiency and productivity. Every user interaction becomes a source of learning for AI models. Nowadays, businesses seek to streamline the user experience and improve their platform performance, all on a large scale. AI plays a crucial role in this pursuit, enabling faster decision-making, process automation, discovery of user behavior patterns, deep understanding of context and user preferences, and real-time personalized user experiences.

Here I explain more about the impact of generative AI and data visualization in the digital product design process:

  • Simplify complex data while you are creating new products: Generative AI algorithms are capable to rapidly learn from user interactions. This proficiency enables them to contribute on processing and analyzing large volumes of complex data, extracting meaningful insights, and presenting them in a simplified manner.
  • Enhance real-time user experience: AI can personalize user experiences by learning from user interactions and tailoring recommendations, content, or services based on individual preferences, emotions and behaviors.
  • Increase efficiency and productivity for automation process: AI facilitates the automation of various processes, reducing manual effort and minimizing errors in repetitive tasks.
  • Personal support by AI learning path and adaptation model: AI models continuously learn from user interactions, adapting and improving over time. This iterative learning process contributes to better performance and increased accuracy in predictions or recommendations.
  • Optimize business process: Businesses aim to streamline user experiences and improve platform performance, and AI is instrumental in achieving these goals by optimizing processes, understanding user behavior, patterns and providing personalized interactions.

In summary, AI is transforming the way of creating intelligent digital products, that is, AI turns all data into valuable assets, revealing knowledge that may have previously gone unnoticed and that is now possible to visualize. Each user interaction, participation, and comment is a goldmine for all business, allowing their own AI models to learn, adapt, and evolve. So, it’s crucial for every product designer to master AI’s fundamentals and capabilities to create user-centric experiences based on behavioural and predictive data.

Now, Let’s analyse this principles into an example from Tableu Pulse:

Example 1: I Take Tableau Pulse, an exemplary analytics feature that leverages the prowess of generic AI in data visualization.
Designed for time-pressed executives, this functionality delivers a simplified view with key highlights, insights and recommendations, driven by user questions and behavior, facilitating quick business decisions.

The role of AI is vital for the design of intelligent digital products and it’s aligns with the broader trend of integrating AI into various digital products to enhance their capabilities, such as generating graphics, creating real-time stories, and expediting decision-making processes. We can start, with An assistant robot generates graphics without problems, creates stories in real time and speeds up decision-making processes. The flow is elegantly simple: as the AI captures each user’s action, the robot transforms into an invisible narrator, weaving new narratives from pixels.

Users are no longer mere spectators; They actively interact with the interface. The bot records each interaction, creating an intelligent and dynamic visual storytelling that adapts and evolves with real-time personalisation.

List of Available AI Tools and Solutions

Find Best AI Tools That Make Your Life Easy!

Working with generative AI experts and reading about the current state of the topic helped me expand my approach to the product design flow. Today I learned to use different AI tools to create intelligent visual solutions, which vary at different stages of the journey and are:

  • Creating new text and image content
  • Discovering trends and gaining insights from data
  • Summarizing for faster decision-making
  • Automating solutions and processes

Conclusions

I think this topic generates multiple discussions, I am not an expert in AI but I am on the path to delving deeper into the fascinating possibilities that arise from the intersection of generative AI and data visualization in the design of digital products. I recognize the unique strengths of both approaches, highlighting that the decision between them depends on factors such as the complexity of the data, the need for human interpretation, the support of a bot to be more efficient and achieve the desired level of automation.

I emphasize the disparities between traditional data visualization and generative AI processes, highlighting the indispensable role of human creativity in the former. While generative AI shows the ability to independently create visualizations based on learned patterns, it falls short of completely replacing human creativity, a distinctive and invaluable element in the design process. As I contemplate the future market, I speculate that analogically generated charts may be considered a unique and expensive asset.

I emphasize that AI, particularly generative AI, is not limited to just creating graphics, art, videos and presentations, but extends far beyond. Generative AI is actively reshaping the data visualization landscape.

The fundamental transformation initiated by generative AI is the shift from static representations to intelligent dynamic narratives in real time The ultimate goal of this combination is not only to improve the aesthetics of the data but to make it understandable, accessible and powerful.

--

--