-
-
Save dejan-stankovic/ded28c53e8ef3bbbb310dd20bc4d24be to your computer and use it in GitHub Desktop.
SVG to PNG render with Node and D3.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment