Imweb. IO/topic / 5 ba07…

2050. itdks.com/course/deta…

Concept:

Given a set of data [10,80,40,100,30,20,50], if we want to see the size relationship of this set of data, it is not intuitive to look at the data alone. Then we can convert it into a simple diagram.

The so-called visual analysis is to show a large amount of data in the form of charts, analyze the rules, and get some analysis results, which is called visual analysis.

In this way, we can get the information conveyed to us by the data more intuitively. This process is called data visualization.

D3 and eCharts differences:

  • D3.js stands for Data-driven Documents
  • D3 is a kind of partial functional programming method, which is also more complicated. Because it is more flexible, it involves relatively low-level things, and the learning cost is relatively high.
  • Echarts is also a data visualization tool, similar to D3. Echarts is packaged, so it’s easy to use, just fill in its configuration items, but because it’s packaged, it doesn’t have much flexibility, so we can only modify its existing configuration items.
  • The biggest difference between them is that Echarts uses Canvas for drawing, while D3 uses Svg for drawing.
  • SVG and Canvas: The difference between these two is that SVG can manipulate the DOM event handler. If you want to implement an operation, you can directly call the corresponding method to achieve the effect. There is a chain syntax in SVG. Canvas does not support event handlers so it can only display data, not modify it.

  1. D3 uses SVG to draw graphics and Echarts uses Canvas to draw graphics

  2. D3 is compatible with IE9 and above, and ECharts is compatible with IE6 and above

  3. D3 is flexible to use, high learning cost, echarts encapsulated, simple to use, not flexible enough

  4. Applicable to different scenarios:

    Because D3 supports event handlers to manipulate the DOM, you can use D3 if you have a lot of user interaction scenarios during project development. If there are no user interaction scenarios in the project in general and we just need to show the diagram to the user without changing it, we can use Echarts. Because every data displayed in D3 is a label, the chart will be re-rendered when the data is changed, and dom will be constantly manipulated, which will consume a lot of performance.

Choose Canvas or SVG

HTML5 provides two drawing technologies, Canvas and SVG, and is also the rendering technology used by most Web chart libraries. Canvas is script-based and draws dynamically through JavaScript instructions. SVG, on the other hand, uses XML documents to describe vector diagrams. The two have different application scenarios.

Canvas provides a lower-level drawing capability, which is suitable for pixel-level graphics processing and can dynamically render and draw graphics with large data volume.

SVG, on the other hand, has a higher level of abstraction, richer declarative and descriptive interface functions, and a large number of graphics, filters and animations are built in to facilitate the maintenance of document elements, and can also be exported to files for use outside the browser environment.

At the bottom, Canvas performance is more affected by Canvas size, while SVG performance is more affected by the number of graphic elements.

From a chart library perspective, Canvas and SVG have their own advantages. Canvas is suitable for scenes with small Canvas and large amount of data, such as thermal diagram and scatter diagram with large amount of data. SVG can be used if the canvas is very large, if there are high frequency interactions such as zooming and panning, or if the mobile side is very memory sensitive.

Canvas provides more primitive functions, suitable for pixel processing, dynamic rendering and large amount of data drawing.

SVG is more sophisticated and suitable for static image display, high-fidelity document viewing and printing applications.

D3 layouts

: Help you create more advanced visualisations such as Treemaps:

D3 layouts help you create more sophisticated graphs such as Treemaps, Packed Circles, and Network Graphs.

A layout is a function that takes your data as input and adds visual variables such as position and size to it

(Breadth-first layout)

The layout algorithm

1. Breadth-first search algorithm

(Embosses-first Search, abbreviated as BFS), also translated as width First Search, or horizontal First Search, is a graphic Search algorithm. Simply put, BFS starts at the root node and traverses the tree nodes along the width of the tree. If all nodes are accessed, the algorithm aborts.

2. Geometric layout

3. Force oriented layout

