0.3.4 • Published 2 years ago

@lgv/bubble-chart v0.3.4

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
2 years ago

Bubble Chart

ES6 d3.js bubble chart visualization.

Install

# install package
npm install @lgv/bubble-chart

Data Format

The following values are the expected input data structure; id can be omitted.

[
    {
        "id": 1,
        "label": "xyz",
        "value": 1
    },
    {
        "id": 2,
        "label": "abc",
        "value": 3
    }
]

Use Module

import { BubbleChart } from "@lgv/bubble-chart";

// have some data
let data = [
    {
        "id": 1,
        "label": "xyz",
        "value": 1
    },
    {
        "id": 2,
        "label": "abc",
        "value": 3
    }
];

// initialize
const bc = new BubbleChart(data);

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

Environment Variables

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

NameTypeDescription
LGV_HEIGHTintegerheight of artboard
LGV_WIDTHintegerwidth of artboard

Events

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

TargetNameEvent
bubble circlebubble-clickon click
bubble circlebubble-mouseoveron hover
bubble circlebubble-mousemouton 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.

ClassElement
lgv-bubblecircle element
lgv-bubble-charttop-level svg element
lgv-bubble-labelcircle text label element
lgv-bubble-label-partialindividual stacked lines of circle text label element
lgv-nodecircle/text group element

Actively Develop

# clone repository
git clone <repo_url>

# update directory context
cd bubble-chart

# 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 sbc = new BubbleChart(data);
# add sbc.render(document.body);
# replace `data` with whatever data you want to develop with

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

2 years ago

0.3.3

2 years ago

0.3.2

3 years ago

0.3.0

3 years ago

0.3.1

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.1.0

3 years ago

0.1.2

3 years ago

0.2.0

3 years ago

0.1.1

3 years ago

0.0.15

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago