DataV is a real-time data visualization service provided by Alibaba Cloud, which helps to quickly transform data into visual graphics. It can connect to multiple data sources and has the capability to automatically update data, enabling the presentation of multi-layered dashboards with real-time data visualization.

DataV supports various types of data sources, including static data, CSV files, APIs, databases, Alibaba API Gateway, TableStore, OpenAPI, OSS, and more. Assuming the data source is explained using a database, as shown in the diagram below, when users input any data through the web page (frontend), such as member information or purchase details, this data is transmitted to the backend database for storage.

With DataV's ability to connect to databases and set fixed-time automatic data updates, every piece of data entered by users can be continuously updated to DataV through fixed requests, allowing for real-time visualization of the data.

(製圖者:Annie)
 

接下來的操作將分為四個部份來進行：

(製圖者:Annie)

Data Preparation:

Data Source: This refers to the data you want to present, which has been cleaned and prepared. This stage is crucial because effective data visualization relies on clean data.

Import Method: Once you have the data, you need to consider how to import it into DataV. It's important to note that directly importing CSV files into DataV has a maximum limit of 512KB. It's recommended to upload the file to a database first to avoid file size limitations. For this implementation, we'll use a CSV file as the data source and store the data in Alibaba Cloud's Cloud Database RDS, specifically MySQL.

Data Reading in DataV: After creating the database and uploading the data, the next step is to add the data in the DataV interface. This allows the database's data to be linked with DataV for visualization.

Let's start with the first step:

• Data Source: For this example, we'll use a CSV dataset related to COVID-19.
• Data Import to Database:

2.1.Create a MySQL database instance

Log in to the Alibaba Cloud platform and navigate to the Cloud Database RDS.

Creating a database instance allows you to select the required specifications according to your needs.

Comfirm

2.2. Create Database Account and Password

After creating the database instance, you need to create users, establish databases, and create tables. Here we will create both a high-privilege account and a regular account. Go to the Alibaba Cloud RDS page, select the region for creating the database, and click on the database instance you just created in the instance list.

High-Privilege Account: As shown in the figure, click on "Account Management" and then "Create Account".
Set the "Database Account" and "Password" according to your preferences. These will be the credentials used to log in to the database in the future.

Regular Account: As shown in the figure, click on "Account Management" and then "Create Account".

2.3 Create Database

Click on "Database Management" and then "Create Database".

Choose a name for the "Database Name" field. For the "Authorized Account", select the account that has been created and will be used to access and operate the database.

2.4 Create Data Table

Now you can log in to the database and create a data table!
To log in to the database:

• Go to "Database Management" on the left side menu.
• Click on "Log in to Database".

Enter info

After logging in, you will be directed to the Data Management Service (DMS) page.

On the left side, click on "Database" and then click on "Start Building Tables".

You can choose a name for the data table.

After adding the "Basic Information", proceed to add "Column Information". Since you will be importing data next, the creation of "Column Information" (as shown in the figure below) needs to reference the fields in the imported data table. 

Once the column information is added, you can also create indexes to help with quick searches of fields.

Here, set "Country" and "Data_reported" as indexes, and after completing the setup, remember to save the changes.

 

2.5 Importing Data

To import data into the data table:

 Right-click on the data table, then click on "Import".

Enter the name of the created table under "Target Table", and select the "Upload File" option.

 Proceed to "Execute Changes"

and confirm the execution.

After completing the import process, return to the DMS page. You can then input SQL queries to retrieve data. If results are displayed, it indicates that the data has been successfully imported.

 

2.6 Database Connection Setup

To establish a database connection, you need to apply for an external network address.

1. Go back to the RDS page and click on "Basic Information".
2. Under "Exclusive Network", click on "View Connection Details".
3. Then, click on "Apply for External Network Address".

 

Copy the external network address of the database for later use.

3. DataV Add Data

 

Go to the DataV page, click on "My Data,"and then select"Add Data."

Enter the following information:

• Domain: Paste the database's external network address.
• Username: Enter the database username and password.
• Database: Select the database you want to import.

 

Once done, if you see the confirmation message, it means the creation is successful.

That completes the first stage!

Now let's create my visualization.

The platform offers several templates to choose from. Clicking "Create Project" on any template will suffice. Alternatively, you can add a new blank canvas for customization.

Upon entering the DataV operating page, you will see four main functions: Layers, Component List, Right Panel, and Toolbar. You can bring up the corresponding function by clicking the button on the top left, and click again to collapse it.

Layers:

Function: All components used (such as images, text) will be listed in this panel. Clicking on any component will display it on the canvas.

Component List: This section lists all available components. You can quickly search for components by clicking on the category column on the left side, then clicking on the object you want to add, which will appear on the canvas.

 

【Right Panel】

Toolbar:

This toolbar allows you to configure filters for layers, enabling fine adjustments to color.

 

 

Data Source Settings:

• Add Object: Adds a new object to the canvas.
• Click Object: Selects an object.
• Open Right Panel: Opens the right panel.
• Click Object: Selects the object.
• Right Panel: Click "Data" in the right panel.
• Configure Data Source: Configures the data source.

 

Set up data source, select data source type as "Database," choose an existing data source, and use SQL to extract data only for "United States of America" from the dataset.

Click on the icon for "Data Response Results" to display the retrieved data.

Enter the X and Y axes for the chart:

X: Date_reported Y: Cumulative_cases

After inputting this information, the chart will be populated with data and display the results. Additionally, the "Data Response Results" will also show the mapped results.

Clicking on "Configure" in the "Right Panel" allows you to adjust the font size and color settings within the chart.

 

Publishing Dashboard

Once your DataV project is completed, you can click on "Publish" to share it.

 

After clicking "Publish," you will receive a link for sharing your published DataV project. You can access the published project through this link. If you want to restrict access, you can set a password in the "Access Restrictions" section.

Once the setup is complete, entering the link will require entering the password.

Additionally, you can adjust the display mode from the page settings. Here, select "Full Screen."

And that's it! You have completed the design of your DataV project!

 

Conclusion:

From setting up the database, importing data, connection settings, configuring data values, to navigating the feature toolbar, these are just the basics of DataV. In fact, DataV offers even more powerful visual presentation effects, including 3D animation. In the future, if you have visual presentation needs, consider using Alibaba Cloud's DataV to give your data a higher level of visual representation.

---