HTML5 Big Data Visualization (i) Rainbow explosion map

Objective

25 years later, Dr. Brooks's famous "No silver bullet" assertion is still not broken. The same is true of HTML5. But that does not prevent HTML5 from being an increasingly powerful "egg": rapid, unstoppable growth. With the popularization of HTML5 technology, more and more projects are presented with HTML5. The advantages of HTML5 are obvious: the direct operation of the Web page without plugins, mobile phone tablet convenient compatibility, code development and maintenance is relatively easy, and so on. A big wave of a big wave of doing Java,. NET even the C + + Desktop program veteran have started to study JavaScript, and the fledgling new generation of program ape is not hesitate to go straight to HTML5 this technology hot spot.

HTML5 covers a lot of technical points, even extend to the front end, back end, communication and other aspects. The canvas drawing of the front end is undoubtedly its core content. The canvas API is not very complex and powerful, but it's basically enough to do a general 2d drawing. Based on these APIs, a whole bunch of 2d drawing components are baked. Echarts and d3.js are very good projects. Echarts is mainly chart components, and D3 relatively miscellaneous, many of the presentation is very creative, it is worth studying.

Overview

The reason for the study of D3 is that there is a recent project where the user has cut a sheet for us to do with HTML5:

Look very familiar, search, feeling is D3 example of the Sunburst effect, the program here:

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

It does not seem hard to look like a circle of pie chart, the tree structure of the data by the ratio of one layer to draw up on the line. So it caused me to do a hobby. "Sunburst" in English should be "prettidase" meaning, similar strong light from the clouds behind the transmission, I do not know why most of the Chinese translation into the "sunset." For example, this Fender Telecaster guitar model is brown sunburst, will be translated into "Sunset color."

On the question of which one prefers sunrise and sunset, there is really such a survey on the Internet. Interestingly, choosing to prefer a sunset is much more than choosing a sunrise. The sunrise represents the hope that the sunset represents maturity, is a kind of beauty, which is more beautiful to see your personal state of mind, because its beauty is born from the heart. In order not to be wrong on this issue, we still give him a more loud and domineering Chinese name: "Rainbow exploded map", how?

A closer look at the structure of the rainbow explosion is nothing more than a tree-shaped structure, with a launch-like layout. The root node is in the middle (it can also be thought that there is no unique root, but a bunch of root nodes around the first lap), one outward out. Each node has a name and value. The nodes can be drawn in proportion to their own values in the sector, so that the number of nodes is less than the actual number of the tube.

This figure was first designed by Professor John T. Stasko of Brown University.

http://www.cc.gatech.edu/~john.stasko/

After a day of tossing, finally made a still count of "rainbow exploded map." Let's look at the previous image:

The main features include:

