HTML5 big data visualization effect (1) rainbow explosion diagram, html5 Visualization

HTML5 big data visualization effect (1) rainbow explosion diagram, html5 Visualization

Preface

 

25 years later, Dr. Brooks's famous "no silver bullet" statement was still not broken. The same is true for HTML5. But this does not prevent HTML5 from being an increasingly powerful "blow-up": rapid development and unstoppable. With the popularization of HTML5 technology, more and more projects are presented visually using HTML5. HTML5 has obvious advantages: directly running on webpages requires no plug-ins, mobile phone tablets are convenient and compatible, and code development and maintenance are relatively easy. Java ,. NET and even the C ++ desktop programmers have begun to study javascript, and the new generation of programmers are turning straight to the HTML5 technology hot spot.

 

HTML5 covers many technical points, and even extends to the front-end, backend, communication, and other aspects. The front-end canvas drawing is undoubtedly its core content. Although the Canvas API is not very complex and powerful, it is enough for general 2d plotting. Based on these APIs, a large number of 2d drawing components have been released. Echarts and d3.js are both good projects. Echarts is mainly a chart component, while d3 is relatively complex. Many presentation methods are very creative and worth studying.

 

Overview

 

The reason for the research on d3 is that there was a recent project. The user cut a piece and asked us to do it with HTML5:

 

Looking familiar, I searched for it and thought it was the sunburst effect in the d3 example. The program is here:

Http://bl.ocks.org/mbostock/4063423

 

It seems that it is not difficult, that is, to draw the tree structure data layer by layer. So I became interested in it. "Sunburst" should be "Sunrise" in English, similar to the strong light transmitted from the back of the clouds, I do not know why most of the Chinese characters translate it into "sunset ". For example, if Fender Telecaster is Brown Sunburst, it will be translated as "sunset ".

There is a survey on the Internet about what sunrise and sunset prefer. Interestingly, the choice of sunset is far more than the choice of sunrise. Sunrise represents hope. Sunset represents maturity. It is a kind of beauty. Which beauty depends on your personal mood, because its beauty is born from the heart. In order not to make a mistake on this issue, we still give him a new Chinese name that is louder and more domineering: "Rainbow explosion map", how?

 

A closer look at the structure of a rainbow explosion map is nothing more than a tree structure and uses a emitting layout. The root node is in the middle (you can also think that there is no unique root, but a bunch of root nodes are centered around the first circle) and is arranged in a divergent manner at one time. Each node has a name and a value. Nodes can be drawn based on the proportion of their own values in the slice, so that you don't have to worry about the number of nodes.

 

This figure was first designed by John T. Stasko, a professor at Brown University.

Http://www.cc.gatech.edu /~ John. stasko/

 

After a day of hard work, I finally made a fairly decent "Rainbow explosion map ". First, let's look at the previous figure:

 

 

 

Main functions include:

The following focuses on the highlights of the tossing process:

 

1. Define node objects

 

First, define each small fan node. You can use a pie chart to draw each fan. For simplicity and convenience, the simplest and most efficient method is used: draw an arc with a thick radius. For example:

 

 

In addition, there are text and other content. Therefore, the json structure is defined as follows:

 

Var item = {name: 'name', color: 'red', angle: '45 ',...};

 

In addition, the data in the next circle can be directly defined as the "child node" of this node, and a data sub-node data can be defined directly in item:

 

Var item = {name: 'name', color: 'red', angle: '45', data: [{name: 'child 1', color: 'green ', ...}, {Name: 'child 2', color: 'yellow',…},]};

 

In this way, a tree structure can be formed. Next we need to draw the image on the canvas. For convenience, vector graphs are directly used for definition:

 

twaver.Util.registerImage('node', {      v: [{    shape: 'circle',    r: ...    lineColor: function(data,view){return data.getClient("lineColor");},         lineWidth: ...    startAngle: ...    endAngle: ...  },{    shape: 'text',    textBaseline: 'middle',    textAlign: ...    text: ...    x: ...    y: ...    font: ...    fill: ...    rotate: ...    visible: ...    shadow: ...  }],});  

 

