Server Side Visualization

nodejs d3 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

d3-renderer

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!