Project description:

In the special context of the global spread of Newcastle pneumonia, this project uses visualization to present different dimensions of information and data in the process of fighting the epidemic in China. The metaphorical visual language and interactive web communication format narrate the dynamics of the epidemic and the twists and turns of individual destinies. The exploration of the four chapters is supported to provoke empathy and reflection in the reader.

Impact reached:

News reports during the epidemic were mostly about the epidemic situation and government decisions, and confirmed cases were more often converted into numbers and activity paths. This project tries to focus on the fate of individuals behind the public events and provide a richer perspective for news dissemination.

We can find some underlying facts in the data. The Chinese government’s decisions were somewhat effective in controlling the rate of spread of the epidemic in the country, resulting in a significant reduction in the number of confirmed cases and a large number of cured cases at a later stage.

The occupations of those who died in the fight against the epidemic included mainly medical and nursing staff, civil servants, police officers, teaching staff, volunteers, village cadres, workers, street office workers, etc. The ages of those who died on duty ranged from 21 to 77 years old. The causes of death are mainly overwork and death, but also include car accidents, viral infections, accidents, etc., of which men account for the majority.

In social media, the location of the help-seekers was concentrated in Wuhan, Hubei. In addition to hospital, infection, quarantine, etc., the text of the message also included dad, mom, and other high-frequency words. This confirms that the highest incidence rate is among people aged 50 and above and that the highest risk of death from NCCP is among men aged 60 and above with severe pneumonia.

These facts are helpful to arouse the public’s sense of social responsibility and empathy, which in turn promotes social concern and assistance for individual events.

Techniques/technologies used:

The data information used in this project is partly from the information of the Health Care Commission aggregated by DXY, The Paper, and other platforms, and partly from social network data obtained by crawler technology, combined with manual cleaning to organize the data set.

Adobe Illustrator and Adobe Photoshop were used in the design phase to draw the interface, and Adobe Effects was used to edit the video and audio.

The development phase mainly uses HTML5, CSS3, Javascript, GLSL, and other technologies. For the 3D scene on the web page, we chose to use the custom shader function provided by THREE.js, based on which we wrote vertex shaders and fragment shaders to achieve a more free rendering of the 3D scene. For 2D scenes in web pages, D3.js is used to control the graphical elements and JQuery and CSS are used to control the UI. in HTML pages, most of the animation effects are implemented in the Canvas element via the function window.requestAnimationFrame(). This function accepts a callback function as a parameter, which is executed at the frequency of the browser window redraw and is used to handle the animation effects. The redraw frequency is usually up to 60 frames per second, but in practice, the maximum number of frames depends on the user device.

What was the hardest part of this project?

The difficulties of this project were mainly focused on three stages: data collection, visualization design, and web development.

In the data collection phase, the data information publicly available through official channels was limited, so we selected four types of data: the number of confirmed and dead cases nationwide in the time period between the first appearance of confirmed cases in China and the lifting of the lockdown in Wuhan, the patient’s help information posted on the social media platform Weibo, the statistics of sacrificial anti-epidemic victims, and the cured cases in various provinces and cities nationwide. A crawler tool was combined with manual collation to obtain a reliable dataset.

During the design process, we established a coherent internal logic and visual style to complete the storytelling. Secondly, good graphic elements and visual mapping help the data information to be understood and remembered. Therefore, we used natural scenes from night to day, winter to spring to compare the development of the epidemic. And symbols containing contexts such as dust, windows, flowers, and carrier doves are used as visual factors. In addition, the data involved in this project are characterized by many attributes and large quantities, so a composite visual decoding approach is frequently used, incorporating variants of various charts such as scatter, pie, and bubble charts.

At the technical level, how to optimize a larger number of interactive images, videos, animations, 3D scenes, and other resources becomes a complex technical problem. To ensure a good user experience, we constructed a single-page-type web structure, dividing the whole web structure into four parts to browse.

What can others learn from this project?

Compared with traditional print media, the innovation of digital media technology has solved the problem of information overload to a certain extent, and data journalism and interactive journalism will increasingly appear in the news genre. Visualization not only helps professionals to research and analyze data but also helps general readers to understand, remember and empathize with news events based on data facts. The integration of illustrations, graphics, audio, video animation, audio, interactive web pages, and other media will enrich the form and enhance the efficiency of news dissemination.

Project links:

flowingboundary.com/

vimeo.com/506974751

mp.weixin.qq.com/s/ekElCB663_r75JydCI5uNw

www.thepaper.cn/newsDetail_forward_7913799