news

Visualizing Industry through Graphics: Python, JavaScript, and R

Data visualization is a vital domain for a range of applications, from analytics and data science in manufacturing environments to presenting information on web dashboards. Different programming languages provide robust ecosystems for building visualizations, each with its own particularities.

Python is one of the most popular languages for data analysis and, consequently, has a broad spectrum of visualization libraries. The most well-known are Matplotlib, Seaborn, and Plotly, which support the creation of everything from static, simple charts to interactive and sophisticated visualizations:

  • Matplotlib is used when full control over graphic elements and the production of high-quality static charts is required, such as those needed in scientific publications;
  • For exploratory data analysis, Seaborn offers a high-level abstraction that simplifies the creation of complex and visually appealing statistical graphics with less code;
  • Plotly is the preferred option when interactivity is essential, making it ideal for constructing dashboards and web-based applications.

In the automotive industry, for example, maintaining process stability on assembly lines is critical to ensuring quality and reducing costs. An X-bar control chart, built with the Matplotlib library, is a classic tool for monitoring average cycle times across production batches:

Copyright: ST-One

With the Seaborn library, it’s possible to understand the variation in cycle times between different stations and models, identify bottlenecks, and optimize processes. This type of visualization can display statistics that reveal hidden patterns within the data:

Copyright: ST-One

To monitor real-time metrics such as OEE (Overall Equipment Effectiveness), interactivity is a key differentiator. With Plotly, it’s possible to create dynamic charts that enable zooming, filtering, and detailed inspection of individual data points:

Copyright: ST-One

Data Scientist Flávia Gaia highlights in her article the importance of visualization for data analysis: “[…] Data visualization is a crucial part of data analysis. It enables us to comprehend complexities and patterns within the data.” The author also notes that “the choice of library depends on the specific requirements of your project and your personal preferences.”

Real Time Visualizations with Chart.js and D3.js

While libraries such as Matplotlib, Seaborn, and Plotly play a central role in the data visualization landscape for Python, especially in scientific and analytical environments, front-end development also benefits from equally versatile tools.

Among these, Chart.js and D3.js stand out as two widely adopted JavaScript libraries for building interactive visualizations directly in web browsers. Both offer robust solutions for presenting data visually, but with distinct approaches in terms of complexity, flexibility, and granular control over graphical elements.

Chart.js is an open-source, high-level JavaScript library designed for generating interactive and responsive charts using the HTML5 element. Its main advantage lies in its ease of use:

  • Few lines of code required;
  • Supports a variety of chart types (line, bar, pie, radar, mixed, among others);
  • Ideal for use in dashboards, interactive reports, and quick, functional data visualizations.

Consider, for example, an automotive manufacturing environment where monitoring the defect rate per minute is critical to prevent issues from escalating. By leveraging Chart.js on the front-end, it is possible to render responsive charts that update in real time as new data streams in:

Copyright: ST-One

On the other hand, D3.js is a low-level library that empowers users to build highly customized and complex visualizations. Instead of providing ready-made components, it offers a suite of tools for data-driven manipulation of the DOM, utilizing SVG, Canvas, or HTML elements. Its main features include:

  • Full control over every aspect of the visualization (element positioning and shapes);
  • Powerful utilities for mapping data to visual coordinates;
  • Support for unconventional layouts, such as hierarchical trees, force-directed diagrams, and heatmaps.

To analyze downtime distribution across workstations on an automotive assembly line, a stacked bar chart created with D3.js can be employed. This visualization displays downtime minutes per station (S1 through S5), segmented by root causes such as setup and failure, enabling rapid identification of stations with the highest accumulated idle time and revealing the primary contributing factor to each total:

Copyright: ST-One

The Visual Architecture of Data with ggplot2

Just as libraries like Chart.js and D3.js provide robust solutions for interactive front-end visualizations, the R language also offers comprehensive tools tailored for statistical data visualization. Among these tools, the ggplot2 package stands out as a leading choice widely adopted by data scientists for creating informative and aesthetically refined charts.

Unlike the imperative approach of JavaScript libraries, ggplot2 employs a declarative structure based on the Grammar of Graphics. This package enables the construction of complex visualizations from simple building blocks in a structured, highly customizable, and reusable manner. Its main features include:

  • Basic and advanced visualizations: visual elements such as points (geom_point), lines (geom_line), bars (geom_bar), and boxplots (geom_boxplot);
  • Aesthetic mappings: define how data variables are translated into visual properties, such as color, size, shape, and position;
  • Faceting: allows you to split plots into multiple panels based on categorical variables, facilitating visual comparisons;
  • Statistical layers: such as geom_smooth() for adding trend lines or stat_summary() for highlighting statistical measures;
  • Themes and customization: with functions like theme_minimal() or theme_classic(), you can tailor the appearance of charts to suit different presentation contexts.

To assess the consistency of assembly processes in the automotive industry, a statistical visualization with ggplot2 can be used to display the distribution of tightening torque by station (S1 to S5) and by model (M1 to M3). This approach makes it easier to identify stations or models exhibiting higher variability, providing actionable insights for process control adjustments and ensuring both product safety and reliability:

Copyright: ST-One

Each technology has its own particularities, and the choice of the ideal tool depends on the visualization objective, the application context, and the professional’s preferences. In sectors such as automotive manufacturing, where process stability, quality, and efficiency are critical, data visualization becomes a strategic resource for monitoring, understanding, and optimizing operations.

Discover the Data Circle Space, a hub for those exploring innovative solutions at the intersection of data, programming, and industrial processes.

Learn more about ST-One.

Data Circle

Transforme conhecimento em impacto

Este espaço é seu: envie artigos, estudos de caso, trabalhos técnicos ou vivências que contribuam para o avanço da ciência de dados na manufatura.

Compartilhar conhecimento é o primeiro passo para transformar a indústria.

ST-One Logotipo

Baixe aqui o material completo e descubra como a ST-One já impactou positivamente parceiros em mais de 23 países.