1. Data and styles can be defined by JSON (like Baidu's Echarts);
2. Color can be fixed, but also automatic rainbow color;
3. Automatically calculates the numerical value and the angle proportion;
4. Dynamic display navigation path;
5. mouse dynamic highlighting path;
6. Animation fly in, expand navigation path;
7. Text display and angle control;
8. Full vector, mouse zoom, translation, non-distortion;

Here are some key points in the process of tossing the key:

First, define the node object

Each small fan node is defined first. Each slice can be drawn with a pie chart. For simplicity and convenience, here's the simplest and most efficient way to do this: use a line with a very thick radius to draw an arc of an angle. Such as:

There is also text and other content. So the JSON structure that defines it is probably as follows:

var  Item = {name: ' name ', Color: ' Red ', angle: ' 45 ', ...};

In addition, the next lap of data can be directly defined as the "child node" of this node, directly in the item to define a data child nodes:

var  Item = {name: ' name ', Color: ' Red ', Angle: ' A ',data:[{name: ' Child One ', color: ' Green ',...},{name: ' Child two ', Color: ' Yellow ',...},]} ;

This makes it possible to form a tree structure. The next step is to draw the graphic on the canvas. For convenience, a vector diagram is used to define it directly:

Twaver. Util.registerimage (' node ', {      V: [{    ' circle ',    r: ... function (Data,view) {return data.getclient ("LineColor");},         linewidth:    ... StartAngle:    ... Endangle:  },{    ' text '    ,' Middle ',    textAlign:    ... Text:    ... X:    ... Y:    ... Font:    ... Fill:    ... Rotate:    ... Visible:    ... Shadow: ...  }],});  

2 graphical elements are defined in the vector diagram: An arc arc, a text object that is used to draw node and draw its text, respectively. Color, font, whether visible, shadow, alignment, position, line width, angle ... And so on are dynamically obtained in the definition above with a function. For example, the radius of this node, through the following method, can be saved and driven in the LineColor property of the graph, need to modify, directly modify the LineColor this client property, instead of modifying the drawing parameters, very convenient:

R:function(data,view) {return data.getclient ("LineColor");}

One of the more verbose aspects here is that the angle of each slice needs to be calculated based on the original value defined for each item. Also, for too small a fan piece, can give a certain minimum value (such as 1 degrees), guaranteed to see it visually. Otherwise, display 10000 and 12 values, because the contrast is too large, may be the cup, because 1 even 1 degrees are not accounted for, the display will be very poor. Also, there should be a certain amount of space between each slice. If you draw continuously, you will be connected to a piece without a "shard" feeling. These can be easily controlled in the code.

Second, text control

Text control is also more verbose. The first is alignment. The simplest way is, of course, for the text to be centered and rotated directly on the fan slice. This text will be in the middle of the radial position, such as:

But it doesn't feel perfect to show. For Chinese, it will look better if you can align the positions near the center of the circle. This way, even if the text is too long, it will extend outward, and will not overlap with the inside. Such as:

Also, when the text in the left semicircle, if not to do special treatment, text rotation will lead to the text head down, Reading has a risk of crooked neck. Therefore should be judged dynamically, if the text on the left side, should the text again increase rotated 180 degrees. At the same time on the left side of the text alignment should also be special consideration, should be turned to the right alignment, in order to maintain a consistent radial.

Another detail of the text is the problem of color and shading. Without the use of shadows, purely using colors (such as white), the text of nodes in some directions will not be visible, because we are doing a rainbow explosion, the colors are different in each direction, and will be dimmed as the number of laps increases, So it is almost impossible to use a fixed color (white or black, for example) to ensure that the text matches the node color and is clearly visible everywhere. So the reasoning still uses the shadow effect.

It seems to be the same problem when we think of the subtitles that we see in the US drama. Video subtitles to be displayed in the ever-changing video scene, the color of the video scene is completely random appear unknown, want to let the subtitles see clearly, will also want some solutions. Let's take a closer look at the video subtitles:

Careful observation, subtitles are white text added a circle of black frame, so it is not afraid of any scene. We also simulate the text definition, set the shadow and Shadow offset to try:

Fill: ' White '224' black ',},

Look at the comparison between pre-and post-use effects:

The use of shadow after not only the text clearer, but also increased the sense of three-dimensional, the effect is good. The following illustration shows the effect applied on a node:

No matter what color, can be more good outline of the text outline, to maintain a clear and readable.

Third, create a rainbow color

About color, is an interesting topic. For the vast program of apes, color is a simple and difficult thing. We can write the colorful colors of ' red ', ' green ', ' orange ', ' yellow ' and make sure there are no grammatical errors, and we will also write ' #FF55AA ', ' #0c0 ', ' RGB (0,204,0) ', ' RGB (0%,80%, 0%) ' Such a variety of color notation, we also understand the meaning and use of RGBA. However, we rarely can make a demo to write the color is very good, very good match. About colors and color matching are discussed later. Here we just want to automatically create a circle of colors like the rainbow. It seems more difficult to use our familiar RGB method. So I think of the HSV color definition method, which seems to be suitable for solving this problem.

