Mashups: Final Project

April 23, 2018

 

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

 

 

 

 

 

Share on Facebook
Share on Twitter
Please reload

Archive
Read Another Post
© 2019 Mengzhen Xiao