From 0638892740f4b0f6f4ca780e58086f265d373f56 Mon Sep 17 00:00:00 2001
From: Dan LI <45680748+Adan2333@users.noreply.github.com>
Date: Wed, 19 Jun 2024 13:03:46 +0930
Subject: [PATCH] docs: Update docs/spec/visual.en-US.md (#49489)
Added missing images and content from the corresponding visual.zh-CN.md.
Signed-off-by: Dan LI <45680748+Adan2333@users.noreply.github.com>
---
docs/spec/visual.en-US.md | 152 ++++++++++++++++++++++++++++++++++++++
1 file changed, 152 insertions(+)
diff --git a/docs/spec/visual.en-US.md b/docs/spec/visual.en-US.md
index 68e9236718..f8f7bdf43e 100644
--- a/docs/spec/visual.en-US.md
+++ b/docs/spec/visual.en-US.md
@@ -25,3 +25,155 @@ We encapsulate a set of AntV component libraries based on native JavaScript, whi
- [F2: Mobile Charts](https://f2.antv.vision/en)
- [L7: Geospatial Visualization Analysis](https://l7.antv.vision/en)
- [React AntV](https://charts.ant.design/en)
+
+## How to Design
+
+### Understanding the users
+
+Who are the users? What information do they want to get from the visualisations? In an enterprise product, users may be company executives, BI analysts, operations, data developers, and other different roles. Different roles may use visualisations for different purposes and in different ways. It is recommended to fully profile the users before starting the design in order to tell your data story completely and present your data insights accurately.
+
+### Design Principles
+
+- Accuracy: The conversion of data into visual representations that do not distort, mislead or omit, and that faithfully reflect the information contained in the data;
+- Effective: Information is conveyed in a focused manner, with restraint and without redundancy, avoiding information overload, and using the most appropriate amount of Data-ink Ratio (Data-ink Ratio) to express the most useful information to the user;
+- Clarity: The presentation is clear, easy to read and organised, which helps users to reach their goals quickly and get more information in the least amount of time;
+- Aesthetics: perfect expression of the data, reasonable use of visual elements for artistic creation, without excessive modification, to give users an elegant experience.
+
+## Chart usage
+
+### Choosing the right chart type
+
+We provide a complete description of chart usage to help you choose chart types more wisely.
+
+#### Time series
+
+
+
+
+
+Typically used to show trends and changes in data in the time dimension.
+
+#### Comparison
+
+
+
+
+
+Uses the length, width, position, area, angle and colour of a graph to compare the magnitude of values and is often used to show comparisons of values between different classifications.
+
+#### Distribution
+
+
+
+
+
+Typically used to show the distribution of values on continuous data.
+
+#### Process
+
+
+
+
+
+Typically used to represent process flow, flow relationships.
+
+#### Proportion
+
+
+
+
+
+Shows the percentage relationship on the same dimension.
+
+For more chart usage content, go to [AntV Chart usage](https://antv-2018.alipay.com/zh-cn/vis/chart/index.html)
+
+### Colour Swatches
+
+
+
+
+
+AntV provides a default set of chart colours, including colour usage.For more colour swatches, go to [AntV - Design language - Vision](https://antv.vision/specification/language/palette)
+
+
+### Component Usage Recommendations
+
+#### Title and Notes
+
+The title is a paragraph that elaborates on the subject of the chart; the notes indicate the source of the data and make the chart appear to be from a clear and reliable source.
+
+#### Axle
+
+
+
+
+
+
+
+
+
+Used to define the mapping relationship between data in a coordinate system in terms of direction and value.
+
+#### Legend
+
+
+
+
+
+
+
+
+
+Used to explain the meaning of all visual elements contained in the chart area.
+
+#### Labels
+
+
+
+
+
+Content annotation for the current set of data.
+
+#### Alerts Message
+
+
+
+
+
+This means that when the mouse hovers over the chart or the finger clicks on a data point of the mobile device, the data of the point is displayed in the form of interactive prompts, such as the value of the point, the unit of the data, etc.
+
+#### Graphics
+
+
+
+
+
+The graph is the visual presentation of the visual channels of the statistical chart mapped on the shape and is the main part of the chart, the other chart components are intended to help the reader to better understand the relationship of the data mapped on the graph.
+
+For suggestions on how to use the components, go to [AntV - Design language - Component Design Guidelines](https://antv.vision/zh/docs/specification/components/titlenotes)
+
+### Chart layout adaptation
+
+
+
+
+
+Data visualisation is always facing the conflict between massive data volume and limited screen space, how to solve the problem of adapting the content to different ends and different screen sizes, and help users understand the information and analyse the insights faster in the limited space is the problem we have been committed to research.
+
+
+
+
+
+In Ant Design's visualisation system, we have developed a set of layout adaptation rules for full-volume charts, sorting out a layout adaptation system that applies to all charts, from the overall chart, to the atomic components within the chart. Take the moving image on the right as an example, where the axis labels of the horizontal axis are rotated to follow the specific dimensions. More content will be released soon, stay tuned.
+
+### Interaction
+
+
+ 
+
+
+Different from the relatively static presentation of traditional data reports, interactive charts do not stop at the level of information display. Users continuously interact with the charts to get deeper analysis and information from the data.。
+
+In data visualisation, we break down the interaction actions into three layers, namely "data acquisition", "information processing" and "knowledge flow", according to the user's level of consciousness and the goals corresponding to each level. It matches the motto of "overview first, focus on filtering, and then view the details as needed" in visual information retrieval. It is also in line with the basic logic of human seeking information: first general, then local, and then focus on the point of interest to explore, which is a process from the surface to the inside.
+
+For more interactive charts go to [AntV - Design language - Interaction](https://antv.vision/zh/docs/specification/language/interact)