Mashups: Final Project

April 23, 2018


Web Page




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.





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:





The coding language I used to visualize data are:

  • D3.JS

  • P5.JS

  • Mapboxgl.js








Mapbox gl.js






Share on Facebook
Share on Twitter
Please reload

Read Another Post
© 2019 Mengzhen Xiao