Shulou(Shulou.com)06/03 Report--

The Singles' Day is just around the corner. Do you, who are still doing the data visualization interface, also want to chop your hands? You who complain that it is too difficult to build data icons, and you who have not come into contact with data visualization applications and want to have a perfect visual interface, hurry up and grasp this lifesaver!

Ma Liang, a visual artifact released by DataV

Concept: "Ma Liang" is an intelligent recognition design product embedded in DataV, which can quickly learn and recognize hand-drawn sketches, information charts, large screen screenshots and other materials, and automatically generate configurable visualization applications in DataV. In other words, the emergence of Ma Liang can compress the painful front-end process of restoring chart design draft in the process of building data visualization applications into seconds!

First of all, let's take a look at Ma Liang's three good student awards.

"Mom, this is amazing." he screamed the marmot regardless of the image.

What are the techniques that won Ma Liang the award?

Chart recognition

The object recognition model which can identify the position and type of chart is trained through the data of DataV, which is the first time that the object recognition model has been applied to the field of data chart. At the same time, Ma Liang can not only identify the type and location of the chart, but also extract the color of the visual interface. Design specifications such as Grid Design are also used to avoid layout errors caused by recognition.

Color recognition

Ma Liang will extract colors from the original image and apply them after optimization. The text color that makes the contrast with the background color reach 7:1 is calculated according to the WCAG contrast standard. Then filter the extracted color, remove the background color similarity and text color similarity, and then cluster the remaining colors to get the main color. Finally, the swatch generation scheme is used to generate the swatch and apply it to the large screen.

Text and font recognition

Ma Liang can support the recognition of text and fonts, and restore the recognized text and fonts to the generation visualization. In font recognition, we use ResNet-18 as the recognition model. Thus, it is possible to recognize fonts in case visualization, such as serif and sans serif, etc. At the same time, traditional schemes such as OCR are used to recognize characters.

Ma Liang's process of generating DataV big screen

The first step is to map the chart types identified by Ma Liang to the component types in DataV, and at the same time, combined with the location of the chart, use the default chart style configuration and data configuration to generate a large screen basic configuration in "JSON" format.

The second step is to use the color information identified by Ma Liang as the theme color matching of the large screen, modify the color configuration related to the large screen (such as background color and text color), and traverse each component of the large screen, applying the current theme color matching.

The third step is to modify the font, font size and other style configuration of the text component according to the recognized text information, and use the recognized text content as the data of the text component.

In the fourth step, we use the large screen generation interface provided by DataV to import the final large screen configuration into DataV products to generate an interactive visual large screen, on which users can continue to optimize and complete the final data visualization.

In order to highlight how good Ma Liang is, I decided to show you the process comparison.

Compared with the traditional process, Ma Liang greatly reduces the traditional design process, the new process supports prototype design and front-end restoration through pictures, and also supports subsequent design fine-tuning.

Finally, let's take a look at how Ma Liang uses it.

Case 1: when you have already made a hand-drawn sketch on the paper, but want to see the visual screen immediately, you can wait for Ma Liang to recognize it automatically.

At the moment when such a simple and abstract picture changes into a chart, is there a cry of "wow"?

Case 2: when you have wonderful ideas and don't even bother to draw pictures, you can find some graphic design works, screenshots, and design drafts for reference, upload them to Ma Liang, and then quietly wait for Ma Liang to recognize them automatically.

The picture can be accurately identified, which simply liberates the hands of the designer!

Do you want to give it a try? it's better to take action than to do it. Come to DataV and turn into Ma Liang!

This feature has been launched in the enterprise and professional editions. Click on the link to experience it.

Link: https://data.aliyun.com/visual/datav

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.