HTML5 big data visualization effect (2) interaction between subway map and html5 Map

HTML5 big data visualization effect (2) interaction between subway map and html5 Map

Preface

 

Recently, I was very busy. Thanks to everyone's attention, I got a group of younger siblings from one project to another in the 3D data center. I had carried out a series of text transfer guides, and I went away with a black rabbit ...... A younger brother is very nice and diligent. He soon made a thorough understanding of all the APIs and made a subway line map for the HTML5 magic capital, it also interacted with electronic maps. Brother decided to incorporate the younger brother's achievements into the "HTML5 big data visualization effect" series, to show encouragement (P.S. In fact, there is still a lot of pressure, and the new people rush to the old man. We should also pay attention to these old birds, so that they will not get a job after 00)

 

Comparison

 

There are still many subway maps on the Internet. The younger brother chose this relatively new one for reference. When I tried to fight together, the figure showed a Red Cross and a Green Cross ...... The exposure age is not much to say, as shown in the figure:

Let's take a look at what the younger brother did:

I don't know the difference at a glance, but it's not one. It's something a newbie just made in a few days, and a lot of beautification and adjustment in it are done automatically through the program, this is not easy. More importantly, it is not an infinite graph, but a topology graph with pure vectors, interactions, dynamic effects, and distortion-free scaling! Let's take a brief look at the Interaction Effect. Later we will discuss the implementation of the Code in detail.

 

Text prompt

 

First, text prompts will pop up when you move the cursor to the site, road section, icon, and other locations. This is quite basic. Baidu's family has it, and the younger brother has a relatively simple pop-up content. If you add a basic introduction, related tips, and peripheral information ...... If you add advertisements, you can make money ...... You can add anything. It's just a setToolTip command.

 

 

Site icon changes

 

When you move the cursor over the site, the site icon is enlarged. This effect is very considerate. After reading Baidu's home page, it uses the luminous effect.

 

 

The implementation method is also very simple, that is, dynamic judgment is added when registering the site vector image. The following code registers a vector image for a common website:

 

twaver.Util.registerImage('station',{    w: linkWidth*1.6,    h: linkWidth*1.6,    v: function (data, view) {        var result = [];        if(data.getClient('focus')){            result.push({                shape: 'circle',                r: linkWidth*0.7,                lineColor:  data.getClient('lineColor'),                lineWidth: linkWidth*0.2,                fill: 'white',            });            result.push({                shape: 'circle',                r: linkWidth*0.2,                fill:  data.getClient('lineColor'),            });        }else{            result.push({                shape: 'circle',                r: linkWidth*0.6,                lineColor: data.getClient('lineColor'),                lineWidth: linkWidth*0.2,                fill: 'white',            });        }        return result;    }});

 

Drag and Drop the animation effect

 

You can also see that in addition to adding colors to the transfer station icon, the rotation effect is also achieved. This will kill Baidu's family in seconds. Let's look at the Code:

 

1.    twaver.Util.registerImage('rotateArrow', {2.        w: 124,3.        h: 124,4.        v: [{5.            shape: 'vector',6.            name: 'doubleArrow',7.            rotate: 360,8.            animate: [{9.                attr: 'rotate',10.                to: 0,11.                dur: 2000,12.                reverse: false,13.                repeat: Number.POSITIVE_INFINITY14.            }]15.        }]16.    });

 

Of course, this is also very easy for TWaver, but it only changes the rotate attribute dynamically. In addition, when you click or double-click a site, you can also achieve the selected and loading animation effects, which is worthy of your liking!

 

 

 

Hybrid Scaling

 

Distortion-free scaling is an inherent advantage of vector graphs. The younger brother is also well versed in it. He applies TWaver's hybrid scaling mode to the extreme, as well as small features such as scaling control and automatic text hiding to facilitate customization.

 

 

The code is not complex either:

 

