Health Globe

Project

Health Globe is a 3D interactive web application designed to raise people's awareness of global healthcare issues through fun challenges, infographic lessons, interactive dialogue, and extra bonus.

View Live Site

My role

Collaborator: Ray Chen
My responsibilities were concept, interface design & development, infographics design, video making.

Tools and technologies

Photoshop, Illustrator, Keynote

D3.js, WebGL using ThreeJS, HTML5/CSS3, Speech Recognition, Google Translate API

Have you ever cared about people’s health in another country? Have you ever considered that lessons learnt in other countries with health problem might be a good instruction for your lifestyle? Have you associated your health with the world’s health issues? Have you linked health awareness with education?

 

How it works?

This app challenges users with 12 healthcare questions and topics.

The app presents an infographic video about the general statistics in that country and the scientific reasons for why people in that country are known to have this healthcare issue.
main item
main item

After watching the video, the user hears greeting in the country’s native language then the app asks the user to repeat the vow and uses the speech recognition to identify what the user say.

Once the user successfully take a vow, a bonus is displayed in the form of a symbolic representation of that country.

main item
main item

List top ten countries by the topic.

Show different countries' symbolic representations.

main item
main item

Architecture

main item
Health Globe utilizes d3.js to generate Scalable Vector Graphics (SVG) paths representing the shape of countries, and extrudes the 2D shapes into a 3D geometry using Three.js.

The original shape data is converted into geoJSON format, which can be parsed using Javascript in our application

HTML, CSS and JQuery are used to create the interactive panel

HTML5 speech webkit is embeded in order to to recognize users’ speech input