Map Animation

[sophiewu6]

Overview

The goal is to generate an animation on TwitterMap to visualize how the number of tweets changes over time.

Plan

ToDo List

• Stuck on 50M data. Plan to look into former PR for solutions.
• Add transition effects and adjust time frame to make the animation smoother (CountMap completed)
• Replace Play button with Play and Pause images

  Basic idea

  Add a “Play” button under the time bar. Once the button is clicked, in timeseries/controller.js, use d3.timer to update the extent of time brush constantly, from minDate to maxDate. It will show the similar effect as the effect when we drag the brush on the time bar.

Progress

• Pure frontend demo: Used ~600 random generated data which is distributed in 50 states and 11 years. Map was made by TopoJson library and time slider was made by D3 library. When the botton is clicked, every state will be shown by different colors based on how large the number is.

  

• Added time slider and Play button animation to the current TwitterMap codebase.

  

• Tested on 500k dataset

• Added transition effect to countmap to make the animation smooth

Reference

• D3.js library
• dc.js library
• d3-timer

[sophiewu6]

Even though the time series result is already cached, countmap is still sending queries to Cloudberry because map result is not cached. Queries are sliced, which results in multiple returns of timeSeriesResult, and significantly slows down calculation and animation.

Solution: Will look into the PR about caching state/county/city population to avoid sending queries to Cloudberry, so we can just do the calculation in the frontend. Hopefully this will make both map animation and time series range change faster.

[XinyueHan7]

Case 1: Measles outbreak

In October 2018, there's a measles outbreak in Rockland County, New York. The time slider animation shows this sudden change in the popularity of discussion during that time range. Link to CNN news of measles outbreak: https://www.cnn.com/2019/04/09/health/measles-new-york-emergency-bn/index.html

Case 2: Notre Dame

When searching for Notre Dame, normally it’s popular only in Indiana because there is a university with this name there, but in April 2019, when Notre Dame in France was burned, the popularity in other states suddenly went up.

[baiqiushi]

Done.