1.    network.setZoomManager(new twaver.vector.MixedZoomManager(network));2.    network.setMinZoom(0.2);3.    network.setMaxZoom(3);4.    network.setZoomVisibilityThresholds({5.        label : 0.6,6.    });

 

Use interactive functions

 

The younger brother is proud to introduce this function to me: the icon can be freely dragged, And it will automatically pop back after it is released. Brother asked his younger brother what is the use of this, and he solemnly said: prove that the figure is live!

 

 

 

Well, you have won. Although it is a function that is useless, I believe you can play it for dozens of minutes when you are idle.

 

Click the same site consecutively

 

Click the same site consecutively (note that it is not a double-click) to highlight all the lines passing through the site. The younger brother said that adding this function is purely simple and easy to do. I ...... Who did not play this kind of easy and thankless tricks when they were young?

 

 

 

Double-click site

 

Double-click the site to bring up an electronic map around the site! I know how to introduce the jade of his mountains. I found that some of his positioning methods use longitude and latitude, and some are keyword queries. The younger brother cleverly said that he started to manually check the longitude and latitude of each site. After a while, he found that it was too troublesome and then changed his path. As Ma said, lazy people change the world. I'm here!

 

 

 

In the end, let's look at the idea of program design. The younger brother is a good child. He must have considered the program well. Don't want to listen to my friend, can also directly send mail to me, tw-service@servasoft.com, to appreciate the younger brother's results.

 

Data File Sorting

 

The data format is json files supported by JavaScript native, Which is intuitive and convenient. The data structure is organized by site, line, and miscellaneous. The structure is clear, which facilitates operations such as traversal and query.

 

1.    {2.        "stations":{3.            "l01s01":{ },4.            …………5.        }6.        "lines":{7.            "l01":{……},8.            …………9.        }10.        "sundrys":{11.            "railwaystationshanghai":{……},12.            …………13.        }14.    }

 

The naming conventions show the basic information (for example, "l01s01" is the first site on Line 1). You can even query and traverse the basic information by name.

 

1. "l01s01": {2. "id": "l01s01", 3. "name": "xinzhuang", 4. "loc": {"x": 419, "y": 1330}, 5. "label": "bottomright. bottomright ", 6 .}, 7. ............

 

Site route Creation

 

The first is to read the data of the json file.

 

1.    function loadJSON(path,callback){2.        var xhr = new XMLHttpRequest();3.        xhr.onreadystatechange = function(){4.            if (xhr.readyState === 4) {5.                if (xhr.status === 200) {6.                   dataJson = JSON.parse(xhr.responseText);7.                   callback && callback();8.               }9.           }10.       };11.       xhr.open("GET", path, true);12.       xhr.send();13.    }

 

Because File Reading is an asynchronous process, program expansion must be placed inside the File Reading function.

 

1.    function init(){2.        loadJSON("shanghaiMetro.json", function(){3.            initNetwork(dataJson);4.            initNode(dataJson);5.        });6.    }

 

By traversing the site once, the establishment of the station is complete.

 

1. for (staId in json. stations) {2. var station = json. stations [staId]; 3. staNode = new twaver. node ({4. id: staId, 5. name: station. name, 6. image: 'Station ', 7 .}); 8. staNode. s ('label. color ', 'rgba (99,99, 99,1)'); 9. staNode. s ('label. font ', '12px '); 10. staNode. s ('label. position ', station. label); 11. staNode. setClient ('location', station. loc); 12. box. add (staNode); 13 .}

 

Traverse all the sites under each line in the data file, and create links between sites in sequence.

 

1.    for(lineId in json.lines) {2.        ……3.        for(staSn in line.stations) {4.            ……5.            var link = new twaver.Link(linkId,prevSta,staNode);6.            link.s('link.color', line.color);7.            link.s('link.width', linkWidth);8.            link.setToolTip(line.name);9.            box.add(link);10.        }11.    }

 

