You must master the visual large screen development mode

When number is invisible, it is less intuitive; when shape is innumerable, it is difficult to be subtle. – hua luogeng

We all try to observe life, but sometimes summarize life is missing; Sometimes we get so caught up in the details that we lose sight of the big picture. Data and visualization seem to be brothers, like stargazing and being grounded.

Knowledge framework for visual development

Visual purpose

The data source

1. Long-term accumulated data of customer system;
2. Customer system equipment generates data in real time;
3. Import data from outside;
4. Relevant data prepared for the project presentation

Data is the first step in visualization, and here we talk about data processing.

Users use software, browse the web, APP will continuously generate a variety of data. If we allow the growth of data without use, it is a waste of things, but even if we have the consciousness of using data, but also can not necessarily play the value of data, so data analysis is the first step to make data play value. The consequences of a complex business user data between different products is isolated, we call it “data island”, lets the data with the first step is to connect the island, the messy data classified as assets, and are faced with the problem here is the source of the data is too much, we must make adaptive processing for multiple data sources, offline data by default is a magic weapon for processing, Establish the label system, generate and process data according to different business latitude, and finally support the business through visual means, label system and trained model. At the same time, the business in turn provides a continuous flow of data, forming a closed loop.

We can perceive that visualization is the applied upper layer of data processing. As for the processing of data, in fact, the bottom layer is very complicated, from __ data collection __ to __ data storage __ to __ data processing __ into data assets, and then use data assets to expand the upper application, visualization is one of them.

purpose

1. Visualization makes data more intuitive and makes it easier for users to perceive
2. Large screen content helps users make business decisions

Value to different users

1. User: more maneuverability and better interactivity
2. Inspection leader: more practical and reliable
3. Visitor: It is more beautiful and interesting

The design philosophy

The font

Of course, if there is a customized font, you can choose the customized font. The relevant font size of data information is generally above 14px, so that it is more clear when viewing on a large screen.

The color

1. Dark color: light color screen projection is more stimulating to the vision, not conducive to long-term viewing, and dark color is more scientific and technological sense, more aesthetic value; Dark colors are more compact and focus the visual focus. Combined with dark colors, they are softer, comfortable and not dazzling.
2. Design consistency: keep the same style and color between modules. If the content needs to be highlighted, the contrast can be improved or the color system can be extended.
3. Background: The background can be appropriately used gradient, starry sky, stripes, gradient lines, embellishment and other effects

Layout method

1. Sense of wholeness: Try to make components as high as possible in the same column. Do not make components appear abrupt or independent. Reasonable organization of relevant data, visual integration;
2. Component spacing and relationship: distinguish the primary and secondary component information, as far as possible to display the form, expression purpose, data properties of similar components layout together, users better access to data information;
3. Clear priorities: usually the main information is placed in the middle area, large area, and secondary information can be placed around

Based on the above considerations, we can design a large screen development scheme based on grid form.

Animation and Interaction

Appropriate animation can enhance the fun of large screen, but must pay attention to primary and secondary. It is more practical to determine the interaction mode.

Chart selection

The technical implementation

Most of the large-screen requirements can be achieved quickly with the help of packaged component libraries and tool libraries. Some of the requirements need to be realized with lower-level technologies. The technical points commonly used are as follows:

1. CSS3
2. SVG
3. Canvas
4. WebGL

We can also use semi-finished products for customization, SVG related: svG. js, Snap, Canvas 2D has: ZRender, Ocanvas, EaselJS, etc.

GIS related

basis

• The map
• Shange tile/vector tile
• Projection and coordinate system
• GeoJSON

Map library components

• OpenLayers
• Leaflet
• Sinomap
• mapbox
• ArcGIS For JavaScript
• QGIS

Map Open Platform

• Scott map
• Baidu map
• Tencent map
• Map world
• Google maps

Spatial database

• PostGIS
• PostgreSQL
• Oracle Spatial

Geographic visualization

• supercluster
• turf
• geojs
• cesiumjs
• geohey

Tool library

Deployment way

The network environment

• No network connection: All resources and data are stored locally, and data update depends on manual import.
• Access only Intranet: Most resources and data are stored locally and data can be obtained from other servers on the Intranet.
• Internet access: Insensitive resources can be stored in CDN or cloud server, reducing local project volume and maintenance costs.

The equipment parameters

• Screen display technology: LED, LCD, OLED, AMOLED (different display technology, large screen display effect is different, but the impact is not big)
• Screen resolution: See Resolution Fit
• Screen width to height ratio: 4:3, 16:9(common), 15:9, 16:10, 21:9 (pay attention to the possible use of abnormal screen adaptation)
• Client hardware performance: memory, CPU, GPU, graphics card (complex large screen has high requirements on client configuration, the map’s large data volume is more CPU and memory, WebGL will call GPU rendering, generally not WebGL, large screen with lots of animation, easy to eat CPU, graphics card is also important, but not easy to quantify)
• Client browser: Modern browsers such as Chrome or FireFox are recommended