Twitter Trend Analyzer

Source Code

Slides

Description

• Twitter is one of popular social networking tools to share our think or news, and it will rapidly spread across the worlds.
• This project is a web application to collect the Twitter's feeds related to the specific word, and then provide the user a daily trend by using a real-time linear chart and geographical chart.

Data Flows

1. Search Bar: user can input his/her own interested keyword such as “Samsung” or “Apple
2. Real-time Tweets: Once user start the program with keyword, the streamed tweets are appeared in this layer.
3. Linear Chart: The responsive chart will also start by using the streamed data so that user can easily understand what’s going on in the real-time
4. Geographical Chart: Similar as linear chart, geographical chart will show the location of user who did post related of the keyword.

Specifications

Data Handling

index.js

// Twitter Stream API

app.get('/streamTweets', function(request, response){
  var keyword = request.param('keyword');
  response.set('Content-Type', 'application/javascript');
  client.stream('statuses/filter', {track: keyword}, function(stream) {
    stream.on('data', function(event) {
      //console.log(event && event.text);
      response.send(JSON.stringify(event));
    });

    stream.on('error', function(error) {
      //console.log(error);
    });
  });

});

public/js/script.js

...
chart: {
          ...
          events:{
            load: function () {
              var self = this;

              socket.on('tweets', (tweets) =>{
                  // DOM appending
                  if(is_started === 1){

                    const { created_at } = $.parseJSON(tweets);

                    const date = moment(created_at, 'dd MMM DD HH:mm:ss ZZ YYYY', 'en').format("YYYYMMDDhmmss");

                    if(global_datas[date] === null || global_datas[date] === undefined)  global_datas[date] = 1;
                    else {
                      global_datas[date]++;
                    }

                    var date2 = moment(created_at).toDate();
                    self.series[0].addPoint([moment(created_at, 'dd MMM DD HH:mm:ss ZZ YYYY', 'en').toDate().getTime(), global_datas[date]],true,false);//add to last
                  }
              });
                }
          }
      },

Chart Libraries

1) HighCharts: http://highchart.com

• Http://www.highcharts.com/ Enter the site and go to the first download. (The current version is 3.0.9.)
• After downloading the module, extract it to a specific directory.
• Enter the following script in the HTML file:
• <Script src = "directory/highcharts.js">
• <Script src = "directory/highcharts-more.js">
• <Script src = "directory/modules/exporting.js">
• Then draw the graph in JavaScript. Please refer to the following reference or demo site for how to draw the graph.
• API reference site: http://api.highcharts.com/highcharts
• Demo site: Http://www.highcharts.com/demo/ Highcharts span up to 1000 on Internet Explorer. Perhaps the memory limit is there. The graph type can be selected from the demo site. The high chart has a different shape of the json arrangement of the X and Y axes. The data corresponding to the X axis must be made like this. This is the array type of json. You can assign the x-axis data to the x-axis of the high chart and draw the series by assigning the y-axis value.

2) Google Map API: https://developers.google.com/maps/?hl=ko

How to Run

• Node.js
• Twitter Developer Keys (See: https://developer.twitter.com/en/docs/basics/authentication/guides/access-tokens)
• Google Map API Keys (See: https://developers.google.com/maps/documentation/embed/get-api-key)

1. Clone the repository: git clone https://www.github.com/IkwhanChang/twitter-trend-analyzer.git
2. Go to twitter-trend-analyzer folder
3. Install dependencies: npm i or npm install (make sure you already installed the node)
4. Go to index.js file and replace Twitter keys for yours

// Twitter Settings

var client = new Twitter({
  consumer_key: '[YOUR_CONSUMER_KEY]',
  consumer_secret: '[YOUR_CONSUMER_SECRET]',
  access_token_key: '[YOUR_ACCESS_TOKEN_KEY]',
  access_token_secret: '[YOUR_ACCESS_TOKEN_SECRET]'
});

5. Go to /public/js/script.js file and replace Google Map API key for yours

  const google_api_key = "[YOUR_GOOGLE_API_KEY]";

6. Run the command: node index.js
7. Open the browser and connect: http://localhost:5000/

How to use

• Usage is very simple. Just write down the keyword that you want to find, click the [Start] Button, then see the result via Charts and list of result in right sidebar. The data will be automatically updated. If you want to stop, then click the [Stop] button.
• In the linear charts, you can see the result of streamed Twitter data. The x-axis is time and y-axis is number of twits. Also, you can see the geographical charts that has Twitter icon of user's location.
• If you wish to download of the result, simply click the [Download] button. Then you can get the CSV file and use of it whatever you wants.

License