Then adjust the label location. Otherwise, the site name may be messy. The younger brother is realized by manually adding location information to the raw data. It is a little dumb. The program should be able to automatically judge the space around the site for intelligent adjustment. Then add the icon, and an original subway map will be displayed.

 

 

 

Route inflection point addition

 

The basic probe function is ready. Here, I really appreciate the fact that I didn't stop it, but made further adjustments, the line retains only the horizontal, horizontal, vertical, and oblique directions to achieve neat and beautiful results. It may seem a little different from the reference chart, mainly because only one inflection point is added for each road section. This greatly simplifies the program and ensures the beauty of the image. Think a little farther, do more, it is a good material for products.

 

 

 

Of course, in order to improve the flexibility of the program, two or more inflection points must be added, and manual inflection points are also used. However, the manual inflection point is set to an invisible node, which may facilitate intelligent inflection point judgment, but may also cause confusion during route operations. Further consideration can be made on how to handle the problem better.

 

var createTurnSta = function(line, staSn){    staTurn = new twaver.Node(staSn);    staTurn.setImage();    staTurn.setClient('lineColor',line.color);    staTurn.setClient('lines',[line.id]);    var loc = line.stations[staSn];    staTurn.setClient('location',loc);    box.add(staTurn);    return staTurn;}

 

Adjust the Contact Position

 

As you can see, not all sections are directly connected to the site center. In many cases, offset is required.

 

var createFollowSta = function(json, line, staNode, staId){    staFollow = new twaver.Follower(staId);    staFollow.setImage();    staFollow.setClient('lineColor',line.color);    staFollow.setClient('lines',[line.id]);    staFollow.setHost(staNode);    var az = azimuth[staId.substr(6,2)];    var loc0 = json.stations[staId.substr(0,6)].loc;    var loc = {x:loc0.x+az.x, y:loc0.y+az.y};    staFollow.setClient('location',loc);    box.add(staFollow);    return staFollow;}

 

 

The younger brother adopted the virtual node approach, that is, adding a Follower next to the site (but not displayed), so that different parallel lines can be connected to different Follower. Adjust the Follower location to control the connection points between the line and the site.

 

var azimuth = {    bb: {x: 0, y: linkWidth*zoom/2},    tt: {x: 0, y: -linkWidth*zoom/2},    rr: {x: linkWidth*zoom/2, y: 0},    ll: {x: -linkWidth/2, y: 0},    br: {x: linkWidth*zoom*0.7/2, y: linkWidth*zoom*0.7/2},    bl: {x: -linkWidth*zoom*0.7/2, y: linkWidth*zoom*0.7/2},    tr: {x: linkWidth*zoom*0.7/2, y: -linkWidth*zoom*0.7/2},    tl: {x: -linkWidth*zoom*0.7/2, y: -linkWidth*zoom*0.7/2},    BB: {x: 0, y: linkWidth*zoom},    TT: {x: 0, y: -linkWidth*zoom},    RR: {x: linkWidth*zoom, y: 0},    LL: {x: -linkWidth, y: 0},    BR: {x: linkWidth*zoom*0.7, y: linkWidth*zoom*0.7},    BL: {x: -linkWidth*zoom*0.7, y: linkWidth*zoom*0.7},    TR: {x: linkWidth*zoom*0.7, y: -linkWidth*zoom*0.7},    TL: {x: -linkWidth*zoom*0.7, y: -linkWidth*zoom*0.7}};

 

This is the end of the Introduction. Although it is a small example, it is really beautiful and practical, and the younger brother has spent the effort to do it, in fact, you can make high-speed trains, bus diagrams, Operation diagrams, and other applications with a slight transformation. Imagine how cool it would be to use it in the big screen monitoring of the Rail Transit Control Center. Speaking of this, I think of the Hangzhou City Data brain that I just saw at the computing conference some time ago. I don't know when my brother will be able to participate in such a project? Visualization, brother's strengths ...... Finally, want to see the program, or want to play "Subway drag music" you, can give me a message and mail: tw-service@servasoft.com.