StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This may prove to be a useful answer to your question if you take out that "using node.js" stipulation. If it doesn't help you, maybe later visitors will find it interesting.</p> <p>I've been working for some time to solve this same problem (server-side d3 rasterizing), and I've found <a href="http://phantomjs.org/">PhantomJS</a> to be the best solution. </p> <p>server.js:</p> <pre><code>var page = require('webpage').create(), renderElement = require('./renderElement.js'), Routes = require('./Routes.js'), app = new Routes(); page.viewportSize = {width: 1000, height: 1000}; page.open('./d3shell.html'); app.post('/', function(req, res) { page.evaluate(new Function(req.post.d3)); var pic = renderElement(page, '#Viewport'); res.send(pic); }); app.listen(8000); console.log('Listening on port 8000.'); </code></pre> <p>Routes.js: <a href="https://gist.github.com/3061477">https://gist.github.com/3061477</a><br> renderElement.js: <a href="https://gist.github.com/3176500">https://gist.github.com/3176500</a></p> <p>d3shell.html should look something like:</p> <pre><code><!DOCTYPE HTML> <html> <head> <title>Shell</title> </head> <body> <div id="Viewport" style="display: inline-block"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.8.1/d3.v2.min.js" type="text/javascript"></script> </body> </html> </code></pre> <p>You can then start the server with <code>phantomjs server.js</code> and POST d3=[d3 code that renders to #Viewport], and the server will respond with a base64-encoded png.</p> <p>(Requires PhantomJS 1.7 or higher.)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload