Mashups: Final Project


Web Page

Github

For my final project, I want to make a web page about cherry blossom related data in Japan. I would like to use different tools I learnt in this semester to do data visualization in order to compare their strengths and weaknesses.

DATA & API

The data I used in this web page are:

  • Cherry blossom blooming forecast (date of first bloom) - 2018 Season

  • Google Trends API: The value of the word "Sakura" being searched in Japan.

  • MongoDB API: How many times the "LOVE" button on my webpage being clicked.

1. Cherry blossom blooming forecast (date of first bloom) - 2018 Season

I tried to find an API for cherry blossom data, but it was no such public API. So I used the data shown on the web page of Japan National Tourism Organization to make a CSV file. Then I joined GeoJSON file about Japan map against the CSV file to make a JSON file which contains the geolocation data as well as the cherry blossom data. I used geojson-join.

Data from Japan National Tourism Organization

The CSV file of cherry blossom data

Part of the JSON file. See the whole JSON file here.

2. Google Trends API

I used Google Trends API to get the trend of the word "Sakura" being searched in Japan. By using a node.js npm called google-trends-api, I can search the trend of a keyword in a certain region and a certain time period.

The data returned from the API looks like this.

3. MongoDB API

In order to record how many times the "LOVE" button on my webpage being clicked, I used M-Lab’s database server. I created a database and a collection in MongoDB. And I used MongoDB API to access my database, upload data and view all the data that have been sent to that database.

To push and load the data, I used P5.js HttpPost() function and loadJSON() function.

The data I got from MongoDB API looks like this:

DATA VISUALIZATION

The coding language I used to visualize data are:

  • D3.JS

  • P5.JS

  • Mapboxgl.js

D3.JS

P5.JS

Mapbox gl.js


Archive
Read Another Post
© 2019 Mengzhen Xiao