Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SVG to PNG render with Node and D3.js
This example expects to have d3.min.js and d3.layout.min.js in the same directory as pie.js and pie_serv.js.
Run with node pie_serv.js
function insertPie(selector, w, h, allocation) {
var el = window.document.querySelector(selector),
rToEdge = Math.min(w, h) / 2,
shadow = 10,
r = rToEdge - shadow,
gradients = [
["#70c046", "#ace98c"],
["#b847af", "#f369e8"],
["#2293bb", "#6ac9ea"],
["#ebab17", "#f4cf66"],
["#5d4ef9", "#8c81ff"],
["#dc570e", "#ff7e00"],
["#a57005", "#daa73e"],
["#e19e7d", "#ffc8ad"],
["#ef45a8", "#ff7bc7"],
["#b8124a", "#f7296c"],
["#065190", "#1a72bd"],
["#296c30", "#52a95b"]],
slices = d3.layout.pie()(allocation),
arc = d3.svg.arc()
.startAngle(function(d) { return d.startAngle; })
.endAngle(function(d) { return d.endAngle; })
.innerRadius(0)
.outerRadius(r);
var vis = d3.select(el)
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var defs = vis.append("svg:defs");
//Define our color gradients
for (var i=0,l=gradients.length;i<l;i++) {
var gradientColors = gradients[i];
var gradient = defs.append("svg:radialGradient")
.attr("id", "grad-"+i)
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", r);
gradient.append("svg:stop")
.attr("offset", 0)
.attr("stop-color", gradientColors[1]);
gradient.append("svg:stop")
.attr("offset", .3)
.attr("stop-color", gradientColors[1]);
gradient.append("svg:stop")
.attr("offset", 1)
.attr("stop-color", gradientColors[0]);
}
//Define our drop shadow
var shadow = defs.append("svg:radialGradient")
.attr("id", 'pie-shadow')
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", rToEdge);
var nStops = 5, beginGradient = 1 - r / (rToEdge * 4);
for (var i = 0; i < nStops; i++) {
var stopLocation = beginGradient + (1 - beginGradient) * (i + 1) / nStops;
shadow.append("svg:stop")
.attr("offset", stopLocation)
.attr("stop-color", "#000")
.attr("stop-opacity", i && 10 * (stopLocation - 1) * (stopLocation - 1));
}
//Create our shadow
vis.append("svg:circle")
.attr("r", rToEdge)
.style("fill", "url(#pie-shadow)");
//Build Pie
vis.selectAll("path").data(slices)
.enter().append("svg:path")
.attr("d", arc)
.style("fill", function(d, i) { return "url(#grad-"+i+")"; });
return el;
}
var http = require('http'),
url = require('url'),
jsdom = require('jsdom'),
child_proc = require('child_process'),
w = 400,
h = 400,
scripts = ["file://"+__dirname+"/d3.min.js",
"file://"+__dirname+"/d3.layout.min.js",
"file://"+__dirname+"/pie.js"],
htmlStub = '<!DOCTYPE html><div id="pie" style="width:'+w+'px;height:'+h+'px;"></div>';
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'image/png'});
var convert = child_proc.spawn("convert", ["svg:", "png:-"]),
values = (url.parse(req.url, true).query['values'] || ".5,.5")
.split(",")
.map(function(v){return parseFloat(v)});
convert.stdout.on('data', function (data) {
res.write(data);
});
convert.on('exit', function(code) {
res.end();
});
jsdom.env({features:{QuerySelector:true}, html:htmlStub, scripts:scripts, done:function(errors, window) {
var svgsrc = window.insertPie("#pie", w, h, values).innerHTML;
//jsdom's domToHTML will lowercase element names
svgsrc = svgsrc.replace(/radialgradient/g,'radialGradient');
convert.stdin.write(svgsrc);
convert.stdin.end();
}});
}).listen(8888, "127.0.0.1");
console.log('Pie SVG server running at http://127.0.0.1:8888/');
console.log('ex. http://127.0.0.1:8888/?values=.4,.3,.2,.1');
@oulan

This comment has been minimized.

Copy link

oulan commented Jan 20, 2012

It's great.

@aarthi0808

This comment has been minimized.

Copy link

aarthi0808 commented Sep 17, 2013

Hi,
I tried this example in MAC. For me its not working. While executing it throws error:
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:980:11)
at Process.ChildProcess._handle.onexit (child_process.js:771:34)

I don't know why it is. Any idea about this issue??

@arpadtamasi

This comment has been minimized.

Copy link

arpadtamasi commented Mar 17, 2014

You need librsvg: brew install librsvg

@serganus

This comment has been minimized.

Copy link

serganus commented Jan 29, 2016

Doesn't work still.

Some issue with libpng. Any suggestions on how to install on OSX?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.