Tall and essential! Analysis of D3.js contribution to products and d3.js contribution

Tall and essential! Analysis of D3.js contribution to products and d3.js contribution

 

In this era of talking with data (the age of relying on faces to eat), there is no good presentation form (not a handsome and clear face) and the impact on the entire product, that's simple...

 

 

In the field of data visualization competition, all users on the Internet pay great attention to front-end presentation of their own products. This also caused a variety of front-end fire to burst, fire do not need one of the reasons. Various new frameworks are also coming soon, such as emberjs, angluarjs, backbonejs, vuejs, and reactjs. This has also caused some troubles for the development of enterprises.

 

Zhuxing school:This school of disciples paid great attention to the desire for new skills. They saw new skill books, no matter how rough the road ahead, and then practiced again. As long as it is a new technology, it will be immediately applied to the product, and there will be a lot of people who finally give up.

 

Conservative:The disciples were relatively mature and sedated. They wanted to win in stability, observe the development of forms, and finally decide again. It usually takes some time to select the technology, and the cycle is quite long.

 

Stubborn school:These people are generally older and do not like new things. As long as they are in good condition, they never consider absorbing new knowledge. If technology lags behind, the conversion rate of new school disciples will be much lower.

 

Innovation school:The form of these creatures has changed, which immediately helps you to become another secret of martial arts. A typical example is a member of a certain treasure, which is filled with various technical experts and a good place to exercise.

 

It seems that TM has been running on Mars.

 

At present, the development of the front-end belongs to the HTML5 era, and the heroes of the times are also emerging. For example, our leading roles D3.js, raphaeljs, domestic star echarts, and foreign orangutan highcharts. Lin Yu is full of eyes, just choose a appealer. Let's just say, What Can D3js help write?

 

D3js

 

What is D3js? As we mentioned earlier, it is a visual tool library. The power of this tool is like giving you a piece of paper and a pen. If you want to draw whatever you like, you can draw whatever you want. It is very capricious for us. It uses html, svg, and css to present abstract data and images vividly. D3 is strictly compliant with WEB standards, so it is compatible with mainstream frameworks. Of course, it also provides powerful visual components.

 

Official Website: https://d3js.org/, which can be easily downloaded using npm( npm I d3). What? What is npm? (Npm: https://en.wikipedia.org/wiki/Npm_ (software )).

Powerful visualization components: https://github.com/d3/d3/wiki/Gallery

 

James: Teacher, you have been talking about how it gets tired and how powerful it is. How can you talk about it vividly?

 

INSTRUCTOR:

 

Scenario 1:

 

The boss said: recently, we have more and more people and the organizational structure is becoming more and more complex. It is time to give our employees a proper understanding of the organizational relationship diagram, so that our staff may not find their own organization and cry in the toilet.

According to our previous diapers, isn't this a tree structure? so easy... then we have the following figure:

 

The boss of long ago may look like this:

 

Pleased

In recent years, Internet bosses may see the following:

 

Speechless

In this case, the following figure is displayed:

 

▲Ignore the content on the graph.

At this time, the boss will definitely come

 

It is.

 

This is a representation of a tree layout in D3. A graphic that displays hierarchical relationship structures in a friendly manner. It is often used to describe information such as the organizational structure.

 

Scenario 2

 

The boss said, recently I saw Didi taxi and uber taxi very hot. You can see their driver version on the map and the concentrated area map of the taxi. This data capability can do a lot of work. We also need to help the O & M personnel in product analysis during which time periods there are many users to help the O & M personnel with analysis.

At this time, many people may think of the common style:

 

▲Echarts

I think you should use a lot of this echarts graph, but if we come up with a strong expression, the product will definitely add points to the competition, for example:

 

▲D3.heatmap

Of course, each of these two display styles has its own merits.

 

Scenario 3

 

The boss said that we need to see how many machines have been installed on our products. We need to display them in a form and observe the health status of the machine at all times to perform data analysis intuitively.

This is what I got at the beginning, and then began to study how the presentation form should be good.

 

At first, I thought that this item could not be displayed in a list form. Emma:

 

▲Form

However, Superiors always think that this is not enough and there is no bright spot.

 

In order to win the eye, I have to turn to our D3 black technology. In an instant, I feel that I am not in arrears. As a result, we have the following variants of the category class:

 

▲Pack layout

 

The above briefly introduces what D3 can do. Of course, D3 is far more than just these forms. As mentioned above, it has powerful functions and is not afraid that it cannot do it, i'm afraid you can't think of it. It's also suitable to use it here.

 

It has several advantages:

 

1. High Adaptability

 

The APIS provided by third-party Component Libraries often fail to meet our ever-changing needs. Our D3 is very suitable for such occasions, and it can satisfy our needs as much as possible. Because it uses SVG, CSS can be used for modification like HTML.

 

2. A large number of la s

 

It can use transformation, filter, and other animation effects. There are many la s, including the tree installation diagram, pie chart, package chart, matrix chart, and so on.

 

3. zooming will not lose precision

 

SVG is a scalable vector image, and D3 is basically drawn on SVG, so there is no loss of precision if you zoom in or out.

 

In short, let's give a rough introduction to this ~

 

Author: Zhu enliang, youyun software is a cute product in the second world, although it cannot be sold in the third-dimensional world

 

Cloud software: Adhering to the devops philosophy, from monitoring, to application experience, to automatic continuous delivery, full stack O & M solution service provider https://uyun.cn