Server side rendering requiring js library. Svg to png. D3.js

1,294 views
Skip to first unread message

Andrew

unread,
Jun 29, 2012, 5:06:20 PM6/29/12
to web...@googlegroups.com
Hello,
I have been using the wonderful d3 library with web2 py. See http://d3js.org/ for more information. But it is aimed at the browser. It is great to visualise json output from web2py.

One thing it does is generate svg content. I would like to be able to generate a png image from the svg definition, but on the server. I know it's possible with phantom.js and node.js (from another group: https://groups.google.com/forum/m/?fromgroups#!topic/d3-js/XHbidy5pY8A), but I'm not sure if they fit into a web2py context, or if that is the right approach with web2py. Does something like a "Headless web kit browser" fit into web2py approach?
.
I'm wondering is it possible, using something like response.render to generate the svg in a controller and generate a png image (which I could save or include in PDF output). Would I include these other libraries, but where, in the view?

Anyway, I think d3 is fantastic and it would be great to be able to exploit it (more!) in web2py. Happy to put up some simple examples that show how to do it (the browser part at least)

Thanks

Anthony

unread,
Jun 30, 2012, 10:28:04 AM6/30/12
to web...@googlegroups.com
I think you will need some kind of headless browser to execute the JS on the server. Maybe something like https://github.com/ryanpetrello/python-zombie or http://code.google.com/p/py-webkit-html-manipulator/.

Anthony

Derek

unread,
Jul 2, 2012, 6:13:12 PM7/2/12
to web...@googlegroups.com
OP said he was interested in doing it on the server, but doing it on the client can reduce server load and perhaps that will work for you. You could take the SVG and render it to a canvas and then export the canvas to PNG. Here is a javascript library which does such a thing.



Thanks,
Derek

On Monday, July 2, 2012 3:48:04 AM UTC-7, Martin Felder wrote:
Hi Andrew,

I'm currently looking for a good data vis toolkit for web2py. Currently we are plotting things with matplotlib in the background and display the generated PNGs, but that feels rather awkward and is not interactive (ok, I could generate SVGs and fiddle with them using StringIO and XML parsing, but that seems to convoluted to me).

Since my MS Office using clientele can't deal with SVGs, I'm very interested in how the PNG conversion issue turns out.

Coming back to your offer, could you perhaps post a simple example on how to integrate web2py and d3.js? For now I'm particularly interested in the ingenious barcharts example on http://mbostock.github.com/d3/ex/stack.html - how do I replace the faux data generation functions with a web2py controller passing a data array?

Thanks,
Martin

Andrew

unread,
Jul 4, 2012, 1:36:52 AM7/4/12
to web...@googlegroups.com
Hi Martin,

Sure, just give me another day or two, I'll make a simple SQLite example of the d3one you mentioned.  It isn't too complex to hook d3 up to a web2py json (or csv) output.  I'm still experimenting in getting the graphs to dynamically update, and to also allow database updates from user actions (such as dragging and dropping to establish relationships).  d3 has a learning curve, so my attempts so far a proofs of concepts without a lot of flashy layouts.

Hi Derek,   I't can be done without too much hassle from the browser, but I need to cater for IE users, and also to do some batch processing and report output.

Martin Felder

unread,
Jul 19, 2012, 3:13:35 AM7/19/12
to web...@googlegroups.com
Hi Andrew,

did you perchance get to do this already? I'm still waiting eagerly ;)

Thanks Martin

Andrew

unread,
Jul 19, 2012, 6:53:39 AM7/19/12
to web...@googlegroups.com
That data generator was harder than it looked. I'm getting there but I'll do a force layout first, which has been my focus.
Reply all
Reply to author
Forward
0 new messages