d3node-piechart's Introduction

D3-Node

Server-side D3 with ease

Tested on Nodejs v10 & up

Why?

Performance: pre-rendering allows offloading data processing, and network overhead
Take advantage of the entire ecosystem: npmjs.com
Static rendering of Data-Driven Documents (D3.js)
Portable SVG with embedded stylesheets
Easily adapt examples from bl.ocks.org

Basic usage:

Create a SVG

 const D3Node = require('d3-node')
 const d3n = new D3Node()      // initializes D3 with container element
 d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
 d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>

Advanced usage

Setting container & insertion point via selector

 const options = { selector: '#chart', container: '<div id="container"><div id="chart"></div></div>' }
 const d3n = new D3Node(options) // initializes D3 with container element
 const d3 = d3n.d3
 d3.select(d3n.document.querySelector('#chart')).append('span') // insert span tag into #chart
 d3n.html()   // output: <html><body><div id="container"><div id="chart"><span></span></div></div></body></html>
 d3n.chartHTML()   // output: <div id="chart"><span></span></div>

Inline SVG styles

 const d3n = new D3Node({styles:'.test {fill:#000;}'})
 d3n.createSVG().append('g')
 d3n.svgString()

Output

<svg xmlns="http://www.w3.org/2000/svg">
   <defs>
     <style type="text/css"><![CDATA[ .test{fill:#000;} ]]></style>
   </defs>
   <g></g>
<svg>

Create a canvas (for generating a png)

 const canvasModule = require('canvas'); // supports node-canvas v1 & v2.x
 const d3n = new D3Node({ canvasModule }); // pass it node-canvas
 const canvas = d3n.createCanvas(960, 500);
 const context = canvas.getContext('2d');
 // draw on your canvas, then output canvas to png
 canvas.pngStream().pipe(fs.createWriteStream('output.png'));

See examples for more...

Run Tests:

$ npm test

TODOs:

Add more examples: (remote data, world map)
Create Gulp task
Add option to inject css/js into html output

d3node-piechart's People

Contributors

Stargazers

Watchers

d3node-piechart's Issues

My pie color is black

the current version of d3 (version 5)
can't use d3.schemeCategory20b

Fix documentation errors

Following help from https://stackoverflow.com/questions/69778492/best-way-to-use-recent-d3-versions-to-produce-pngs-from-node-js/69827159#69827159, offering documentation fix.

No png file is generated.

My code is like:

const fs = require('fs');
const output = require('d3node-output');
const d3 = require('d3-node')().d3;
const d3nPie = require('d3node-piechart');

const csvString = fs.readFileSync('./data.csv').toString();
const data = d3.csvParse(csvString);
const options = {width: 200, height: 200};

output('./export', d3nPie({ data: data }), options);

After I run the above code, these files are generated: export.html and export.svg, but not export.png.

How can I generate png as well?

Thanks!

Recommend Projects