https://github.com/d3-node/d3-node

Server-side D3 for static chart/map generation ✨📊
https://github.com/d3-node/d3-node

d3 data-visualization node

Last synced: about 13 hours ago
JSON representation

Server-side D3 for static chart/map generation ✨📊

• Host: GitHub
• URL: https://github.com/d3-node/d3-node
• Owner: d3-node
• Created: 2016-07-13T21:06:21.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-25T00:41:03.000Z (over 1 year ago)
• Last Synced: 2024-04-14T18:54:08.842Z (9 months ago)
• Topics: d3, data-visualization, node
• Language: JavaScript
• Homepage: https://bradoyler.com/projects/d3-node/
• Size: 1 MB
• Stars: 678
• Watchers: 15
• Forks: 68
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-d3 - d3-node - Static chart and map generation (Server side)
• awesome-d3 - d3-node - Static chart and map generation (Server side)
• awesome-d3 - d3-node - Static chart and map generation (Server side)

README

        
# D3-Node  

[![Build Status](https://github.com/d3-node/d3-node/actions/workflows/node.js.yml/badge.svg)](https://github.com/d3-node/d3-node/actions/workflows/node.js.yml)

[![Codecov](https://img.shields.io/codecov/c/github/d3-node/d3-node.svg)](https://travis-ci.com/d3-node/d3-node)

[![npm](https://img.shields.io/npm/dm/d3-node.svg)](https://www.npmjs.com/package/d3-node)

[![npm](https://img.shields.io/npm/l/d3-node.svg)](https://www.npmjs.com/package/d3-node)

Server-side D3 with ease  

> Tested on Nodejs v16 & up



[see examples >](examples)

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

### Why?

- Performance: pre-rendering allows offloading data processing, and network overhead

- Take advantage of the entire ecosystem: [npmjs.com](https://www.npmjs.com/)

- Static rendering of [Data-Driven Documents (D3.js)](https://d3js.org/)

- Portable SVG with [embedded stylesheets](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style)

- Easily adapt examples from [bl.ocks.org](http://bl.ocks.org/)

### Basic usage:

[![NPM](https://nodei.co/npm/d3-node.png?downloads=true&downloadRank=true)](https://nodei.co/npm/d3-node/)

__Create a SVG__

```javascript

 import { D3Node } from 'd3-node' // 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: 

```

### Advanced usage

__Setting container & insertion point via selector__

```javascript

 const options = { selector: '#chart', container: '
' }

 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: 


 d3n.chartHTML()   // output: 


```


__Inline SVG styles__

```javascript

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

 d3n.createSVG().append('g')

 d3n.svgString()

```

> Output

```html

   

     <![CDATA[ .test{fill:#000;} ]]>

   

   

```

__Create a canvas (for generating a png)__

```javascript

 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...](examples)

### Run Tests:

```

$ npm test

```

### TODOs:

- Add more examples: (remote data, world map)

- Create Gulp task

- Add option to inject css/js into html output