DATS-SHU235 Information Visualization Final Project

This is our final project for the NYU Shanghai DATS-SHU235 Information Visualization course

Team Members

by alphabetical order

Ming Xian [email protected], Silvey Yu [email protected], Mingqian Zheng [email protected]

Try Our Visualization Webpage!

https://hogwild.github.io/infovis2022spring/team7/index.html

Class Project Gallery (NYU Shanghai InfoVis 2022 Spring)

https://hogwild.github.io/infovis2022spring/

What It Is

This is a visualization of world happiness scores from 2015 to 2021. It has the following:

(1) We show the geographical patterns of happiness scores with a color map.

(2) We used a multiple line chart to display average happiness score of different regions (continents).

(3) A sorted bar chart is used to display the top X happiest countries by descending order.

(4) A pie chart of the different contributing factors of happiness score will be displayed when the mouse hovers over an area on the color map.

(5) Linked highlighting is used between colorMap-multipleLineChart, colorMap-barChart.

Data

World Happiness Dataset 2015-2022 https://www.kaggle.com/datasets/mathurinache/world-happiness-report

Packages

d3, react, rechart

Development Tool

Visual Studio Code

Run Locally

npm install

npm i recharts

npx webpack server

Screenshots

Initial view

Linked highlighting of 3 charts

Linked highlighting (barChart -> GeoMap)

Linked highlighting (lingChart -> GeoMap)

A very beautiful tooltip on mouse over