cplot

Generate SVG plots in the browser and Node.js

Most plotting JS libraries rely on the DOM (browser) for rendering. That makes a server-side chart rendering harder (using libs like jsdom or puppeteer). cplot makes it possible to generate SVG plots without the DOM in a very simple functional approach (data in -> svg out) After you have the SVG output you can place it on the page, save as a file or even update previously generated chart with some diffing strategy.

Install

npm install -S cplot

Usage

const cplot = require('cplot')
const svg = cplot(input) // -> String with SVG

API

Under the hood cplot uses charter a C library compiled to JavaScript with Emscripten and WebAssembly. So basically what works in charter, works in cplot. The only exception is CSV parsing that is not supported in cplot yet. The syntax from the original charter README.md:

| syntax | description | | :----- | :------ | |plot| create a new line plot| |scatter| create a new scatter plot| |scatter| create a new bar plot | |x-axis| parameters for the x axis | |y-axis| parameters for the y axis | |label | label for axis or plot | |x| x values of a plot | |y| y values of a plot | |color| colour of a plot |
|line-width or lw| plot line width | |line-style or ls| plot line style ('--' or 'dashed', '-' or 'normal', ':' or dotted, '/' or 'none')| |bar-width or bw | bar plot width| |line-color| bar plot line color | |marker| marker style of a plot ('o', 'x', '+', 's', ' ')| |range| min and max value for an axis | |mode | axis mode ('linear' or 'log') | |title| plot title | |width| plot width | |height| plot height | |range: min max nstep| linear range to use as values | |logrange: min max nstep| log range to use as values | |math: f(x)| math expression based on x to use as y value |

cplot supports inputs of multiple types:

String (Original DSL)

const input = `
title: Test plot
x-axis:
  label Cost
y-axis:
  label Error
plot:
  color red
  marker x
  x 2 3 4 5 6 7 8 9
  y -2.8559703 -3.5301677 -4.3050655 -5.1413136 -6.0322865 -6.9675052 -7.9377747
`

const svg = cplot(input)

Object If cplot received an object it first converts it to a DSL representation, then passes results to charter. The mapping is quite straightforward with two things to remember:

• Instead if quoted {... 'x-axis': 'label Cost' ...} you can use camel case (i.e. {... xAxis: 'label Cost' ...})
• To pass multiple plots use plots key (i.e. {... plots : [{ x: [...], y: [...] }, { x: [...], y: [...] }] ...}) The previously defined DSL in the object format:

const input = {
  title: 'Test plot',
  xAxis: {
    label: 'Cost'
  },
  yAxis: {
    label: 'Error'
  },
  plot: {
    color: 'red',
    marker: 'x',
    x: [2, 3, 4, 5, 6, 7, 8, 9],
    y: [-2.8559703, -3.5301677, -4.3050655, -5.1413136, -6.0322865, -6.9675052, -7.9377747]
  }
}

const svg = cplot(input)

Arrays In the most simple case cplot supports array as parameters

cplot(array) // plot the array on the y-axis, x is index (1, 2, 3..)
cplot(x, y) // plot x and y

CLI

You can generate plots calling cplot from the command line. Install cplot globally or call it with npx cplot

npm install cplot -g

• Pass DSL, CSV or JSON input via stream

cat plot.json | cplot > plot.svg

• Provide file names as parameters

cplot plot.json -o plot.svg

• Pass a sequence of numbers

echo "1 2 3 4 5" | cplot > plot.svg

Parameters:

• -w, --width - svg width
• -h, --height - svg height
• -t, --title - plot title
• -k, --kind - plot kind (plot, scatter or bar)
• -m, --marker - markers style
• -c, --color - plot color(s)

If you don't provide a file name with the -o parameter cplot outputs the generated SVG to stdout, so you can embed in more complex linux pipelines:

cat wpbc.csv | csvcut -c mean_radius,mean_texture | cplot | display svg:-

Examples

Check some example plots on the charter gallery page: https://github.com/Mandarancio/charter/wiki/Gallery

Small bonus

You can evaluate functions in cplot. It includes compiled tinyexpr that supports the standard C math. Those functions will be evaluated in a safe WebAssembly environment.

x-axis
  label x
y-axis
  label y
plot:
  x range: -6 6 20
  y math: x^2-x+4
  marker: o