@lgv/packed-circles v1.1.1

Packed Circles

ES6 d3.js packed circles hierarchy visualization.

Install

# install package
npm install @lgv/packed-circles

Data Format

The following values are the expected input data structure; the paths will be used as the item's id.

[
    {
        "path": "some"
    },
    {
        "path": "some.path"
    },
    {
        "path": "some.path.other"
    },
    {
        "path": "some.another"
    }
]

Use Module

import { PackedCircles } from "@lgv/packed-circles";

// have some data
let data = [
    {
        "path": "some"
    },
    {
        "path": "some.path"
    },
    {
        "path": "some.path.other"
    },
    {
        "path": "some.another"
    }
];

// initialize
const pc = new PackedCircles(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.

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. brand: defaults to lgv, you can pass it during initialization as the label param or set it in the environment.

Actively Develop

# clone repository
git clone <repo_url>

# update directory context
cd packed-circles

# 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 example
npm run example

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