/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.

Primary LanguageJavaScript

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.

Main Page

Demo Link

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

Test Account

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

Structure

Features

Drag the globe at will.

feature1

Click any countries you like.

feature2

Search countries by entering the name.

feature3

Login to create your own map.

feature4

Explore other's map.

feature5

Leave your comments!

feature6

Future Features

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