seantis/d3-renderer

Name: d3-renderer

Owner: seantis gmbh

Description: null

Created: 2016-12-23 14:04:37.0

Updated: 2016-12-23 14:04:55.0

Pushed: 2017-03-21 14:33:17.0

Homepage: null

Size: 76

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

Installation

Setup the Development Environment
install d3-renderer

Or

clone git@github.com:seantis/d3-renderer.git
3-renderer
install

Now you can run the service:

 .

Or the PhantomJS version:

de_modules/.bin/phantomjs server.js

The node version is faster but does only support SVG generation at the moment and bounding boxes only to some extent.

Using the service

Simply POST your code to http://127.0.0.1:1337 and arguments and receive the SVG, PNG or PDF in return.

Client side code

The service expects code following a slightly modified version of Mike Bostocks reusable charts pattern. Define your code as follows.

myNewChart = function(params) {
var data = {};
// add more parameters such as width, height, ...

if (params) {
    if (params.data) data = params.data;
    // initalize the other parameter ...
}

var chart = function(container) {
    var svg = d3.select(container).append('svg')
        .attr('xmlns', "http://www.w3.org/2000/svg")
        .attr('version', '1.1');
    // more rendering ...
    return chart;
};

// optionally add chained getter/setters ...

return chart;

The code can then be used locally as follows:

chart = barChart({option: value})(el);

or as follows:

chart = barChart(el);
elect(..).call(chart);
POST request

Send the script together with the parameters as JSON to http://127.0.0.1:1337/d3/svg, http://127.0.0.1:1337/d3/pdf (PhantomJS only) or http://127.0.0.1:1337/d3/pdf (PhantomJS only). Add the scripts in order you want to run them (the latest d3js version is already set up, no need to include it).


"scripts": [
    "/* content of d3 plugins (optionally) */",
    "/* your code */",
],
"main": "myNewChart",
"params": {
    "data": {}
}

Note that the PNG and PDF is returned Base64 encoded due to a nasty bug (https://github.com/ariya/phantomjs/issues/13026).

The PNG and PDF might need to know the size of the viewport, you can specify them by adding a viewport_width and viewport_height to the params. Alternatively, you can implement a getter width and/or height in your chart.

Improvements

PDF for the node version

There are some solutions for PDF rendering of SVG images:


This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.