Oyster!

The world is your Oyster!

An interactive world map SPA mainly using D3.js, allowing users to explore the information and comments of each country by clicking, zooming and dragging.

• Implemented with d3-geo API to build a spherical shape map.
• Rendered country shapes and borders by TopoJSON.
• Combined d3.drag and d3.zoom to allow dragging within the zoomable earth SVG.
• Initiated search functionality by Chioces.js.
• Collected auto-update country data from The World Factbook produced by CIA.
• Applied rating system and wishlist functionality by Cloud Firestore to get realtime updates.

Demo Link

https://oyster-anping.web.app/

Test Account

• Email: test@test.test
• Password: testtest

Technologies

Front-End

• HTML
• CSS
• JavaScript(ES6)

JavaScript Library

• D3.js

Database

• Cloud Firestore
• Firebase Authentication

Packages

• TopoJSON
• Versor
• Choices.js
• SweetAlert2

Tools

• Version Control: Git, GitHub
• Agile Planning Development: Trello (Scrum)
• Lint Tools: ESLint, Prettier

Website Structure

Features

Drag the globe at will.

Click any countries you like.

Search countries by entering the name.

Login to create your own map.

Explore other's map.

Leave your comments!

Future Features

• Visualize conutry information with D3.
• Refactor website with Svelte.js