Exploring Twitter API and Data Using Tweepy, Pandas and Matplotlib. — Part 2
I started the first part of this article here. This is a continuation where I explain how I displayed both my dataframes and the plots in a web page using Flask — a web application framework for Python.
First, I had to install flask. I make sure my virtual environment within my folder is still activated. Then I installed Flask — pip install flask. In a new file I called show_analysis.py, I will add the following code to import the necessary libraries and create the application object.
from io import BytesIO
from flask import Flask, render_template, send_file, make_response
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from tweets_analyzer import analyze, plot_graphs
import matplotlib.pyplot as plt
plt.style.use('ggplot')app = Flask(__name__)
Showing Dataframes:
Next I used decorators to link my index function to the base url.
@app.route('/')
def index():
analysis_details = analyze()
fans_by_housemate, fans_by_location, followers_of_fans_by_hm = analysis_details
fans_by_location_table = fans_by_location.pivot_table(index='location', columns='housemate_name', values='count') return render_template("index.html", fans_by_housemate_df=fans_by_housemate.to_html(),
followers_of_fans_by_hm_df=followers_of_fans_by_hm.to_html(), fans_by_location_df=fans_by_location_table.to_html())
What this code does is that on page load, on the index.html page, the dataframes returned as a result of calling the analyze() function will be converted to html table form. To display it, I created a templates folder within my project folder and created an index.html file with the emmet html broiler code. Within my html body, I added the following code:
<div class="dataframe">
<h2>Fans by Housemate Data Frame</h2>
{{ fans_by_housemate_df | safe }}
<a href="#fbh_bc">See Graph</a>
</div>
<div class="dataframe">
<h2>Average Number of Followers of Fans by Housemate Data Frame</h2>
{{ followers_of_fans_by_hm_df | safe }}
<a href="#fbh_bc">See Graph</a>
</div>
<div class="dataframe">
<h2>Fans of Housemates by Location</h2>
{{ fans_by_location_df | safe }}
<a href="#fbl_bc">See Graph</a>
</div>When I run my show_analysis.py script, and visit http://127.0.0.1:5000/ this is what my web page looks like:
Showing Charts
To show the plots from my analyze() function, I will use decorators to link the function that will create each image to their respective image urls. For example, to draw a bar chart of the number of twitter fans by housemates, I called my url /fans_by_hm_bar_chart/ then create a function called fans_by_hm_bar_chart().
@app.route('/fans_by_hm_bar_chart/')
def fans_by_hm_bar_chart():
figures = plot_graphs()
fig1 = figures[0]
canvas = FigureCanvas(fig1)
img = BytesIO()
fig1.savefig(img)
img.seek(0)
return send_file(img, mimetype='image/png')In this function, I get the figures from the plot_graphs() function I imported at the top then pick the first figure because figures is a list and items are added accordingly. I then proceed to draw the image and then send the image to the web page when the function is called.
In my index.html, I add the following:
<div class="chart" id="fbh_bc">
<h2>Fans by Housemate Bar Chart</h2>
<img src="/fans_by_hm_bar_chart/" alt="Fans By Housemate Bar Chart">
</div>I do similarly to draw the fans by location bar chart and call app.run() in if __name__ == “__main__”:.
#show_analysis.py
@app.route('/fans_by_location_bar_chart/')
def fans_by_location_bar_chart():
figures = plot_graphs()
fig2 = figures[1]
canvas = FigureCanvas(fig2)
img = BytesIO()
fig2.savefig(img)
img.seek(0)
return send_file(img, mimetype='image/png')if __name__ == "__main__":
app.run()
I also have to update the index.html with the url for the image. When this url is fetched, the function associated with it is run and the image is displayed.
<div class="chart" id="fbl_bc">
<h2>Fans of Housemates by Location</h2>
<img src="/fans_by_location_bar_chart/" alt="Fans of Housemates by Location Bar Chart">
</div>When you run the script again, the rest of the page looks like this:
Well this is how much I have done so far with this project. It tool me quite sometime to figure out how to show the images sequentially on the web page but after hours of google searches and scanning through tons of documentation and stack overflow pages I was able to do it. Nonetheless, I had so much fun doing this and I still look forward to doing more with this. Possibly getting the ratio of fans of each housemates that are verified twitter handles, the tweets with the highest retweet count etc.
The codes for this project can be found here: Tweet Streamer Analyzer.
If you enjoyed this article, don’t forget to share with your friends. Till next time!
