Skip to content

Latest commit

 

History

History

04

README.md

STEP 04

  • Run static visualization using command line
  • Unit tests
  • Publish and deploy package, continuous integration

Run static visualization using command line

You don't always need a browser to run the visualization. Would be need to run it and include CSS styling and render as image. This will be the first step for automated visualization creation and testing.

Let's install (again) D3, but globally.

npm install d3 -g

Insall node.js and run it

node

var d3 = require("d3-array");

var data = [10, 15, 20, 12];

console.log(d3.max(data))

Note that imports are not available in nodejs (up to version 6) or needs a transpiler (e.g. rollup).

💡**JSDOM** is an API that allows you to throw a bunch of stuff at it, and it will generally do the right thing.

var d3 = require("d3"),
    jsdom = require("jsdom");

var document = jsdom.jsdom(),
    svg = d3.select(document.body).append("svg");

💡**PhantomJS** is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Create the file capture.js

var webPage = require('webpage');
var fs = require('fs');
var page = webPage.create();

var f = {
  url: "../02/barchart-module.html",
  size: [800, 600],
  format: "png",
  filename: "barchart-module.png"
}

page.open(f.url, function start(status) {
  if (status !== 'success') {
    console.log('Unable to load the address: ', f.url);
    phantom.exit(1);
  } else {
    page.viewportSize = {width: f.size[0], height: f.size[1]};
    page.render(f.filename, {format: f.format, quality: '50'});
    phantom.exit();
  }
});

Run using

phantomjs capture.js

Then visually inspect the result!

Unit tests

💡**Tape** tap-producing test harness for node and browsers

npm install tape --save-dev

Now add our script to the package.json file

"scripts": {
  "test": "tape 'test/**/*-test.js'",
}

A simple test is as follows:

var tape = require("tape"),
    foo = require("../");

tape("foo() returns the answer to the ultimate question of life, the universe, and everything.", function(test) {
  test.equal(foo.foo(), 42);
  test.end();
});

To execute the test

npm test

Let's now test the code formatting as well:

💡**eslint** is ...

npm install eslint --save-dev

Configuration file .eslintrc

parserOptions:
    sourceType: module

env:
    node: true

extends:
    "eslint:recommended"

rules:
    no-cond-assign: 0
    no-floating-decimal: 2
    no-sparse-arrays: 0

Notes

See tests in other toolkits

Deploy

Notes

Pipeline, composition

See https://github.com/biovisualize/piper.js/tree/rollup/src

Publish

Tage with version number

git tag -a v0.0.1

Or use NPM version

https://docs.npmjs.com/cli/version

Also, upload the latest release on github.

Write API Reference which is the documentation of public functions.

Make it production ready (reducing size, concatenate files, fingerprint with random ID)

Consider adding to a CDN like cdnjs

For the new library request issue, please make sure it's not a personal project, we have a basic requirement for the popularity, like 100 stars on GitHub or 500 downloads/month on npm registry.

Advanced D3 stuffs using d3 core lib

🎉Back to Introduction →