A vector graph defines two graphical elements: an arc and a Text object, which are used to draw nodes and their texts respectively. Color, Font, visible, shadow, alignment, location, line width, angle... And so on. For example, the radius of the node can be saved and driven in the lineColor attribute of the image through the following method. You need to modify the client attribute lineColor, without modifying the drawing parameters, it is very convenient:

 

r:function(data,view){return data.getClient("lineColor");}

 

Here, we can see that the angle of each fan must be calculated based on the original value defined by each item. In addition, for small fan slices, a certain minimum value (for example, 1 degree) can be provided to ensure that it can be seen visually. Otherwise, the values 10000 and 1 are displayed. Because the comparison is too large, the cup may be used, because the 1-level connection does not occupy the level 1, and the display effect will be very poor. Also, try to leave some gaps between each fan. If it is drawn consecutively, it will be connected to one piece without the feeling of "fragment. These can be easily controlled in the code.

 

Ii. Text Control

 

Text control is also awkward. First, alignment. The simplest way is to place the text in the center and rotate it directly at the fan. In this way, the text will be in the middle of the radial direction, such:

 

 

But the display is not perfect. For Chinese, it will be easier to see if you can align them closer to the center of the center. In this way, even if the text is too long, it will expand outward and will not overlap with the content. For example:

In addition, if the text is left semi-circle, if it is not specially processed, text rotation will lead to a large head down, reading may lead to the risk of broken neck. Therefore, dynamic judgment should be made. If the text is on the left, the text should be rotated by 180 degrees. At the same time, the text alignment on the left side should also be taken into special consideration. The right alignment should be changed to ensure the uniformity of the radial direction.

 

Another detail of text is color and shadow. If you do not use shadows or colors (such as white), the text of the nodes in some directions cannot be clearly seen, because we are doing a rainbow explosion, colors vary in different directions and fade as the number of circles increases, so it is almost impossible to use a fixed color (such as white or black) it can ensure that the text can be matched with the node color in all places and can be clearly viewed. Therefore, the shadow effect is still used.

 

Think of the subtitles we used to watch the American TV series, which seems to be the same problem. Video Subtitles must be displayed in ever-changing video scenarios. The color of the video scenario is completely random and unknown. To clearly display subtitles, you must also find some solutions. Let's take a closer look at the video Subtitles:

 

After careful observation, the subtitle is a white text with a black box, so that you are not afraid of any scenario. We also simulate the text definition and set the shadow and shadow offset to try:

 

fill:'white',shadow: {offsetX: 2,offsetY: 2,blur: 4,color: 'black',},

 

 

Let's take a look at the effect comparison before and after use:

 

After shadow is used, not only the text is clearer, but also the stereoscopic effect is improved. The following figure shows the effects of applications on nodes:

It can be seen that no matter what color, you can better outline the text outline, to maintain a clear and readable.

 

3. Generate rainbow colors

 

Color is an interesting topic. For programmers, color is simple and difficult. We can easily write down 'red', 'green', 'Orange ', and 'yellow' colorful colors and ensure no syntax errors; we will also write various colors such as '# FF55AA', '#0c0', 'rgb (0,204, 0) ', and 'rgb (0%, 80%, 0%; we also understand the meaning and purpose of RGBA. However, it is rare for us to write a demo with good colors. We will discuss about the color and color later. Here we only want to automatically generate the same color as a rainbow. It seems difficult to use the familiar RGB method. So I think of the HSV color definition method, which seems to be very suitable for solving this problem.

 

The HSV color model defines the tone H, saturation S, and brightness V, A color space created by A. R. Smith in 1978. H indicates all colors in a circle of 360 degrees. The values start from red and start from the counter-clockwise direction. The red value is 0 degrees. The saturation S ranges from 0 to 1, and the greater the saturation. Brightness V ranges from 0 to 255 (it can also be converted from 0 to 1 for ease of use). The larger the brightness, the smaller the brightness.

 

Js does not directly process the HSV color function. However, the following code can be used to convert from hsv to rgb:

 

Writing a corresponding js function is also very simple:

/* h, s, v (0 ~ 1) */function getHSVColor(h, s, v) {var r, g, b, i, f, p, q, t;if (h && s === undefined && v === undefined) {s = h.s, v = h.v, h = h.h;}i = Math.floor(h * 6);f = h * 6 - i;p = v * (1 - s);q = v * (1 - f * s);t = v * (1 - (1 - f) * s);switch (i % 6) {case 0: r = v, g = t, b = p; break;case 1: r = q, g = v, b = p; break;case 2: r = p, g = v, b = t; break;case 3: r = p, g = q, b = v; break;case 4: r = t, g = p, b = v; break;case 5: r = v, g = p, b = q; break;}var rgb='#'+toHex(r * 255)+toHex(g * 255)+toHex(b * 255);return rgb;}

 

Return to our rainbow explosion chart. The angle (center angle) of each node determines its own color value. Therefore, we can obtain the color h from this angle. Then, in order to gradually fade the rainbow circle, and then decrease the s saturation from 1 circle by one (such as 0.1), the effect of fading will be achieved. In order to prevent too many circles and finally can not see clearly, to reduce to about 0.2 to 0.3 can stop decreasing.

 

Var fromAngle = node. getClient ('fromangl'); var toAngle = node. getClient ('toang'); var level = node. getClient ('level'); // The node in the nth lap var h = (fromAngle + to)/2% 360/360; // center angle, and converts it to radian var s = Math. max (0.2, 1-level * 0.1); // The value of s decreases by 0.1 per lap until 0.2. var v = 1; var color = gethsv color (h, s, v );

In this way, a circle of colors is obtained. The experiment results are as follows:

 

 

If you perform special processing on the color of a node, for example, to force the color to be highlighted in orange, you can add a tag when defining the data. You can directly set the color instead of computing it.

 

{Name: 'pudong new', value: 2600, color: '# FE9A2E '}

 

 

 

Next, you need to move the cursor over the node to automatically calculate the path, highlight the path node, and dim the non-path node. To facilitate path searching, the program defines the data in the next circle of each node as a subnode. The subnode can directly obtain the parent object through the getParent () function. In this way, you can get the nodes in the entire path by getParent, and change the color to the default color to achieve the highlighted effect:

 

var node=highlightedNode;while(node){node.setClient(‘color’, node.getClient(‘color.original’));node=node.getParent();}

 

For non-path node colors, you can set to a light color with a preset color but a saturation of 0.1 to fade it to highlight the path:

 

var color = getHSVColor(h, 0.1, v);node.setClient(‘color’, color);

 

Iv. animation effect

 

Finally, some animation effects are used to make the image more vivid. The first thing that comes to mind is that when an animation is used up and down, it will be very dynamic. In this case, an animation function is required to drive the radius of each node, from 0 to the radius. If you set them together, the entire graph will be moved. Here we use an animation function to drive it and use the easing function commonly used on the Internet to control it, to avoid linear animation being too rigid:

 

new Animate({from: 0,to: 1,dur: 3000+level*100,easing: 'elasticOut',onUpdate: function (value) {node.setLocation('pie.location’, value);},}).play();

 

 

The animation defined above is finished in 3 seconds and easing of 'elasticicout' is used. Modify the node location information for each frame. In this way, the split effect is displayed in a ring with the same rubber band.

 

In addition, the navigation bar is also abrupt. Here we also use an animation to extend it from left to right:

 

new Animate({from: {x:x1, y:y1},to: {x:x2, y:y2},delay:50,type: 'point',dur: 1000,easing: 'bounceOut',onUpdate: function (value) {node.setCenterLocation(value.x, value.y);},}).play();

 

 

The difference from the previous animation is that the {x, y} point structure is used here, and each frame directly updates the node position. At the same time, a 50-millisecond delay is set to make the animation sticky and not too abrupt. Good results.

 

 

 

So far, the Rainbow explosion map is almost done. It is easy to use. You only need to prepare some json data. The following figure shows the effects of some interesting data. If you are interested, you can obtain the code here.

 

 

Actually used in the project. If you want the project to use a rainbow explosion map, please send me an email requesting: info@servasoft.com