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.

[
    {
        "label": "item 1",
        "series1": 8,
        "series2": 2
    },
    {
        "label": "item 2",
        "series1": 1,
        "series2": 3
    },
    {
        "label": "item 3",
        "series1": 4,
        "series2": 8
    },
    {
        "label": "item 4",
        "series1": 4,
        "series2": 5
    }
];

Use Module

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

// have some data
let data = [
    {
        "label": "item 1",
        "series1": 8,
        "series2": 2
    },
    {
        "label": "item 2",
        "series1": 1,
        "series2": 3
    },
    {
        "label": "item 3",
        "series1": 4,
        "series2": 8
    },
    {
        "label": "item 4",
        "series1": 4,
        "series2": 5
    }
];

// 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_BRAND_NAME | string | label used in css class prefix |

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 | | node | node-click | on click | | node | node-mouseover | on hover | | node | node-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. The default brand is lgv.

| Class | Element | | :-- | :-- | | <brand>-radial-stacked-connections | top-level svg element | | <brand>-content | content inside artboard inside padding | | <brand>-arc | arc | | <brand>-arc-label | arc label | | <brand>-connection | curved path | | <brand>-node | node | | <brand>-series-label | stack series label |

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 example

# edit files in example/* or src/*

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