Server Side Visualization

Server-side で作る
Visualization



@muddydixon / NIFTY Corporation

東京Node学園祭2012 LTセッション

@muddydixon

{
"job": "Web Engineer"
, "office": "NIFTY Corporation"
, "interest": [
"JavaScript", "HTML"
, "hadoop", "Data Mining"
, "visualization" ]
}

Do you know D3.js ?

The Coolest JavaScript library for
Data representation

20121118130915

Problem

D3.js does not support
non modern browser

20121118130933

x

Goal

Applying D3.js to
non modern browser

Solution

Work D3.js on Server-side

Work D3.js on Server-side
= Node.js + phantomjs

INSTALL

$ git clone git@github.com:muddydixon/d3renderer.git
$ cd d3renderer
$ npm install && npm test

USAGE

require('d3renderer');
// enable to use 'body' from d3
var svg = d3.select('body').append('svg').attr('width', 400).attr('height', 300);
// d3 description
svg.selectAll('circle').data([1, 3, 5, 7]).enter()
.append('circle')
.attr('cx', function(d){ return 10 * d; }).attr('cy', function(d){ return 10 * d; })
.attr('r', function(d){ return 10 * d; });
// write down "png image" or "base64img data"
d3.render(function(err, base64img){ /* some */});

DEMO

Thank you for your attention

love <3

  • Node.js
  • phantomjs
  • D3.js

One more thing!