0

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.

Cole Robertson
  • 599
  • 1
  • 7
  • 18
  • The reason I didn't use the `%(tweets)s` syntax, is that the github example doesn't use flask, or an external html template. It rather loads a string from within python. I'm trying to structure the app using `flask` conventions, so want to pass the json to my html from python, rather than past the html into my python script. – Cole Robertson Jul 02 '19 at 15:05
  • maybe try --> `{{tweets}}` – WhiteHat Jul 04 '19 at 16:35

0 Answers0