etpinard/ plotly.js-in-node

## plotly.js-in-node

      
    Raw
  

               plotly.js-in-node
            
          
## .gitignore
node_modules
npm-debug.log*

## README.md

      
    Raw
  

              README.md
            
          
    Observations


something is up with selector containing not e.g. 'path:not([d])'
must remove getComputedTextLength method in Plots.addLinks
must shim XMLSerializer (wait for jsdom to natively support it)
some problem with canvas maybe??

toImage with non-svg format result in Segmentation faults


## index.js
var fs = require('fs');
var path = require('path');
var jsdom = require('jsdom');

var PATH_TO_PLOTLYJS = require.resolve('plotly.js/dist/plotly.js');
var plotlySrc = fs.readFileSync(PATH_TO_PLOTLYJS, 'utf-8');

var html = `
<body>
    <div id="graph"></div>
</body>`;

var data = [{
    x: [1,2,3],
    y: [2,1,2],
    mode: 'markers',
    marker: {
        size: 20,
        color: 'green'
    }
}];

var layout = {

};

var config = {
    showLinks: false
}

var imageOptions = {
    format: 'svg'
};

var OUTFILENAME = path.join(__dirname, 'out.' + imageOptions.format);

var virtualConsole = jsdom.createVirtualConsole();
virtualConsole.on('log', (message) => {
    console.log('console.log called ->', message);
});
virtualConsole.on('jsdomError', (message) => {
    console.error('Error ->', message);
});

jsdom.env({
    html: html,
    src: [plotlySrc],

    // Taken from: https://gist.github.com/hugolpz/1c34e14d8b7dd457f802 (you
    // need query selector for D3 to work)
    features: { QuerySelector: true },

    virtualConsole: virtualConsole,

    done: main
});

function main(err, window) {
    if(err) throw err;

    var document = window.document;
    var Plotly = window.Plotly;
    var d3 = Plotly.d3;
    var gd = document.getElementById('graph');

    // mock XML Serializer (for now)
    window.XMLSerializer = function() {
        return {
            serializeToString: (node) => {
                return String(node.outerHTML)
            }
        };
    };

    Plotly.plot(gd, data, layout, config).then((gd) => {
        return Plotly.toImage(gd, imageOptions);
    })
    .then((img) => {
        var svg = decodeURIComponent(img.replace(/^data:image\/svg\+xml,/, ''))

        fs.writeFile(OUTFILENAME, svg, (err) => {
            if(err) throw err;
            console.log('done');
        })
    })
    .catch((err) => {
       console.log(err)
    })
}

## out.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              out.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## package.json
{
  "name": "plotly-in-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "Étienne Tétreault-Pinard",
  "license": "MIT",
  "dependencies": {
    "canvas": "^1.6.5",
    "jsdom": "^9.12.0",
    "plotly.js": "^1.25.1"
  }
}
	var fs = require('fs');
	var path = require('path');
	var jsdom = require('jsdom');

	var PATH_TO_PLOTLYJS = require.resolve('plotly.js/dist/plotly.js');
	var plotlySrc = fs.readFileSync(PATH_TO_PLOTLYJS, 'utf-8');

	var html = `
	<body>
	<div id="graph"></div>
	</body>`;

	var data = [{
	x: [1,2,3],
	y: [2,1,2],
	mode: 'markers',
	marker: {
	size: 20,
	color: 'green'
	}
	}];

	var layout = {

	};

	var config = {
	showLinks: false
	}

	var imageOptions = {
	format: 'svg'
	};

	var OUTFILENAME = path.join(__dirname, 'out.' + imageOptions.format);

	var virtualConsole = jsdom.createVirtualConsole();
	virtualConsole.on('log', (message) => {
	console.log('console.log called ->', message);
	});
	virtualConsole.on('jsdomError', (message) => {
	console.error('Error ->', message);
	});

	jsdom.env({
	html: html,
	src: [plotlySrc],

	// Taken from: https://gist.github.com/hugolpz/1c34e14d8b7dd457f802 (you
	// need query selector for D3 to work)
	features: { QuerySelector: true },

	virtualConsole: virtualConsole,

	done: main
	});

	function main(err, window) {
	if(err) throw err;

	var document = window.document;
	var Plotly = window.Plotly;
	var d3 = Plotly.d3;
	var gd = document.getElementById('graph');

	// mock XML Serializer (for now)
	window.XMLSerializer = function() {
	return {
	serializeToString: (node) => {
	return String(node.outerHTML)
	}
	};
	};

	Plotly.plot(gd, data, layout, config).then((gd) => {
	return Plotly.toImage(gd, imageOptions);
	})
	.then((img) => {
	var svg = decodeURIComponent(img.replace(/^data:image\/svg\+xml,/, ''))

	fs.writeFile(OUTFILENAME, svg, (err) => {
	if(err) throw err;
	console.log('done');
	})
	})
	.catch((err) => {
	console.log(err)
	})
	}
	{
	"name": "plotly-in-node",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "node index.js"
	},
	"author": "Étienne Tétreault-Pinard",
	"license": "MIT",
	"dependencies": {
	"canvas": "^1.6.5",
	"jsdom": "^9.12.0",
	"plotly.js": "^1.25.1"
	}
	}