Abstract
In the age of information explosion, users are exposed to overwhelmingly visual information every day. The raw unprocessed data are not attractive enough to the human brain. Thankfully, humans are extremely sensitive to graphic image perception and can understand the meaning behind numbers from graphic images. For this reason, data visualization is becoming the best way to communicate with people. In the context of big data, how to display complex data efficiently, what kind of drawing technology to use, and how to improve user interaction with data are urgent problems to be solved by data visualization technology. On the other hand, researchers’ understanding of data visualization is not consistent; there is no clear standard; and it is relatively confusing. Researchers engaged in data visualization and executives engaged in related data visualization industries have different interpretations of it, and the core theoretical basis and research methods are still in the exploration stage. Firstly, I systematically introduce the design principles of data visualization, software development related technologies, data visualization research methods, basic charts, and characteristics of data visualization. Secondly, based on the software development process, I analyzed the key issues of data visualization for the e-commerce system, gave the objectives of the design plan, and designed the whole architecture and development framework of the project. In particular, I designed the class diagram and timing diagram of the control layer, service layer, and data access layer for the visualization of user purchase preferences in the data visualization and analysis module as an example. Then, with the structure and characteristics of the data in the visualization studied, the business logic layer and the front-end visualization layer are implemented, and a good user interaction function is provided for the users. The data visualization is loaded asynchronously and on demand to improve the performance of data visualization and user interaction experience. Finally, the system data is presented with the analysis of the user population’s region, the analysis of user preferences, and the analysis of the product price sales relationship, and the product category tree diagram and the results of the data visualization run are given, providing a comprehensive platform for shopping, data analysis, and data visualization for the next generation e-commerce system.
1. Introduction
With the acceleration of the process of social informatization, especially the rapid development of the Internet, e-commerce is a more advanced business model in the rapid emergence and booming trend in China [1–3]. E-commerce transactions through the Internet have become the way of choice for many people. E-commerce, as an emerging shopping experience, is becoming a stable force driving China’s economic growth and has been considered the future direction of the business. In the context of the rapid development of e-commerce, people are paying more and more attention to how data is presented in the form of e-commerce [4].
Human visual perception is the most important information interface, which inputs 70% of the information people get from the outside world. Therefore, the proverbial “a picture is worth a thousand words” and “a hundred hears are better than one sees” tell the importance of visual graphic images. The most effective way to disseminate and distribute complex information to public users is data visualization [5–7] for the purposes of information sharing and argumentation, information collaboration and correction, and important information filtering. Data visualization, as an important discipline in computer science, is a rather young field. Data visualization is a concept that is evolving with people’s visual and aesthetic changes, and its boundaries are expanding. The methodological techniques behind it allow the visual interpretation of data using image processing, user interfaces, animation effects, and so on. The techniques covered by data visualization are much broader than the methods and techniques specific to mathematical modeling. Data visualization is mainly about communicating and conveying information efficiently and clearly with the help of graphical-like means [8]. However, this does not mean that data visualization is dull and boring just because it fulfills its function and purpose. To convey the concept of ideas, functional requirements and aesthetic forms are developed together to visualize and understand sparse and complex data by visually representing key aspects of the features. However, developers do not have a good grasp of the balance between design and requirements and often fail to create the desired form of data visualization to achieve its primary purpose. Nonetheless, there is growing interest in data visualization research.
Significant advances have been made in the past 25 years through extensive basic and applied research. It has become a popular discipline for essential research as problem-solving and knowledge discovery in the Internet era, with applications ranging from computer science to engineering design, biomedicine, cybersecurity, and intelligent transportation [9–11] to social sciences. However, researchers do not have a consistent understanding of data visualization; there is no clear set of standards; and its core theoretical foundations and research methods are still in the exploration stage. In addition, there are not many cases of applying data visualization to the analysis of e-commerce system platforms [12]. In view of this, this paper is to study the implementation of data visualization technology in the context of Tmall apparel e-commerce system.
In order to promote interdisciplinary cooperation and research on cutting-edge technologies, the Tmall apparel e-commerce system is a new e-commerce system in the field of apparel following the virtual fitting technology [13–15]. The system was initially designed to provide students with clothing displays and online sales as one system. With the continuous development of the Tmall apparel e-commerce system project, the study of data visualization technology in the e-commerce system will draw on the development of the platform and promote efficient data visualization technology to keep up with the times.
This paper takes Tmall apparel e-commerce system as the research background and describes in detail the whole process of data visualization presentation in an e-commerce system from software development to data visualization design and technology implementation in the e-commerce system, which is a cutting-edge topic for data visualization research in the e-commerce system.
2. Data Visualization Design Principles
2.1. View Selection and Interaction Design
In general, a successful visualization product needs to start with a view design that is widely recognized and familiar to users. In addition, the visualization system must provide a range of interactive tools that allow the user to modify the presentation of the view in a way that is satisfactory to him or her. For simple data, a basic visualization view can be used to present all the information about the data; for complex data, multiple views need to be visualized, and even new views need to be invented for this purpose, in order to effectively present the information contained in the data [16]. Whether the visualization is designed using one view or multiple views, each view must be simply named using a simple and effective approach. Figure 1 illustrates the relationship curve between product research data and the popularity of visualization technology under different e-commerce platforms. As seen from the graph, Meituan and Jingdong first increase and then decrease, while Tuniu first decreases and then gradually increases, and finally, the three e-commerce platforms converge eventually.
2.2. Information Density
Having determined the mapping of data visualization elements and the design of views and interactions, another key challenge for data visualization design is that the designer must decide on the amount of information to be included in the visualization view [17–19]. A good visualization should show the right amount of information, not more information, and a failed visualization is by definition a visualization that shows too little or too much information about the data in two extremes.
The first extreme is that the visualization shows too little information about the data. In practice, many data contain only two or three values of different attributes, which is not enough for the user to understand the real content of the data visualization. In short, data visualization is needed as a tool to assist the user in perceiving and understanding the data, and too little information in the data visualization can hinder the user’s perception and understanding of the data.
The second extreme is where the designer is trying to convey more information. Including too much information can greatly increase the visual complexity of the visualization and can also confuse the data visualization results, creating the disadvantage of being difficult for the user to understand, hiding important information, or even making it impossible for the user themselves to know which part to focus on.
3. Data Visualization Research Methods
Researchers have invented and practiced many visualization techniques and methods, but visualization is still a relatively young field of study. There is a basic understanding and concept of visualization elements, such as graphics and coding [20]. But, for a discipline, visualization is still in a developmental stage. Researchers are constantly exploring and developing visualization theories and views to build different models for the regular description of visualizations. This section lists a range of representative works.
3.1. Graphical Semiotic Methods
In 1967, Bertin published his book Graphical Semiotics. Bertin used semiotic ideas to describe visual graphics, proposed principles for the visual encoding of information, and defined two-dimensional graphic images and their process of representing information in a rigorous way. He strictly distinguished between graphic image systems as content and carrier [21]. The content refers to the information and data to be expressed, and the carrier is the graphic symbol. In this framework, graphic image visualization consists of graphic symbols that transmit different information. The graphic symbols can be points, lines, and surfaces. The definition of a graphic image system is therefore based on the definition and understanding of the different properties of graphic image symbols. Graphic symbols are described by visual variables, including position variables and retinal variables. The position variable defines the position of the graphic on a two-dimensional plane. Retinal variables include size, value, texture, colour, orientation, and shape, and a rose chart of the popularity of different clothing categories on the two major e-commerce platforms is shown in Figure 2.
In the framework of Bertin’s graphic image system, data visualization consists of drawing points, lines, or surfaces on a two-dimensional plane. These basic elements can then be combined into more advanced forms of visualization, which can be extended, for example, into graphs, networks, maps, and symbols. Based on these combinations, retinal variables can be generated for various types of graphics. On this basis, retinal variables can express different levels of the organization, and there is correlation, selectivity, order, and quantification between the variables.
3.2. Approach to Relational Data
In 1986, Mackinlay proposed a technique for automatically extracting information from databases and displaying it as a graphical image. Similar to Bertin’s theory, this visualization technique uses two-dimensional static representations such as network diagrams, maps, scatter plots, discounted graphs, and so on. The difference is that the Mackinlay view describes and defines the visual representation in a graphical language [22], where O represents a set of graphical objects and L represents positions. Each tuple represents a graphical object at a specific location. In this way, the graphical language can be defined as a collection of graphical sentences.
Based on Cleveland and McGill’s perceptual experiments, Mackinlay proposes that a graphical image language needs to satisfy expressions as well as validity, where expressiveness means that the graphical language must be able to express the information that is required to be displayed and validity means that for a given corresponding situation, the graphical image language must effectively use and display the medium and the human visual system.
Mackinlay proposes a set of basic graphical languages and combinatorial operators on top of which more advanced graphical representations can be constructed by operations. Based on Bertin’s theory, Mackinlay proposes a new graphical vocabulary and a primitive language of basis groups. Three principles for merging two graphical sentences expressing the same information are also defined. In order to explain Meituan and Jingdong sales in different areas, a columnar comparison of the sales volume of different e-commerce platforms in different regions is shown in Figure 3, and its analytical formula is given by (2). Two-way merge means merged graphical sentences with the same horizontal and vertical axes; single-axis merge means aligning graphical sentences with the same horizontal or vertical axes; and graphical merge means aligning graphs in graphical sentences.
3.3. Methods Based on Data Type Studies
Shneiderman examines the process of information visualization in terms of data types and classifies data into seven categories as follows:(1)One-dimensional: One-dimensional data are generally data consisting of text or letters, such as program source code, text files, article structures, and so on. The data is formed in some sort of sequence, where each item is a line of text containing a string and may have some other attributes attached, such as time, author information, and other information. The data visualization is designed to focus on the text, choosing the font, colour, size, and display method. The user requirements are generally to search for text or data items and related attributes.(2)Two-dimensional: Two-dimensional data are mainly some basic chart or map data, such as geographical maps, bar charts, line graphs, and so on. Each item in the data set corresponds to some region on a two-dimensional plane, which may be a regular or irregular shape. Each area has a variety of attributes attached to it, such as name, owner, value, and so on, as well as some other characteristics such as size, colour, transparency, and so on. User requirements are generally to search for a certain area, paths, zoom in or out of the map, query certain attribute values, and so on.(3)Three-dimensional: Three-dimensional data refer to objects in three-dimensional space, such as molecules, the human body, and buildings. The data set mainly contains relationships between three-dimensional objects and the data between objects, such as three-dimensional models produced by computer-aided design systems. The user requirements are primarily to understand the properties of objects and the relationships between objects [23]. Unlike low-latitude data, objects include three-dimensional information such as position and orientation, and displaying these objects requires the use of different perspective methods, setting parameters such as colour and transparency.(4)Time: Time data is widely available for different applications, such as medical records, project management, or historical presentations. Each item in the data set contains time information such as start time and end time. The potential need for users is to search for events that occurred before, after, or during certain times or moments, as well as the corresponding information and attributes.(5)Multidimensional: Each data item in multidimensional data visualization has more than two attributes, and it can be represented as a point in an n-dimensional spatial vector. This type of data is commonly found in traditional relational or statistical database applications. User requirements can be implemented by looking for features, clusters, correlations between variables, gaps, and outliers. The visualization design can be based on a two-dimensional scatter plot. Multi-dimensional data can also be represented by a three-dimensional scatter plot, but this can cause problems such as information blocking.(6)Trees: Trees represent hierarchical relationships. In a number structure, each item of data can be linked to another parent item. Each data item, and the connections between parent and child items, can have multiple attributes. Based on these data items and the connections between them, different analysis tasks can be defined, such as the number of levels of the statistical tree and the number of children of each data item. Text semantic feature word extraction reflecting visualization under an e-commerce platform is shown in Figure 4. As seen from the graph, there is some variation in the degree of impact of different visualization research methods, but overall, the visualization techniques are gradually becoming more popular and widespread on e-commerce platforms.(7)Network: It represents the association or connection relationship, which is related to the data structure. The data item and connection relationship in the network can have multiple attribute components and define some basic meanings. It is similar to tree structure data. The data connection relationship can have multiple attributes and will be regarded as some basic meanings. Connection matrices and node connection diagrams in data structures are common basic forms of network information visualization.
4. Data Visualization Design Solutions
4.1. Data Visualization Objectives
(1)The data visualization interface should be unique, in terms of colour and tone to attract the eyes of users browsing the web page, and the whole page should be made relatively fine and rich in information but not redundant and at the same time highlight the characteristics of the system theme [24] (e.g., the system’s data visualization analysis of user behaviour characteristics, etc.).(2)The system functions are extensive and user-friendly; the layout of the visualization interface should be as reasonable and operable as possible, avoiding objectionable, complex and redundant information as far as possible, and enhancing the interaction between the user and the visualization interface.(3)The system running equipment can ensure that it meets the needs of multiple people online at the same time, the visualization interface opening and browser rendering time should be as short as possible, and the user should operate the data visualization system as smoothly as possible to enhance the user’s feelings in terms of interaction.(4)For the average user, the visualization of the displayed product information should be simple and aesthetically pleasing to the user, the product images should not be too blurred or distorted, and at the same time, the magnification and panoramic display of the product should be made, with clear pixels, focusing on the beauty of the visualization interface of the e-commerce system; for the administrator, the visual analysis of users, product sales, product profitability, and product forecasting behaviour must be accurate and in real time.(5)The system needs to provide a visual interface with a detailed introduction to the operational process, from data aggregation to query analysis, and the links between the various steps should ideally be illustrated with diagrams.(6)The data visualization module should have the ability to monitor the operation of the whole system and to make appropriate monitoring of any unreasonable data generated and at the same time make a real-time record of the operation of the system. The data visualization pipeline model is shown in Figure 5.
4.2. Functional Requirements
The overall functions of the data visualization module of the Tmall apparel e-commerce system are shown below. Data visualization pipeline model shown as Figure 5.
4.2.1. Overview of the Business Big Picture
The business overview is mainly to analyze the whole system operation, giving a visual chart of the overall sales volume and overall profitability of the system [25–27]. You can also view the operation of the entire Tmall apparel e-commerce system in the past month or three months. Each merchant provides statistics on the corresponding contribution to the platform.
4.2.2. Overview of Each Merchant’s Operations
Administrators can query the operations of individual merchants on the platform and compare the operations of merchants with similar businesses in aggregate.
4.2.3. User Analysis Module
The administrator can use the user analysis module to determine the proportion of men and women, age levels, and the proportion of geographical areas in the Tmall apparel e-commerce system.
4.2.4. Product Price and Sales Volume Analysis Module
Ordinary users only have the right to read the inventory of the products but not the right to modify the inventory quantity accordingly [28]. When a normal user confirms the success of an order submitted, the stock of the corresponding product in the database is subtracted from the quantity of the order, and if the normal user returns the corresponding product, the database of the corresponding product stock performs the operation of increasing the corresponding quantity.
4.2.5. Hot Product Ranking
The administrator can view the order of the corresponding products in the hot-selling ranking for the last week, the last month, and the last year. It is also possible to link to specific products in the specified Tmall apparel e-commerce system according to the corresponding products.
4.2.6. Personalization Module
For normal users, the user can input relevant information and get the highest matching products from the database. For administrators, you can view the visual ranking interface of specific products that have been customized by users in the last week, month, and year. It is also possible to view the proportion of users buying various types of products in that category based on dimensions such as collar type, sleeve type, style, size, and material. Figure 6 shows the statistical data distribution of different e-commerce platforms in terms of data information volume, product sales, and user experience.
4.2.7. Data Visualization and Analysis Module
It first deals with the parts of the major modules mentioned above where data analysis processing needs to be done. Its purpose is to detect the operation of the mall and to display a module for statistical analysis of orders, user identities, and other relevant information flowing into the Tmall apparel e-commerce system website. The operation status of the platform includes the overall operation inspected by merchants, the profitability of individual products of merchants, and the profitability of the platform.
4.3. Nonfunctional Requirements
4.3.1. Rich User Interaction
The essence of user interaction is to make the data visualization “live.” After displaying the data visualization chart, the data visualization is transformed into a dynamic graphic, combined with the specific needs of the merchant so that the merchant can manipulate their own data [29–31]. In the process of manipulating the data visualization, the merchant can learn about the breadth of the data visualization and the rationality of the design and better intuitively perceive the changes brought about by the data indicators, enhancing the user interaction experience. The data visualization design in this paper implements a variety of user interaction operations and corresponding animation techniques, including dynamic click-to-zoom, dynamic data update, and mouse hover prompts for the visualization. Through these interactive operations on the data visualization, the usability of the data visualization project of the Tmall apparel e-commerce system is improved. A comparison of visualization technology research between Tmall and Jigndong is shown in Figure 7. The graph shows that Tmall has an advantage over Jingdong’s e-commerce platform in terms of popularity and breadth of application of visualization technology.
4.3.2. Browser Compatibility Requirements
The data visualization display and interaction platform of this solution is a browser. At present, there are many types of mainstream browsers commonly used by users, including Internet Explorer, Google Chrome, Firefox, Apple Chrome, and their various versions [32]. The different kernels developed by different browser manufacturers lead to differences in their rendering behaviour, which can also have an impact on code parsing and rendering as well as on the specific behaviour of scripts, resulting in compatibility issues between browsers. Compatibility with events is an issue in data visualization.
4.3.3. Adaptive Requirements
Adaptive means that blocks of visualization graphics can be laid out as the size of the browser window changes. The case of browser-based visualization is more complex. Browsers and windows vary in size, and even if the browser windows are the same size, they may not have the same viewing area. However, the adaptive nature of data visualization can greatly enhance the user experience.
4.3.4. Performance Requirements
It is mainly a matter of adjusting the structure of the code or applying a pattern that can improve the speed of browser rendering, thus improving the performance of the design solution.
5. Data Visualization Technology Selection
There are many important issues in the design of the data visualization system, such as whether to choose asynchronous or synchronous communication between the server and the client and whether to choose XML or JSON format for the exchanged data and the choice of the data visualization drawing library, all of which will directly affect the effectiveness of the data visualization display. The data visualization module of the Tmall apparel e-commerce system uses Ajax asynchronous communication for front- and back-end interaction, JSON data format for data transfer, and ECharts library for visualization charting.
5.1. How Does the Client Interact with the Server?
In the Tmall apparel e-commerce system data visualization scheme, data information in the data visualization system can be displayed through data interaction, thus solving the problem of data display from static to dynamic visualization. Figure 8 illustrates a histogram comparison of sales of global e-commerce platforms in different years and seasons. If the corresponding data can be obtained from the server on demand in an effective and timely manner during the design process of data visualization, then the responsive and dynamic nature of the data visualization interface can be achieved in order to achieve the display of various gorgeous effects of data visualization. The process of interaction involves orderly communication between the server and the browser. Common forms of web communication are Ajax submissions and form submissions.
Form submission is a way for the browser to interact with the server. It is a traditional means of interacting with data on the web. It can be submitted as a POST or GET method, by clicking a button, or as a submit type, which triggers an action method that sends data to the server, thus redirecting the corresponding request page. Traditional form submissions are submitted to the server as a whole form. Characters, files, images, and so on can be transferred.
Ajax is part of native JavaScript as a whole, which interacts with data on the client browser and the web server by transferring data asynchronously. It allows for on-demand requests for data from the server, which can be refreshed partially rather than on the whole page. It also allows the browser to send a request to the server via the JavaScript scripting language, allowing the user to perform other triggered actions without having to wait for the server to finish processing the request and without blocking other user actions. The key technology is to establish the request connection with the server by calling the open and send methods of the XMLHttpRequest object. The corresponding processing method of XMLHttpRequest is generally based on the status of the HTTP request, and when the status returned by HTTP is 200, the correct interaction is done. At the same time, the HTML page is partially refreshed according to the data information returned by the server, instead of getting the whole page.
In summary, the web communication method shows that Ajax, as native JavaScript for asynchronous communication, is highly efficient in data visualization interactions because it does not block the user’s actions; it does not require additional applets or plug-ins to be installed on the browser side; in addition, it is supported by almost all clients; and most importantly, Ajax is the most important method for asynchronous communication. The most important advantage of Ajax asynchronous communication requests is that it minimizes redundant requests from the user and thus does not place a heavy burden on the server, and its partial refresh capability gives the user a great user experience during data visualization interactions. Figure 9 shows the text mining steps under the e-commerce platform.
5.2. Data Transmission Format
In web development, the main formats for transferring data between client and server are XML and JSON, which are measured in terms of readability, scalability, difficulty of encoding, difficulty of decoding, and application scenarios.
In terms of readability, JSON has a simple syntax, while XML has a standardized tag form. In terms of extensibility, XML provides a structured way of describing data that can be customized. However, JSON has an advantage over XML in that it is generally used in JavaScript and can store composite objects of JavaScript. In terms of encoding, XML and JSON have different encoding tools, but when describing the same data, JSON takes up less space than XML, has less redundancy, and is clearer and more concise. In terms of readability, XML is more human-readable and closer to human language, while JSON is more machine-readable, but there are now a large number of tools for reading JSON data. In summary, JSON is more appropriate for describing visual data sets. The mathematical derivation is given bywhere S represents store composite objects at any point in time, a represents the e-commerce platform factor, and b and B represent data traffic and total data traffic, respectively.
5.3. Data Visualization Library
ECharts'’ massively rich charts demonstrate the pixel handling capabilities of the Canvas data visualization drawing element and address the bottleneck of web front-end visualization technology. This is perhaps at the limit of the rendering capabilities of existing web client browsers, and the display performance is the same as displaying a single image. If you put aside the pixel processing power, rendering a normal graphic would require the browser to create 100,000 svg DOM structures, which is a lot of work, whereas rendering 100,000 circles with Canvas takes only about 500 ms. And it provides powerful rotation, translation, and animation capabilities that are converted to matrix operations to solve the problem. The performance issues of repeated rendering are optimized using a layered refresh technique. Communication and collaboration between visual charts and Canvas controls are carried out using message centres. Echart’s natural advantage is that it was chosen as the tool for the corresponding charting library for the data visualization library.
6. Conclusion
Through four months of design and implementation, the Tmall apparel e-commerce system was successfully completed according to plan, from infrastructure construction, system analysis, design, coding and testing, to system management. The research on data visualization techniques in e-commerce systems in this paper is summarized as follows.
The first step introduces the research background and significance of the topic, the current state of applied research at home and abroad, and the purpose of the research and summarizes the main structural organization of the paper.
The second step starts with a systematic analysis of the knowledge related to data visualization, from the design principles of data visualization, research methods of data visualization, basic diagrams and features of data visualization, to the introduction of software development related technologies. This includes an introduction to software-development-related technologies, including Canvas drawing, JSON formatting, and Spring MVC data-visualization-related libraries.
The third step is to analyze the requirements of the data visualization project. Firstly, the design objectives of the Tmall apparel project and visualization are determined; then the architecture design, general design, and database design of the whole software system are introduced; and finally, the data analysis module is analyzed for detailed design, including the Controller layer, Service layer and DAO layer, and the timing diagram for user purchase preference analysis is designed.
The fourth step is based on the Tmall apparel e-commerce system and describes the whole process of data visualization development for the Tmall apparel e-commerce system. It involves data visualization interaction, data visualization techniques, data visualization mapping, and data visualization implementation patterns. Data visualization interface display and data visualization display and analysis of system data are carried out through the esl.js asynchronous on-demand loading model.
The fifth step introduces the results of the visualization run on the Tmall apparel e-commerce system, followed by a display and analysis of the existing data on the distribution of users in the system, brand classification, the relationship between price and sales of dual products, and the proportion of user preferences.
After the above steps, the development of the whole project was completed, and the data visualization is currently in a trial run and is actually working properly.
Data Availability
The data used to support the findings of this study are available from the corresponding author upon request.
Conflicts of Interest
The author declares that there are no known conflicts of interest or personal relationships that could have appeared to influence the work reported in this paper.