Skip to content

Instantly share code, notes, and snippets.

@eugenesvk

eugenesvk/ nw.js-plotly.js

Last active March 31, 2016 18:20
Show Gist options
  • Save eugenesvk/2c2d656edc13e72affb68b7688c9bd48 to your computer and use it in GitHub Desktop.
Save eugenesvk/2c2d656edc13e72affb68b7688c9bd48 to your computer and use it in GitHub Desktop.
Download ZIP
generate plotly.js images using nw.js
Raw
README.md

plotly.js in nw.js

Generate plotly.js images using nw.js

How to run this thing?

1. Setup
  • Install nw.js (see instructions)
  • Make sure that the nw.js executable is linked to nw in your environment path
  • Clone this gist and cd into it
2. Generate a graph
npm start

and 🍻.`

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>plotly.js in nw.js</title>
<!-- <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
<!-- <script type="text/javascript" src="node_modules/plotly.js/dist/plotly.js"></script> -->
<script type="text/javascript" src="c:\Dev\Node.js\bin\node_modules\plotly.js\lib\index.js"></script>
<script type="text/javascript" src="c:\Dev\Node.js\bin\node_modules\plotly.js\dist\plotly.js"></script>
</head>
<body>
<div id="graph"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Raw
main.js
/* global Plotly:false */
var fs = require('fs');
var gui = require('nw.gui');
var outPath = 'out.svg';
var data = [{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}];
var layout = {
title: 'plotly graph in nw.js'
};
Plotly.plot('graph', data, layout).then(function(gd) {
var svg = Plotly.Snapshot.toSVG(gd);
fs.writeFile(outPath, svg, function(err) {
if(err) throw err;
gui.App.quit();
});
});
Display the source blob
Display the rendered blob
Raw
out.svg
<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="496" height="450"><rect x="0" y="0" width="496" height="450" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/><defs id="defs-6deac4"><g class="clips"><clipPath class="axesclip" id="clip6deac4x"><rect x="80" y="0" width="336" height="450"/></clipPath><clipPath class="axesclip" id="clip6deac4y"><rect x="0" y="100" width="496" height="270"/></clipPath><clipPath class="axesclip" id="clip6deac4xy"><rect x="80" y="100" width="336" height="270"/></clipPath></g></defs><g class="draglayer"><g transform="translate(80,100)"><rect class="drag nsewdrag cursor-crosshair" data-subplot="xy" x="0" y="0" width="336" height="270" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag nwdrag cursor-nw-resize" data-subplot="xy" x="-20" y="-20" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag nedrag cursor-ne-resize" data-subplot="xy" x="336" y="-20" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag swdrag cursor-sw-resize" data-subplot="xy" x="-20" y="270" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag sedrag cursor-se-resize" data-subplot="xy" x="336" y="270" width="20" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag ewdrag cursor-ew-resize" data-subplot="xy" x="33.6" y="270.5" width="268.8" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag wdrag cursor-w-resize" data-subplot="xy" x="0" y="270.5" width="33.6" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag edrag cursor-e-resize" data-subplot="xy" x="302.40000000000003" y="270.5" width="33.6" height="20" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag nsdrag cursor-ns-resize" data-subplot="xy" x="-20.5" y="27" width="20" height="216" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag sdrag cursor-s-resize" data-subplot="xy" x="-20.5" y="243" width="20" height="27" style="fill: transparent; stroke-width: 0; pointer-events: all;"/><rect class="drag ndrag cursor-n-resize" data-subplot="xy" x="-20.5" y="0" width="20" height="27" style="fill: transparent; stroke-width: 0; pointer-events: all;"/></g></g><g class="subplot xy"><rect x="80" y="100" width="336" height="270" style="stroke-width: 0; fill: rgb(255, 255, 255); fill-opacity: 1;"/><g transform="translate(80,100)"><path class="ygrid crisp" d="M0,0h336" transform="translate(0,214.24)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h336" transform="translate(0,158.48)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h336" transform="translate(0,102.72)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/><path class="ygrid crisp" d="M0,0h336" transform="translate(0,46.96)" style="stroke: rgb(238, 238, 238); stroke-opacity: 1; stroke-width: 1px;"/></g><g/><g transform="translate(80,100)"><path class="yzl zl crisp" d="M0,0h336" transform="translate(0,270)" style="stroke: rgb(68, 68, 68); stroke-opacity: 1; stroke-width: 1px;"/></g><g/><svg preserveAspectRatio="none" x="80" y="100" width="336" height="270" viewBox="0 0 336 270" style="fill: none;"><g class="imagelayer"/><g class="maplayer"/><g class="barlayer"><g class="trace bars" style="opacity: 1;"><g class="points"><path d="M11.2,270V46.96H100.8V270Z" style="fill: rgb(31, 119, 180); fill-opacity: 1;"/><path d="M123.2,270V113.87H212.8V270Z" style="fill: rgb(31, 119, 180); fill-opacity: 1;"/><path d="M235.2,270V13.5H324.8V270Z" style="fill: rgb(31, 119, 180); fill-opacity: 1;"/></g></g></g><g class="boxlayer"/><g class="scatterlayer"/></svg><g/><path class="crisp" transform="translate(80,100)" d="M-1,270.5h338" style="fill: none; stroke-width: 1px; stroke: rgb(0, 0, 0); stroke-opacity: 0;"/><path class="crisp" transform="translate(80,100)" d="M-0.5,-1v271" stroke-width="1px" style="fill: none; stroke: rgb(0, 0, 0); stroke-opacity: 0;"/><g/><g transform="translate(80,100)"><g class="xtick" data-bb="14"><text text-anchor="middle" x="0" y="284" transform="translate(56,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;" data-bb="10">giraffes</text></g><g class="xtick" data-bb="15"><text text-anchor="middle" x="0" y="284" transform="translate(168,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;" data-bb="11">orangutans</text></g><g class="xtick" data-bb="16"><text text-anchor="middle" x="0" y="284" transform="translate(280,0)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;" data-bb="12">monkeys</text></g></g><g transform="translate(80,100)"><g class="ytick" data-bb="18"><text text-anchor="end" x="-2" y="6" transform="translate(0,270)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">0</text></g><g class="ytick" data-bb="19"><text text-anchor="end" x="-2" y="6" transform="translate(0,214.24)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">5</text></g><g class="ytick" data-bb="20"><text text-anchor="end" x="-2" y="6" transform="translate(0,158.48)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">10</text></g><g class="ytick" data-bb="21"><text text-anchor="end" x="-2" y="6" transform="translate(0,102.72)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">15</text></g><g class="ytick" data-bb="22"><text text-anchor="end" x="-2" y="6" transform="translate(0,46.96)" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; visibility: visible; white-space: pre;">20</text></g></g><g/></g><g class="shapelayer"/><g class="pielayer"/><g class="glimages"/><g class="geoimages"/><text class="js-plot-link-container" y="441" text-anchor="end" x="489" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); pointer-events: all;"><tspan class="js-link-to-tool"/><tspan class="js-link-spacer"/><tspan class="js-sourcelinks"/></text><g class="infolayer"><g class="g-gtitle"><text class="gtitle" x="248" y="50" text-anchor="middle" style="font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre; visibility: visible;">plotly graph in nw.js</text></g><g class="g-xtitle" data-bb="13"/><g class="g-ytitle" data-bb="17"/></g></svg>
Raw
package.json
{
"name": "nw.js-plotly.js",
"version": "1.0.0",
"description": "generate plotly.js images using nw.js",
"main": "index.html",
"scripts": {
"start": "nw ."
},
"author": "Étienne Tétreault-Pinard",
"license": "MIT"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment