/Sinking

Sinking: the Titanic Story

Primary LanguageJavaScript

Sinking: the Titanic Story

Build Status

The story of Titanic, by data. https://sinking.azurewebsites.net/

Created by Anran Niu, August 2020

Acknowledgements

Why this project

I started working on this project as a task for a cool company, Quantiful's front end intern recruitment. It turns out to be fun and lots of new learning. Thank you Quantiful for such a special opportunity to explore data presentation!

Wave Effect

The wave effect is largely inspired by a Codepen.io project, CSS Wave Animation with a .png by @plavookac, and uses CSS code and png image from it.

How to Run the App Locally

$ git clone https://github.com/niuniuanran/Sinking.git sinking
$ cd sinking
$ npm install
$ npm start

Features

View Passengers on Titanic

table-preview

  • Only passengers who paid a fare is shown.

Sort Passengers

sort-preview

Filter Passengers

filter-preview

Survival Statistics Visualisation

stats-preview

Next Steps

Small Screen View

At this moment, the web page only works well on Desktop, and it will be nice if supports could be added for small screen.

More Stats Visualisation

There is potential for more visualisation on the data to explore patterns and provide insights - for example, showing the cross-effect of gender * price * survival number.