It aims to show more information in a popup window when the mouse hover a state, county or city. This extra information may be trend of the tweets count or others.
Add a simple popup window in countmap. It is guided by the tutorial of leaflet. By July 9.
Review some Libraries for chart, and the result is shown in next section. By July 10.
With the help of Qiushi, add the third party library to twittermap in Play! Framework. Given the details of how to add a new library to twiitermap below. By July 11.
With the help of Yang Cao, insert a demo line chart into popup window, using Chart.js. By July 12.
Discuss with Ruiyao, to know the data structure of caching data. By July 13.
Add place name and count information into popup window. By July 14.
Draw a same line graph with timeseries in the popup window. By July 18.
Draw a line chart for each state/county/city in the popup window. By July 19.
Change the line chart data from group by day to group by month. By July 22.
Polish line chart: Complement empty data points with count 0s, and unify the x axis with same time range. By July 24.
Polish line chart: Adjust the position of popup window to "top center" point of polygon. By July 25.
Fix the auto close bug of popup window. When the mouse moves away from the polygon, the popup window should close automatically. By July 26.
I encounter some problem about this topic, so I give the instructions below. Hope it can help others.
The document of playframwork may be help.
Visit WebJars, search webjars version of the library you want to use.
Copy the line in "Build Tool" column (the build tool we use is sbt), to "cloudberry/examples/twittermap/project/dependencies.scala".
Turn off the server of twittermap, and restart it. The new library will be downloaded by build tool.
Add the required .js into head tag of "cloudberry/examples/twittermap/web/app/views/twittermap/main.scala.html".
If you don't know where the .js located at, check the folder "cloudberry/examples/twittermap/web/target/web/web-moudles/main/webjars/lib"
baiqiushi
commented
6 years ago
Overview
It aims to show more information in a popup window when the mouse hover a state, county or city. This extra information may be trend of the tweets count or others.
An example in Tableau:
Progress
Set up the environment by quickstart of cloudberry. By July 5.
Add a simple popup window in countmap. It is guided by the tutorial of leaflet. By July 9.
Review some Libraries for chart, and the result is shown in next section. By July 10.
With the help of Qiushi, add the third party library to twittermap in Play! Framework. Given the details of how to add a new library to twiitermap below. By July 11.
With the help of Yang Cao, insert a demo line chart into popup window, using Chart.js. By July 12.
Discuss with Ruiyao, to know the data structure of caching data. By July 13.
Add place name and count information into popup window. By July 14.
Draw a same line graph with timeseries in the popup window. By July 18.
Draw a line chart for each state/county/city in the popup window. By July 19.
Change the line chart data from group by day to group by month. By July 22.
Polish line chart: Complement empty data points with count 0s, and unify the x axis with same time range. By July 24.
Polish line chart: Adjust the position of popup window to "top center" point of polygon. By July 25.
Fix the auto close bug of popup window. When the mouse moves away from the polygon, the popup window should close automatically. By July 26.
The Libraries for Chart
Requirement
Libraries
angular-chart.jsngx-chartsChoose Chart.js
How to add a third party library into Twittermap
I encounter some problem about this topic, so I give the instructions below. Hope it can help others. The document of playframwork may be help.
To Do List
Add a popup windowChose a chart librariesDraw a demo line chartMove count, population into popup windowDraw a line graph according to cache dataPolish line chart