@lgv/radial-stacked-connections

Radial Stacked Connections

ES6 d3.js radial stacked column chart / connection hybrid visualization.

Install

# install package
npm install @lgv/radial-stacked-connections

Data Format

The following values are the expected input data structure. series. keys are arbitrary; however, they must match whatever values provided to series during initialization.

[
    {
        "id": 1,
        "series1": 8,
        "series2": 6,
        "series3": 4,
        "packKey": "some value",
        "valueKey": 2
    },
    {
        "id": 2,
        "series1": 1,
        "series2": 2,
        "series3": 3,
        "value": 5,
        "packKey": "some value",
        "valueKey": 8
    }
]

Use Module

import { RadialStackedConnections } from "@lgv/radial-stacked-connections";

// have some data
let data = [
    {
        "id": 1,
        "series1": 8,
        "series2": 6,
        "series3": 4,
        "packKey": "some value",
        "valueKey": 2
    },
    {
        "id": 2,
        "series1": 1,
        "series2": 2,
        "series3": 3,
        "value": 5,
        "packKey": "some value",
        "valueKey": 8
    }
];

// initialize
const rsc = new RadialStackedConnections(data);

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

Environment Variables

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

Name	Type	Description
LGV_HEIGHT	integer	height of artboard
LGV_WIDTH	integer	width of artboard

Events

The following events are dispatched from the svg element. Hover events toggle a class named active on the element.

Target	Name	Event
arc	arc-click	on click
arc	arc-mouseover	on hover
arc	arc-mousemout	on un-hover

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.

Class	Element
lgv-radial-stacked-connections	top-level svg element
lgv-content	content inside artboard inside padding
lgv-arc	arc column
lgv-arc-label	arc column label
lgv-connection	curved path
lgv-series	stack series

Actively Develop

# clone repository
git clone <repo_url>

# update directory context
cd radial-stacked-connections

# 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 startdocker

# edit src/index.js
# add const rsc = new RadialStackedConnections(data);
# add rsc.render(document.body);
# replace `data` with whatever data you want to develop with

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