The HSV color model defines the hue H, saturation s, and luminance V, by a. A color space created by R. Smith in 1978. where H uses a circle of 360 degrees to represent all colors, starting from red in the counter-clockwise direction, red is 0 degrees. Saturation s from 0 to 1, larger and more saturated. Brightness v from 0 to 255 (can also be converted from 0 to 1, easy to use), the larger the brighter, the smaller the more dim.

JS does not directly handle the HSV color function. However, it is convenient to convert from HSV to RGB using the following code:

It's also easy to write a corresponding JS function:

/*h, S, V (0 ~ 1)*/functionGethsvcolor (H, S, v) {varR, 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) { Case0:r = V, g = t, B = p; Break; Case1:r = q, g = V, b = p; Break; Case2:r = p, g = V, b = t; Break; Case3:r = p, g = q, b = v; Break; Case4:r = t, G = p, B = v; Break; Case5:r = V, g = p, b = q; Break;}varrgb= ' # ' +tohex (R * 255) +tohex (g * 255) +tohex (b * 255);returnRGB;}

And then back to our rainbow exploded chart. The angle at which each node corresponds (the center angle) determines its own color value. So, we can get the color h directly from this angle. Then, in order to let the rainbow gradually fade a circle, and then the s saturation from 1 circle-by-turn decrement (for example, 0.1), resulting in a light-reducing effect. In order to prevent the loop too much last to see, reduce to 0.2 to 0.3 or so can stop decreasing.

var fromangle=node.getclient (' Fromangle '); var toangle=node.getclient (' Toangle '); var level=node.getclient (' level '); // node in the first few laps var // Center angle, and convert to radians var s = Math.max (0.2, 1-level*0.1); // each lap s decrements by 0.1 until 0.2 var v=1; var color=gethsvcolor (H, S, v);

This gives you a circle of color. The experimental results are as follows:

If the color of a node relative to a particular processing, such as forced to highlight the orange, we can be defined in the data with a marker, set the color is used directly instead of calculation.

{name: ' Pudong New Area ', value:2600, color: ' #FE9A2E '}

Next, to achieve the mouse stroke points, automatically calculate the path, highlight the path node, dim non-Path node. In order to facilitate the path search, the program defines the next circle data for each node as a child node, and the child node can obtain the parent object directly through the GetParent () function. In this way, the nodes on the entire path can be obtained by constant getparent, and the color will be changed to the preset color to achieve the highlight effect:

var node=Highlightednode;  while (node) {node.setclient (' Color ', node.getclient (' color.original ')); node=node.getparent ();}

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

var color = Gethsvcolor (h, 0.1, V); node.setclient (' Color ', color);

Four, animation effect

Finally, some animated effects are used for more vivid graphics. The first thought is the graphics out when, with animation from small to large divergent, will be very dynamic. This requires the animation function to drive the radius of each node, from 0 to the location of the radius, if you set up together, the entire graph will move up. This is driven by an animated function, which is controlled using the easing functions commonly used on the web, to avoid the linear animation being too rigid:

New013000+level*100' elasticout 'function  (value) {node.setlocation ('pie.location ', value),},}). Play ();

The animation defined above, with 3 seconds to run, with the ' elasticout ' easing way. Each frame, modify the location information of node. This completes the same circular pop-up effect as the rubber band.

In addition, the navigation bar out is also more abrupt, here also use animation, let it from left to right slowly stretched out:

New Animate ({from: {x:x1, y:y1},to: {x:x2, Y:y2},delay:"point '" Bounceout ')  function  (value) {node.setcenterlocation (value.x, value.y);},}). Play ();

The difference from the previous animation is that the point structure of {x, y} is used here, and each frame updates the node position directly. Also set the delay of 50 milliseconds, so that the animation has a little sticky stagnation, not too abrupt. Good results.

At this point, the Rainbow Explosion diagram is basically done almost. It's also easy to use, just prepare some JSON data, and here are some interesting data to do. Interested students can come here to ask for code.

Actually applied in the project. If you would also like to use a rainbow explosion in the project, please email me to request: [e-mail protected]

HTML5 Big Data Visualization (i) Rainbow explosion map