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.

| Name | Type | Description | | :-- | :-- | :-- | | LGV_BRAND_NAME | string | name to be used in css class prefixing |

Events

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

| Target | Name | Event | | :-- | :-- | :-- | | node circle | node-click | on click | | node circle | node-mouseover | on hover | | node circle | 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. brand: defaults to lgv, you can pass it during initialization as the label param or set it in the environment.

| Class | Element | | :-- | :-- | | <brand>-packed-circles | top-level svg element | | <brand>-content | content inside artboard inside padding | | <brand>-node | node circle | | <brand>-label | node text label group | | <brand>-label-partial | node text tspan for label/value |

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