Skip to content

Instantly share code, notes, and snippets.

@tomgp
Last active August 10, 2025 22:10
Show Gist options
  • Select an option

  • Save tomgp/c99a699587b5c5465228 to your computer and use it in GitHub Desktop.

Select an option

Save tomgp/c99a699587b5c5465228 to your computer and use it in GitHub Desktop.

Revisions

  1. tomgp revised this gist Jun 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    #Server side SVG via D3 & jsdom
    very simple example

    a very simple example

    Get going:

  2. tomgp revised this gist Jun 23, 2015. 2 changed files with 3 additions and 3 deletions.
    4 changes: 2 additions & 2 deletions package.json
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    {
    "name": "simple-node-d3",
    "version": "1.0.0",
    "description": "",
    "description": "Serverside SVG via D3 & jsdom",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "author": "[email protected]",
    "license": "ISC",
    "dependencies": {
    "d3": "^3.5.5",
    2 changes: 1 addition & 1 deletion readme.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    #Serverside SVG via D3 & jsdom
    #Server side SVG via D3 & jsdom
    very simple example

    Get going:
  3. tomgp revised this gist Jun 23, 2015. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,9 @@ very simple example

    Get going:

    `npm install

    `node pie.js
    ```
    npm install
    node pie.js
    ```

    example usage in index.js
  4. tomgp revised this gist Jun 23, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,8 @@ very simple example

    Get going:

    ```npm install
    `npm install

    ```node pie.js
    `node pie.js

    example usage in index.js
  5. tomgp revised this gist Jun 23, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion readme.md
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,9 @@
    very simple example

    Get going:

    ```npm install
    ```node pie.js
    example usage in ```index.js
    example usage in index.js
  6. tomgp created this gist Jun 23, 2015.
    15 changes: 15 additions & 0 deletions package.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    {
    "name": "simple-node-d3",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
    "d3": "^3.5.5",
    "jsdom": "^3.1.2"
    }
    }
    57 changes: 57 additions & 0 deletions pie.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    var fs = require('fs');
    var d3 = require('d3');
    var jsdom = require('jsdom');

    var chartWidth = 500, chartHeight = 500;

    var arc = d3.svg.arc()
    .outerRadius(chartWidth/2 - 10)
    .innerRadius(0);

    var colours = ['#F00','#000','#000','#000','#000','#000','#000','#000','#000'];

    module.exports = function( pieData, outputLocation ){
    if(!pieData) pieData = [12,31];
    if(!outputLocation) outputLocation = 'test.svg';

    jsdom.env({
    html:'',
    features:{ QuerySelector:true }, //you need query selector for D3 to work
    done:function(errors, window){
    window.d3 = d3.select(window.document); //get d3 into the dom

    //do yr normal d3 stuff
    var svg = window.d3.select('body')
    .append('div').attr('class','container') //make a container div to ease the saving process
    .append('svg')
    .attr({
    xmlns:'http://www.w3.org/2000/svg',
    width:chartWidth,
    height:chartHeight
    })
    .append('g')
    .attr('transform','translate(' + chartWidth/2 + ',' + chartWidth/2 + ')');

    svg.selectAll('.arc')
    .data( d3.layout.pie()(pieData) )
    .enter()
    .append('path')
    .attr({
    'class':'arc',
    'd':arc,
    'fill':function(d,i){
    return colours[i];
    },
    'stroke':'#fff'
    });

    //write out the children of the container div
    fs.writeFileSync(outputLocation, window.d3.select('.container').html()) //using sync to keep the code simple

    }
    });
    }

    if (require.main === module) {
    module.exports();
    }
    8 changes: 8 additions & 0 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    #Serverside SVG via D3 & jsdom
    very simple example

    Get going:
    ```npm install
    ```node pie.js
    example usage in ```index.js