preface

Since December 2019, wuhan, hubei province has found more cases of pneumonia cases, has now been confirmed as a will be coronavirus infection of acute respiratory infectious diseases and spread across the country, pneumonia outbreak affects the heart, people up first thing every day became a focus on disease progress, expect the scourge will soon come to an end, return to normal social order. Recently on the front end design friend’s friend and cooperation, we launched a mobile version of the outbreak and GIS version with the map, and this time we launched the PC version of the epidemic situation maps, light color department is tonal collocation is 2 d, 3 d way of comprehensive dynamic and historical data show the latest outbreak, hoping to bring a bit more cheerful perception experience, Reduce anxiety.

First open the page to feel:

Click preview

There is also a preview of the GIS version:

Epidemic map in GIS

Data Source Description

CDC, Baidu, Tencent and Dingxiang Garden all have their own epidemic maps, and our data are also derived from these maps. This part is explained in detail in the previous article “HTML5 WebGL Realizing real-time Data Visualization of NOVEL Coronavirus Epidemic With 3D Map”, which will not be repeated here.

System is introduced

Data Display:

1. Start from the table on the upper left, which shows the accumulated data of each province and the data of each region in this province. Click to expand or fold, click the corresponding position of the 3D map to screen out the corresponding data of this region for separate display, and click the blank to restore the national data. 2. The next part is the epidemic report on the lower left. The data in this part are collected and displayed in rotation by local health commissions. The vertical offset and slow movement effect of the table are added to make scrolling more natural and beautiful. 3. The most prominent is the latest confirmed, at the bottom of the suspected, cured, death data, such as the position of the up and a timeline, click the play button next to the dynamic changes of the page data, according to different regions and the number of confirmed date to map the dyeing, and next to the color contrast can be observed clearly out of the regions and the severity of the disease. 4. The chart on the right shows the data of confirmed cases, suspected cases, cured cases and deaths in chronological order. The trend of the epidemic can be read at a glance. 5. Click on the navigation bar to preview the GIS version of the EPIDEMIC map, the CDC official website, and the mobile version of the epidemic map.

3D map section:

  1. Fade in effect. After opening the demo, the 3D map slowly flies in from a distance, with a natural transition. This is achieved through the startAnim function of HT. You can specify any easing function to achieve different flying effects, which will be described in the next section.
  2. Province click effect, flow animation output from Wuhan, rotation animation of provincial capital positions.

Schematic diagram of the program:

1) Implementation and interaction of 2D and 3D scenes

2) Global event manager

The whole project involves a lot of 2D and 3D interactions, so a global event manager class instance is used to manage:

class NotifierManager {
    constructor() {
        this._eventMap ={};
    }

    add(key, func, scope, first = false) {
        let notify = this._eventMap[key];
        if(! notify) notify = this._eventMap[key] = new ht.Notifier(); notify.add(func, scope, first); } fire(key, e) { const notify = this._eventMap[key];if(! notify)return;

        notify.fire(e);
    }
}

const event = new NotifierManager();
Copy the code

Main code:

1) Click on the 3D map

Changed 2D content with HT event dispatch:

The relevant codes are as follows:

event.fire('clickProvince', {
    data : this.g3dProvince,
    node : data
});
Copy the code
clickProvince(dataList, node) { 
    letprovince = node.getDisplayName(); ForEach (data => {data.s('shape3d.opacity', data === node ? 1:0.4); }) // Display only the province dataif (this.areaDatas && this.areaDatas.length > 0) {
        let provinceData = [];
        this.areaDatas.forEach((item) => {
            if (item.area === province || item.host === province) {
                item.expand = true; provinceData.push(item); }}); this.detailTable.a('ht.dataSource', provinceData); }}Copy the code

2) Slider play

Slider play uses startAnim’s frame-based animation to start the animation:

The relevant codes are as follows:

// Slider playplayDateSlider() {
    this.playMenu.s('state'.'suspend');
    let value =  this.dateSlider.a('ht.value');
    let x = this.dateSlider.a('dateArea') [0]; // If the data is reset on the last dayif(the value > = 100 | | x > = SLIDER_TIP_END_X) {/ / reset map background event. The fire ('resetMapColor');
        value = this.sliderValue = 0;
        x = SLIDER_TIP_START_X;
        this.dateSlider.s({
            'ht.value': 0.'text' : this.sliderDateList[0],
        });
        this.dateSlider.a('dateArea', [SLIDER_TIP_START_X, SLIDER_TIP_Y, SLIDER_TIP_WIDTH, SLIDER_TIP_HEIGHT]); } // animate this.slideranim = ht.default. startAnim({frames: 100, interval: 300, action: () => {this.onplay =true; this.timerJudgment(value); // Stop at the maximum valueif (value === 100) {
                this.onPlay = false;
                this.dateSlider.a('ht.value', value); This.initbottom (17); this.playMenu.s('state'.'play');
                this.sliderAnim.stop();
            };
            value += 1;
            this.sliderValue += 1;
            this.dateSlider.a('ht.value', value);
            x += STRIDE;
            if (x >= SLIDER_TIP_END_X) {
                this.dateSlider.a('dateArea', [SLIDER_TIP_END_X, SLIDER_TIP_Y, SLIDER_TIP_WIDTH, SLIDER_TIP_HEIGHT]); }}})}Copy the code

3) 3D entrance animation

The moveCamera method is included in HT for perspective – changing animations. The relevant codes are as follows:

function flyToView(g3d, eye, center, cb) {
    g3d.moveCamera(eye, center, {
        duration: 3000,
        easing: Easing.swing,
        finishFunc: function () {
            if (cb) {
                cb();
            } else {
                return; }}}); }Copy the code

4) 2D table animation

Change the vertical offset value of the table every 1.5 seconds, and play this process through frame animation to achieve a smooth browsing experience, the relevant code is as follows:

// Epidemic broadcast animationplayTable() {
    lettable = this.newsTable; // The table is Y offsetlet translateY =  table.a('ht.translateY');
    this.tableInterval = ht.Default.startAnim({
        frames: Infinity,
        interval: 1500,
        action: () => {
            if (translateY < 0) {
                translateY = 0;
            }

            let temp = this.articleDataSource.shift();
            this.articleDataSource.push(temp);
            
            ht.Default.startAnim({
                frames: 20,
                interval: 10,
                finishFunc: () => {
                    translateY -= 32;
                },
                action: (v, t) => {
                    table.a('ht.translateY', translateY - 32 * v); }}); }}); }Copy the code

5) Preview other versions of the epidemic map and the CDC website

Ht event distribution is used for drawing loading and switching processing, taking GIS version as an example:

The relevant codes are as follows:

if (kind === 'mobile') {
    event.fire('showMobile');
} 
else if (kind === 'cdc') {
    event.fire('showCdc');
} 
else if (kind === 'gis') {
    event.fire('showGis');
}
Copy the code

conclusion

Epidemic map PC version of the general effect is these, you can feel the 3D technology supported by modern browsers can achieve very intuitive effect, interactive is also very good. The Internet of Things and the upcoming 5G have brought new opportunities as well as new challenges to many industries. How can the massive data be more vividly displayed in front of people? A cross-platform browser is definitely the best choice. WebGL technology relies on the browser and has a natural advantage in data processing. As a first-line and heavy participant in the field of industrial visualization, Tupu software has accumulated a lot of valuable industry experience. Not long ago, I made a summary review and share of the past 19 years. We sorted out “2019- Share hundreds of 2D 3D Visualization Application cases of HT Industrial Internet”, and hope you enjoy them.

Write in the last

At present, the spread of the epidemic has been preliminarily controlled under the unremitting efforts of the whole country to fight the epidemic with concerted efforts. When the emergency came, I was very lucky to be a member of this country. In the face of the epidemic, the execution of various public institutions effectively prevented the spread of the epidemic. When one party was in trouble, all parties provided support to ensure the supply of materials in each region, and the determination of the whole people to win the battle was strengthened. Unfortunately, the novel Coronavirus pandemic has extended its grip on the rest of the world, but I am confident that with the concerted efforts of the Chinese people and people of all countries in the world, we will be able to prevent the spread of this disaster. Tupu technology will also pay close attention to the latest developments and contribute to the epidemic in its own way. Here is a preview, the world version of the epidemic map will be available soon, stay tuned!