I'm trying to build a wordtree data visualisation website element using google word trees, and flask
.
The approach I've taken is based on this answer, including attempting to implement the formatting recommended here, and I've also tried following this tutorial, but my word_trees.html
just keeps rendering a blank page.
Apart from the data loading from a much larger, though equivalent .csv
in the actual application, the relevant parts of app.py
are:
from flask import Flask, render_template
import pandas as pd
import gviz_api
#create to data
lst = ["You've stolen a 'PIZZA' my heart! @CfgLaw Than",
"Did your workplace buy you pizza for #national",
"So last week on #NationalPizzaDay I had plans|",
"Last week it was #NewStartersDay and #National",
"@JurysInnsHotels #NationalPizzaDay Wow! Iām dr"]
df = pd.DataFrame({'text':lst})
#initiate app
app = Flask(__name__)
#create gvis formatted data
def get_data():
# Creating the data
description = {"text": ("string", "Text")}
data = [{"text":"{}".format(text)} for text in df.text]
# Loading it into gviz_api.DataTable
data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
# Creating a JSon string
json_string = data_table.ToJSon()
return json_string
#pass data to template
@app.route("/")
def word_trees():
data = get_data()
return render_template('word_trees.html',tweets=data)
if __name__ == "__main__":
app.run(debug=True)
And word_trees.html
is:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(tweets);
);
var options = {
wordtree: {
format: 'implicit',
word: 'pizza',
type: 'double'
}
};
var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
I expect the app to render a wordtree based on the data in df.text
, but it keeps rending a blank page.