What are my options for MVC, GUI + Interactive Visualization in App Engine (python)?
Question:
I’m creating an app that allows users to query, manipulate, and explore a very large graph.
What’s the ‘best’ way to create a gui + visualization for my project?
By best I mean the following:
1. conforms to web standards, no flavor of the month solution
2. allows creative flexibility
3. intuitive, won’t require weeks to learn and months to master
Should I start diving into Django and learning how its MVC works? Everything I’ve read pisses on Django, but seems like the most used option for GAE.
I’m sorry if this isn’t coherent. These technologies are out of my comfort zone, so I have trouble searching for solutions and phrasing my questions.
Answers:
Does it have to be in python? The GAE has wonderful support for GWT. The GWT eclipse plugin can compile and deploy directly to the GAE with no further modification. The best solution that meets all three of your requirements will be to use GWT + GAE/J.
If you’re mainly looking for a charting/graphing solution, there are some good solutions based on Flash *gasp* that are pretty easy to use, such as AnyChart.
As a side note, If you’re designing any UI, knowing and understanding the MVC pattern is essential. Most other UI design patterns are a derivative of MVC, so you’ll probably be learning MVC regardless of what framework you choose.
Good luck
-tjw
App Engine is flexible on the UI side. The Python supports Django templates (0.96 out of the box, and 1.2 with a one-line config change). Django templates are easy to use, and are JavaScript toolkit neutral. I use jQuery, but that’s a personal choice that App Engine doesn’t impose. On the UI side, it’s a safe choice, and any time you put in to learning the Django template language and jQuery is portable beyond App Engine. I don’t see a lot of pissing on Django, but maybe I’m hanging out in different places.
Though you emphasize the UI side, I’d look first at how to map your large graph on to the App Engine datastore, and how the queries against your graph will perform. The nuances of the App Engine datastore often trip up people who have a lot of relational experience and expect tables and real foreign keys. It’s well-suited for storing graphs, but it’s worth exploring and prototyping your queries, so that you know what you’re getting in to.
The App Engine SDK is great for local (e.g., laptop in a coffee shop) development.
I’m a bit biased, though.
With your third requirement in mind: take a look at something like this Protovis interactive graph visualization, or this Infovis graph example (code). I don’t know the scope of your task but if you’re lucky you might not need to go too deep into the MVC weeds. Taking the second example, the role of the web backend is just 1) to provide some json object with the info you need to lay out, and 2) process responses. (BTW all these links are open source and well documented.) More concretely, say you have a graph with an interface like this: http://thejit.org/static/v20/Jit/Examples/Hypertree/example3.html (formatted source). An outline of how might it look could be as simple as:
Pseudo HTML:
<a_canvas_svg_or_webgl_object id="your_surface"> ... </a_canvas...>
<script src="... // one of the above visualization libraries
<script>
selector(#your_surface...
data = json.gets("/graph/minard/data.json"); //typical method name in these libs
data.do_stuff() // bunch of methods from the visualization guys...
// save state/user input to json object
button.onclick... // do an ajax post to an url like "/graph/a/data.json?extent=1234"
// use something like query string ie, for when 'extent' changes
etc...
Then on the server (example is GAE-compatible microframework Flask pseudocode (but not that pseudo)):
@app.route('/')
def frontpage():
return render_template('your_front_page.html')
@app.route('/graph/<graph_name>/<kind>')
def backend():
if request.method == 'POST':
gql_foo.save_user_stuff(request.json)
if request.method == 'GET':
if kind == 'data.json':
relevant_part_of_graph = request.args['extent']
requested_data = jsonify(db_query(parameters=graph_name...
return requested_data
else:
return 404
If none of this overlaps enough with your application space you will at least get something out of this answer by looking at d3, which is a bit lower level.
I’m creating an app that allows users to query, manipulate, and explore a very large graph.
What’s the ‘best’ way to create a gui + visualization for my project?
By best I mean the following:
1. conforms to web standards, no flavor of the month solution
2. allows creative flexibility
3. intuitive, won’t require weeks to learn and months to master
Should I start diving into Django and learning how its MVC works? Everything I’ve read pisses on Django, but seems like the most used option for GAE.
I’m sorry if this isn’t coherent. These technologies are out of my comfort zone, so I have trouble searching for solutions and phrasing my questions.
Does it have to be in python? The GAE has wonderful support for GWT. The GWT eclipse plugin can compile and deploy directly to the GAE with no further modification. The best solution that meets all three of your requirements will be to use GWT + GAE/J.
If you’re mainly looking for a charting/graphing solution, there are some good solutions based on Flash *gasp* that are pretty easy to use, such as AnyChart.
As a side note, If you’re designing any UI, knowing and understanding the MVC pattern is essential. Most other UI design patterns are a derivative of MVC, so you’ll probably be learning MVC regardless of what framework you choose.
Good luck
-tjw
App Engine is flexible on the UI side. The Python supports Django templates (0.96 out of the box, and 1.2 with a one-line config change). Django templates are easy to use, and are JavaScript toolkit neutral. I use jQuery, but that’s a personal choice that App Engine doesn’t impose. On the UI side, it’s a safe choice, and any time you put in to learning the Django template language and jQuery is portable beyond App Engine. I don’t see a lot of pissing on Django, but maybe I’m hanging out in different places.
Though you emphasize the UI side, I’d look first at how to map your large graph on to the App Engine datastore, and how the queries against your graph will perform. The nuances of the App Engine datastore often trip up people who have a lot of relational experience and expect tables and real foreign keys. It’s well-suited for storing graphs, but it’s worth exploring and prototyping your queries, so that you know what you’re getting in to.
The App Engine SDK is great for local (e.g., laptop in a coffee shop) development.
I’m a bit biased, though.
With your third requirement in mind: take a look at something like this Protovis interactive graph visualization, or this Infovis graph example (code). I don’t know the scope of your task but if you’re lucky you might not need to go too deep into the MVC weeds. Taking the second example, the role of the web backend is just 1) to provide some json object with the info you need to lay out, and 2) process responses. (BTW all these links are open source and well documented.) More concretely, say you have a graph with an interface like this: http://thejit.org/static/v20/Jit/Examples/Hypertree/example3.html (formatted source). An outline of how might it look could be as simple as:
Pseudo HTML:
<a_canvas_svg_or_webgl_object id="your_surface"> ... </a_canvas...>
<script src="... // one of the above visualization libraries
<script>
selector(#your_surface...
data = json.gets("/graph/minard/data.json"); //typical method name in these libs
data.do_stuff() // bunch of methods from the visualization guys...
// save state/user input to json object
button.onclick... // do an ajax post to an url like "/graph/a/data.json?extent=1234"
// use something like query string ie, for when 'extent' changes
etc...
Then on the server (example is GAE-compatible microframework Flask pseudocode (but not that pseudo)):
@app.route('/')
def frontpage():
return render_template('your_front_page.html')
@app.route('/graph/<graph_name>/<kind>')
def backend():
if request.method == 'POST':
gql_foo.save_user_stuff(request.json)
if request.method == 'GET':
if kind == 'data.json':
relevant_part_of_graph = request.args['extent']
requested_data = jsonify(db_query(parameters=graph_name...
return requested_data
else:
return 404
If none of this overlaps enough with your application space you will at least get something out of this answer by looking at d3, which is a bit lower level.