Force-directed graph drawing can be used to describe the relationship between nodes of the graph and distribute nodes to reasonable locations on the canvas, such as describing the relationship between enterprises and interpersonal relationships in social networks.

Echarts-ZRender

ZRender is the underlying graphics rendering engine of Echarts. It is a independently published 2D graphics rendering engine based on Canvas/SVG/VML. It provides the following functions:

  • Graphics drawing and management (CRUD, group)
  • Graphics (including text) animation management
  • Graphical (including text) event management (implementing DOM events in Canvas)
  • Efficient frame rendering mechanism based on “responsive” (DIRTY flag)
  • Optional renderer mechanism (Canvas/SVG/VML(VML support dropped in 5.0))

  1. ZRender is the overall design idea of object-oriented MVC mode. The view layer is responsible for rendering, the control layer is responsible for user input interaction, and the data layer is responsible for the layout and storage of the data model.

  2. In addition to the MVC3 module, there are the following auxiliary function modules: animation management module, tool class module, graphics object module, graphics object auxiliary module.

The engine is

HTML5 Game Engine X-Canvas:

X-canvas is a hardware-accelerated HTML5 game engine launched by UCWEB. In addition to competing with native games due to its performance, X-Canvas can also support iOS, Android, Windows Phone 8 and browser release, truly realizing one-time development and cross-platform operation.

Common analysis models?

Blog.csdn.net/jaffe507/ca…

1. Product ABC classification model

ABC classification model, also known as Pareto analysis, is mainly used to distinguish the primary and secondary product objects, which are divided into A, B and C categories.

Generally, it is used in product classification to measure and build ABC model. For example, a retail enterprise has 500 SKUs and the corresponding sales volume of these SKUs. Then which SKUs are important? This is the problem of prioritized business operation.

A common practice is to take the product SKUS as the dimension and the corresponding sales as the base measure, rank these sales indicators from the largest to the smallest, and calculate the cumulative percentage of total sales by the current product SKUS.

If the percentage is less than 70%, it is classified as class A.

If the percentage is within 70~90%, it is classified as class B.

If the percentage is within 90~100% (inclusive), it is classified as class C.

The above percentage can also be adjusted according to their actual situation.

ABC analysis model can not only be used to divide products and sales volume, but also customers and customer transaction volume. For example, who are the customers who contribute 80% of the profits to the enterprise, and what proportion. Assume 20%, then in the case of limited resources, we know to focus on the maintenance of these 20% customers.

Funnel model

The marketing funnel model is often used in the marketing process.

It is a transformational quantitative model that transforms non-potential customers into customers.

The value of marketing funnel model lies in quantifying the efficiency of each link in the marketing process and helping to find the weak link.

Marketing is a sub-step in the process from user acquisition to eventual purchase.

The conversion rate of adjacent steps means quantifying the performance of each step with data metrics.

So the funnel model is the whole process of buying split into small steps first, and then use the conversion to measure the performance of each step, finally, there is something wrong with the abnormal data indicators to find the link, so as to solve the problem, the optimization of the step, finally achieve the goal of overall purchase conversion, the core of the whole funnel model could be classified as decomposition and quantization.

For example, to analyze the transformation of e-commerce, what we need to do is to monitor the transformation of users at each level and find the optimization points at each level. For users who do not follow the process, draw their transformation model to shorten the path and improve user experience.

Porter’s five models of competitiveness

Porter’s Five Forces model is a strategic analysis tool often used by enterprises to formulate competitive strategy. The competition law of any industry will be reflected in the five competitive forces of Porter’s Five Forces model.

The analysis and formulation of strategy sounds very far from our life, but in fact, enterprises can use this model to open a new store or develop a new product.

Porter’s five Forces model collects a large number of different factors into a simple model to analyze the basic competitive situation of an industry. The five forces model identifies five main sources of competition, namely, bargaining power of suppliers, bargaining power of buyers, threat of potential entrants, threat of substitutes, and competition from peers.