@lgv/parallel-coordinates v1.0.0

Parallel Coordinates

ES6 d3.js parallel coordinates visualization.

Install

# install package
npm install @lgv/parallel-coordinates

Data Format

The following values are the expected input data structure; id is optional. dimension. keys are arbitrary; however, they must match whatever values provided to dimensions during initialization if provided for an ordered arrangement.

[
    {
        "id": 1,
        "dimension1": 8,
        "dimension2": 6,
        "dimension3": 4
    },
    {
        "id": 2,
        "dimension1": 1,
        "dimension2": 2,
        "dimension3": 3
    }
]

Use Module

import { ParallelCoordinates } from "@lgv/parallel-coordinates";

// have some data
let data = [
    {
        "id": 1,
        "dimension1": 8,
        "dimension2": 6,
        "dimension3": 4
    },
    {
        "id": 2,
        "dimension1": 1,
        "dimension2": 2,
        "dimension3": 3
    }
];

// initialize
const pc = new ParallelCoordinates(data);

// render visualization
pc.render(document.body);

Environment Variables

The following values can be set via environment or passed into the class.

Events

The following events are dispatched from the svg element. Hover events toggle a class named active on the element; associated elements are assgined an adjacent class name.

Style

Style is expected to be addressed via css. Any style not met by the visualization module is expected to be added by the importing component.

Actively Develop

# clone repository
git clone <repo_url>

# update directory context
cd parallel-coordinates

# run docker container
docker run \
  --rm \
  -it  \
  -v $(pwd):/project \
  -w /project \
  -p 8080:8080 \
  node \
  bash

# FROM INSIDE RUNNING CONTAINER

# install module
npm install .

# run development server
npm run example

# edit example/main.js
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080