vizart-core

vizart-core serves as fundamentals of all VizArt components.

• Demo quick reference with source code
• Documentation

Usage:

1. Install

npm install vizart-core --save

2. ES6 Usage

import { generateColorPalette } from 'vizart-core';

Development

1. Clone repository
2. Run commands

npm install         // install dependencies
npm run dev         // view demos in web browser at localhost:3005
npm run build       // build
npm run test        // run tests only
npm run test:cover  // run tests and view coverage report

API

• Color
  • Generator
  • Preset
    • Sequential: Single Hue
    • Sequential: Multi Hue
    • Categorical
    • Divergent
    • Generic Scheme

Color

Generator

Generate a color palette in HCL namespace. In the palette, each color has a sub-colorspace.

Credits: This is based on IWantHue and Chroma

Preset

Color preset for great data visualization color scheme:

• ColorBrewer as well as pre-defined schemes
• CubeHelix

Credit: Images of color scales are from d3-scale and d3-chromatic-scale

Four ways to use a preset:

1. Standard

import { SchemeBlues, Globals } from 'vizart-core';
const _color = {
  scheme: SchemeBlues,
  type: Globals.ColorType.SEQUENTIAL
}

2. Use d3 interpolator

import { Globals } from 'vizart-core';
import { interpolateCubehelixDefault } from 'd3-scale';
const _color = {
  scheme: interpolateCubehelixDefault,
  type: Globals.ColorType.SEQUENTIAL
}

3. Use string literals directly

const _color = {
  scheme: 'Blues',
  type: 'sequential'
}

4. Use customized scheme

const _color = {
  scheme: ['#ffc65f','#9eb778','#0096b6'],
  type: 'sequential'
}

Sequential (Single Hue)

SchemeReds

'Reds'/d3.interpolateReds

SchemeBlues

'Blues'/d3.interpolateBlues

SchemeGreens

'Greens'/d3.interpolateGreens

SchemeGreys

'Greys'/d3.interpolateGreys

SchemeOranges

'Oranges'/d3.interpolateOranges

SchemePurples

'Purples'/d3.interpolatePurples

Sequential (Multi Hue)

SchemeBuGn

'BuGn'/d3.interpolateBuGn

SchemeBuPu

'BuPu'/d3.interpolateBuPu

SchemeGnBu

'GnBu'/d3.interpolateGnBu

SchemeOrRd

'OrRd'/d3.interpolateOrRd

SchemePuBuGn

'PuBuGn'/d3.interpolatePuBuGn

SchemePuBu

'PuBu'/d3.interpolatePuBu

SchemePuRd

'PuRd'/d3.interpolatePuRd

SchemeRdPu

'RdPu'/d3.interpolateRdPu

SchemeYlGnBu

'YlGnBu'/d3.interpolateYlGnBu

SchemeYlGn

'YlGn'/d3.interpolateYlGn

SchemeYlOrBr

'YlOrBr'/d3.interpolateYlOrBr

SchemeYlOrRd

'YlOrRd'/d3.interpolateYlOrRd

SchemeViridis

'Viridis'/d3.interpolateViridis

SchemeInferno

'Inferno'/d3.interpolateInferno

SchemeMagma

'Magma'/d3.interpolateMagma

SchemePlasma

'Plasma'/d3.interpolatePlasma

SchemeWarm

'Warm'/d3.interpolateWarm

SchemeCool

'Cool'/d3.interpolateCool

SchemeRainbow

'Rainbow'/d3.interpolateRainbow

SchemeCubehelix

'Cubehelix'/d3.interpolateCubehelix

Categorical

SchemeAccent

'Accent'/d3.schemeAccent

SchemeDark2

'Dark2'/d3.schemeDark2

SchemePaired

'Paired'/d3.schemePaired

SchemePastel1

'Pastel1'/d3.schemePastel1

SchemePastel2

'Pastel2'/d3.schemePastel2

SchemeSet1

'Set1'/d3.schemeSet1

SchemeSet2

'Set2'/d3.schemeSet2

SchemeSet3

'Set3'/d3.schemeSet3

SchemeCategory10

'Category10'/d3.schemeCategory10

Divergent

SchemeBrBG

'BrBG'/d3.interpolateBrBG

SchemePRGn

'PRGn'/d3.interpolatePRGn

SchemePiYG

'PiYG'/d3.interpolatePiYG

SchemePuOr

'PuOr'/d3.interpolatePuOr

SchemeRdBu

'RdBu'/d3.interpolateRdBu

SchemeRdGy

'RdGy'/d3.interpolateRdGy

SchemeRdYlBu

'RdYlBu'/d3.interpolateRdYlBu

SchemeRdYlGn

'RdYlGn'/d3.interpolateRdYlGn

SchemeSpectral

'Spectral'/d3.interpolateSpectral

Generic Scheme

generic are a set of colors that are eligible for both sequential and categorical usage

• Metropolis
• MetroCold3
• MetroCold4
• MetroCold5
• MetroDawn3
• MetroDawn4
• MetroRain3
• MetroRain8

License

This project is licensed under the MIT License - see the LICENSE file for details