open-index/open-npm huggingface dataset:
npm package: @lgv/activity-clock
Description: ES6 d3.js activity clock visualization
Author: lgensinger
Latest version: 1.2.1

# Activity Clock

ES6 d3.js activity clock visualization.

## Install

```bash
# install package
npm install @lgv/activity-clock
```

## Data Format

The following values are the expected input data structure.

```json
[
    {
        "timestamp": "2021-07-31T16:05:55-04",
        "value": 1
    },
    {
        "timestamp": "2021-07-01T18:05:55-04",
        "value": 3
    },
    {
        "timestamp": "2021-07-30T16:10:55-04",
        "value": 2
    },
    {
        "timestamp": "2022-09-02T02:10:55-04",
        "value": 5
    }
]
```

## Use Module

```bash
import { ActivityClock } from "@lgv/activity-clock";

// have some data
let data = [
    {
        "timestamp": "2021-07-31T16:05:55-04",
        "value": 1
    },
    {
        "timestamp": "2021-07-01T18:05:55-04",
        "value": 3
    },
    {
        "timestamp": "2021-07-30T16:10:55-04",
        "value": 2
    },
    {
        "timestamp": "2022-09-02T02:10:55-04",
        "value": 5
    }
]

// initialize
const ac = new ActivityClock(data);

// render visualization
ac.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 |

## 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-activity-clock` | top-level svg element |
| `lgv-arc` | arc element |
| `lgv-content` | content margined from artboard |
| `lgv-label` | arc value label element |
| `lgv-label-arc` | arc label element |
| `lgv-label-ring` | ring label element |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd activity-clock

# 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

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/beeswarm
Description: ES6 d3.js clustered circles along an axis visualization.
Author: lgensinger
Latest version: 2.0.2

# Beeswarm

ES6 d3.js clustered circles along an axis visualization.

## Install

```bash
# install package
npm install @lgv/beeswarm
```

## Data Format

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

```json
[
    {
        "label": "xyz",
        "value": 1,
        "x": 5,
        "y": 2
    },
    {
        "label": "abc",
        "value": 3,
        "x": 10,
        "y": 8
    }
]
```

## Use Module

```bash
import { Beeswarm } from "@lgv/beeswarm";

// have some data
let data = [
    {
        "label": "xyz",
        "value": 1,
        "x": 5,
        "y": 2
    },
    {
        "label": "abc",
        "value": 3,
        "x": 10,
        "y": 8
    }
];

// initialize
const b = new Beeswarm(data);

// render visualization
b.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 |
| :-- | :-- | :-- |
| bubble circle | `bubble-click` | on click |
| bubble circle | `bubble-mouseover` | on hover |
| bubble circle | `bubble-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-bubble` | circle element |
| `lgv-beeswarm` | top-level svg element |
| `lgv-node` | circle/text group element |
| `lgv-bubble-label` | circle text label element |
| `lgv-bubble-label-partial` | individual stacked lines of circle text label element |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd beeswarm

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

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/beeswarm-bins
Description: ES6 d3.js clustered circles in binned sets visualization.
Author: lgensinger
Latest version: 1.0.0

# Beeswarm Bins

ES6 d3.js clustered circles in binned sets visualization.

## Install

```bash
# install package
npm install @lgv/beeswarm-bins
```

## Data Format

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

```json
[
    {
        "label": "xyz",
        "value": 1,
        "size": 5
    },
    {
        "label": "abc",
        "value": 3,
        "size": 10
    }
]
```

## Use Module

```bash
import { BeeswarmBins } from "@lgv/beeswarbins";

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

// initialize
const bb = new BeeswarmBins(data);

// render visualization
bb.render(document.body);
```

## Environment Variables

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

| Name | Type | Description |
| :-- | :-- | :-- |
| `LGV_BIN_COUNT` | integer | number of bins |
| `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 |
| :-- | :-- | :-- |
| bubble circle | `bubble-click` | on click |
| bubble circle | `bubble-mouseover` | on hover |
| bubble circle | `bubble-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-bubble` | circle element |
| `lgv-beeswarm-bins` | top-level svg element |
| `lgv-node` | circle/text group element |
| `lgv-bubble-label` | circle text label element |
| `lgv-bubble-label-partial` | individual stacked lines of circle text label element |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd beeswarm-bins

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

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/bubble-chart
Description: ES6 d3.js bubble chart visualization
Author: lgensinger
Latest version: 1.0.1

# Bubble Chart

ES6 d3.js bubble chart visualization.

## Install

```bash
# install package
npm install @lgv/bubble-chart
```

## Data Format

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

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

## Use Module

```bash
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.

| 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 |
| :-- | :-- | :-- |
| bubble circle | `bubble-click` | on click |
| bubble circle | `bubble-mouseover` | on hover |
| bubble circle | `bubble-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-bubble` | circle element |
| `lgv-bubble-chart` | top-level svg element |
| `lgv-bubble-label` | circle text label element |
| `lgv-bubble-label-partial` | individual stacked lines of circle text label element |
| `lgv-node` | circle/text group element |

## Actively Develop

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

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/calendar
Description: ES6 d3.js calendar visualization.
Author: lgensinger
Latest version: 1.0.1

# Calendar

ES6 d3.js calendar visualization.

## Install

```bash
# install package
npm install @lgv/calendar
```

## Data Format

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

```json
[
    {
        "id": 1,
        "date_start": "2024-01-01",
        "date_end": "2024-01-02",
        "event_title": "Event A"
    },
    {
        "id": 2,
        "date_start": "2024-01-01",
        "date_end": "2024-01-01",
        "event_title": "Event B"
    },
]
```

## Use Module

```bash
import { Calendar } from "@lgv/calendar";

// have some data
let data = [
    {
        "id": 1,
        "date_start": "2024-01-01",
        "date_end": "2024-01-02",
        "event_title": "Event A"
    },
    {
        "id": 2,
        "date_start": "2024-01-01",
        "date_end": "2024-01-01",
        "event_title": "Event B"
    },
];

// initialize
const b = new Calendar(data);

// render visualization
b.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 |
| :-- | :-- | :-- |
| date digit | `day-click` | on click |
| date digit | `day-mouseover` | on hover |
| date digit | `day-mousemout` | on un-hover |
| event bar | `event-click` | on click |
| event bar | `event-mouseover` | on hover |
| event bar | `event-mousemout` | on un-hover |
| month name | `month-change` | on click |
| more text | `more-click` | on click |
| more text | `more-mouseover` | on hover |
| more text | `more-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-cell` | div element |
| `lgv-cell-header` | div element element |
| `lgv-day` | h1 element |
| `lgv-dow` | div element holding all column elements |
| `lgv-event` | div element |
| `lgv-event-grid` | div element holding all event divs for a given cell |
| `lgv-more` | p element indicating more events for a given cell |
| `lgv-stat` | p element indicating total event count for a given day |
| `lgv-weekday` | p element for individual column label |


## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd calendar

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

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

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/dendrogram
Description: ES6 d3.js dendrogram visualization
Author: lgensinger
Latest version: 0.0.1

# Dendrogram

ES6 d3.js dendrogram visualization.

## Style

Style is expected to be addressed via css. The top-level svg is assigned a class `lgv-dendrogram`. Any style not met by the visualization module is expected to be added by the importing component.

## Environment Variables

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

| Name | Type | Description |
| :-- | :-- | :-- |
| `DIMENSION_HEIGHT` | integer | height of artboard |
| `DIMENSION_WIDTH` | integer | width of artboard |
| `PARSE_DELIMETER` | string | separator on source data hierarchy path value |

## Install

```bash
# install package
npm install @lgv/dendrogram
```

## Dendrogram

### Data Format

The following values are the expected input data structure.

```json
[
    {
        id: "some|path",
        value: 1
    },
    {
        id: "some",
        value: 3
    }
]
```

### Use Module

```bash
import { Dendrogram } from "@lgv/dendrogram";

// initialize
const dg = new Dendrogram(data);

// render visualization
dg.render(document.body);
```
npm package: @lgv/packed-circles
Description: ES6 d3.js packed circles hierarchy visualization
Author: lgensinger
Latest version: 1.1.2

# Packed Circles

ES6 d3.js packed circles hierarchy visualization. 

## Install

```bash
# 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.

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

## Use Module

```bash
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

```bash
# 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
```
npm package: @lgv/parallel-coordinates
Description: ES6 d3.js parallel coordinates visualization.
Author: lgensinger
Latest version: 1.0.0

# Parallel Coordinates

ES6 d3.js parallel coordinates visualization.

## Install

```bash
# install package
npm install @lgv/parallel-coordinates
```

## Data Format

The following values are the expected input data structure; id is optional. `dimension.` keys are arbitrary; however, they must match whatever values provided to `dimensions` during initialization if provided for an ordered arrangement.

```json
[
    {
        "id": 1,
        "dimension1": 8,
        "dimension2": 6,
        "dimension3": 4
    },
    {
        "id": 2,
        "dimension1": 1,
        "dimension2": 2,
        "dimension3": 3
    }
]
```

## Use Module

```bash
import { ParallelCoordinates } from "@lgv/parallel-coordinates";

// have some data
let data = [
    {
        "id": 1,
        "dimension1": 8,
        "dimension2": 6,
        "dimension3": 4
    },
    {
        "id": 2,
        "dimension1": 1,
        "dimension2": 2,
        "dimension3": 3
    }
];

// initialize
const pc = new ParallelCoordinates(data);

// render visualization
pc.render(document.body);
```

## Environment Variables

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

| Name | Type | Depcription |
| :-- | :-- | :-- |
| `LGV_BRANDING` | string | prefix used for dom element style names |

## Events

The following events are dispatched from the svg element. Hover events toggle a class named `active` on the element; associated elements are assgined an `adjacent` class name.

| 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.

| Class | Element |
| :-- | :-- |
| `lgv-parallel-coordinates` | top-level svg element |
| `lgv-content` | content inside artboard inside padding |
| `lgv-connection` | curved path |
| `lgv-dimension` | dimension label |
| `lgv-node` | dimension value |
| `lgv-node-label` | dimension value label |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd parallel-coordinates

# 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 example/main.js
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/pattern-hatch
Description: ES6 svg hatch pattern.
Author: lgensinger
Latest version: 0.0.3

# Pattern Hatch

ES6 svg hatch pattern.

## Environment Variables

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

| Name | Type | Description |
| :-- | :-- | :-- |
| `DIMENSION_UNIT` | integer | width/height of single pattern swatch |

## Install

```bash
# install package
npm install @lgv/pattern-hatch
```

## HatchPattern

### Use Module

```bash
import { HatchPattern } from "@lgv/pattern-hatch";

// initialize
const hp = new HatchPattern();

// generate svg artboard
let artboard = document.createElementNS("http://www.w3.org/2000/svg", "svg");
artboard.setAttributeNS(null, "id", "artboard");
artboard.setAttributeNS(null, "width", 100);
artboard.setAttributeNS(null, "height", 100);
document.body.appendChild(artboard);

// generate pattern in svg
hp.generate(artboard, "my-pattern");
```

#### Use Pattern in CSS

```css
// style the lines
#my-pattern line {

    stroke: blue;
    stroke-width: 0.5em;

}

// use pattern as fill on other elements
.some-class {

    fill: url(#my-pattern);

}
```


#### Use Pattern in JavaScript

```javascript
// assume the svg element already exists (let artboard) from above code for using the module

// generate svg shape
let rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rectangle.setAttributeNS(null, "x", 0);
rectangle.setAttributeNS(null, "y", 0);
rectangle.setAttributeNS(null, "width", 50);
rectangle.setAttributeNS(null, "height", 50);
rectangle.setAttributeNS(null, "fill", "url(#my-pattern)");
artboard.appendChild(rectangle);
```
npm package: @lgv/pattern-hexagon
Description: ES6 svg hexagon pattern.
Author: lgensinger
Latest version: 0.0.4

# Pattern Hexagon

ES6 svg hexagon pattern.

## Environment Variables

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

| Name | Type | Description |
| :-- | :-- | :-- |
| `DIMENSION_UNIT` | integer | width/height of single pattern swatch |

## Install

```bash
# install package
npm install @lgv/pattern-hexagon
```

## HexagonPattern

### Use Module

```bash
import { HexagonPattern } from "@lgv/pattern-hexagon";

// initialize
const hp = new HexagonPattern();

// generate svg artboard
let artboard = document.createElementNS("http://www.w3.org/2000/svg", "svg");
artboard.setAttributeNS(null, "id", "artboard");
artboard.setAttributeNS(null, "width", 100);
artboard.setAttributeNS(null, "height", 100);
document.body.appendChild(artboard);

// generate pattern in svg
hp.generate(artboard, "my-pattern");
```

#### Use Pattern in CSS

```css
// style the hexagons
#my-pattern polygon {

    fill: red;
    stroke: blue;

}

// use pattern as fill on other elements
.some-class {

    fill: url(#my-pattern);

}
```


#### Use Pattern in JavaScript

```javascript
// assume the svg element already exists (let artboard) from above code for using the module

// generate svg shape
let rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rectangle.setAttributeNS(null, "x", 0);
rectangle.setAttributeNS(null, "y", 0);
rectangle.setAttributeNS(null, "width", 50);
rectangle.setAttributeNS(null, "height", 50);
rectangle.setAttributeNS(null, "fill", "url(#my-pattern)");
artboard.appendChild(rectangle);
```
npm package: @lgv/pattern-polka-dot
Description: ES6 svg polka dot pattern.
Author: lgensinger
Latest version: 0.0.3

# Pattern Polka Dot

ES6 svg polka dot pattern.

## Environment Variables

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

| Name | Type | Description |
| :-- | :-- | :-- |
| `DIMENSION_UNIT` | integer | width/height of single pattern swatch |

## Install

```bash
# install package
npm install @lgv/pattern-polka-dot
```

## PolkaDotPattern

### Use Module

```bash
import { PolkaDotPattern } from "@lgv/pattern-polka-dot";

// initialize
const pd = new PolkaDotPattern();

// generate svg artboard
let artboard = document.createElementNS("http://www.w3.org/2000/svg", "svg");
artboard.setAttributeNS(null, "id", "artboard");
artboard.setAttributeNS(null, "width", 100);
artboard.setAttributeNS(null, "height", 100);
document.body.appendChild(artboard);

// generate pattern in svg
pd.generate(artboard, "my-pattern");
```

#### Use Pattern in CSS

```css
// style the circles
#my-pattern circle {

    fill: red;
    stroke: blue;

}

// use pattern as fill on other elements
.some-class {

    fill: url(#my-pattern);

}
```


#### Use Pattern in JavaScript

```javascript
// assume the svg element already exists (let artboard) from above code for using the module

// generate svg shape
let rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rectangle.setAttributeNS(null, "x", 0);
rectangle.setAttributeNS(null, "y", 0);
rectangle.setAttributeNS(null, "width", 50);
rectangle.setAttributeNS(null, "height", 50);
rectangle.setAttributeNS(null, "fill", "url(#my-pattern)");
artboard.appendChild(rectangle);
```
npm package: @lgv/quadrant-chart
Description: ES6 d3.js x/y quadrant chart visualization
Author: lgensinger
Latest version: 0.1.2

# Quadrant Chart

ES6 d3.js x/y quadrant chart visualization.

## Install

```bash
# install package
npm install @lgv/quadrant-chart
```

## Data Format

The following values are the expected input data structure; id is optional.

```json
[
    {
        "id": 1,
        "label": "this is a title",
        "description": "this is a description",
        "x": 3,
        "y": 5
    },
    {
        "id": 2,
        "label": "this is a title",
        "description": "this is a description",
        "x": 1,
        "y": 2
    }
]
```

## Use Module

```bash
import { QuadrantChart } from "@lgv/quadrant-chart";

// have some data
let data = [
    {
        "id": 1,
        "label": "this is a title",
        "description": "this is a description",
        "x": 3,
        "y": 5
    },
    {
        "id": 2,
        "label": "this is a title",
        "description": "this is a description",
        "x": 1,
        "y": 2
    }
];

// initialize
const qc = new QuadrantChart(data);

// render visualization
qc.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 |
| :-- | :-- | :-- |

## 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-quadrant-chart` | top-level svg element |
| `lgv-content` | content inside artboard inside padding |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd quadrant-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 qc = new QuadrantChart(data);
# add qc.render(document.body);
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/radar-chart
Description: ES6 d3.js radar chart visualization
Author: lgensinger
Latest version: 0.0.8

# Radar Chart

ES6 d3.js radar chart visualization.

## Install

```bash
# install package
npm install @lgv/radar-chart
```

## Data Format

The following values are the expected input data structure.

```json
{
    "series1": { "a": 6, "b": 10, "c": 30 },
    "series2": { "a": 10, "b": 40, "c": 5 },
    "series3": { "a": 0, "b": 3, "c": 2 }
}
```

## Use Module

```bash
import { RadarChart } from "@lgv/radar-chart";

// have some data
let data = {
    "series1": { "a": 6, "b": 10, "c": 30 },
    "series2": { "a": 10, "b": 40, "c": 5 },
    "series3": { "a": 0, "b": 3, "c": 2 }
}

// initialize
const rc = new RadarChart(data);

// render visualization
rc.render(document.body);
```

## Environment Variables

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

| Name | Type | Description |
| :-- | :-- | :-- |
| `LGV_LAYOUT_AXES_START` | float | degree start position where 0 == 12 o'clock |
| `LGV_HEIGHT` | integer | height of artboard |
| `LGV_WIDTH` | integer | width of artboard |

## 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-radar-chart` | top-level svg element |
| `lgv-axis` | radar axis element |
| `lgv-axis-grid` | axis style for polar grid |
| `lgv-axis-label` | axis label |
| `lgv-grid` | circular grid element |
| `lgv-point` | polygon point |
| `lgv-polygon` | radar series polygon element |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd radar-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 rc = new RadarChart(data);
# add rc.render(document.body);
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/radial-stacked-bar-chart
Description: ES6 d3.js radial stacked bar chart visualization
Author: lgensinger
Latest version: 0.0.8

# Radial Stacked Bar Chart

ES6 d3.js radial stacked bar chart visualization.

## Install

```bash
# install package
npm install @lgv/radial-stacked-bar-chart
```

## Data Format

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

```json
{
    "someKey": { "a": 445, "b": 4, "c": 10 },
    "someKey2": { "a": 300, "b": 200, "c": 5 }
}
```

## Use Module

```bash
import { RadialStackedBarChart } from "@lgv/radial-stacked-bar-chart";

// have some data
let data = {
    "someKey": { "a": 445, "b": 4, "c": 10 },
    "someKey2": { "a": 300, "b": 200, "c": 5 }
};

// initialize
const sbc = new RadialStackedBarChart(data);

// render visualization
sbc.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 |
| :-- | :-- | :-- |
| bar rect | `bar-click` | on click |
| bar rect | `bar-mouseover` | on hover |
| bar rect | `bar-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-bar-chart` | top-level svg element |
| `lgv-content` | content inside artboard inside padding |
| `lgv-bar` | bar chart bar |
| `lgv-bar-label` | bar chart bar label |
| `lgv-series` | bar chart series |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd radial-stacked-bar-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 RadialStackedBarChart(data);
# add sbc.render(document.body);
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/radial-stacked-connections
Description: ES6 d3.js radial stacked column chart / connection hybrid visualization.
Author: lgensinger
Latest version: 1.0.0

# Radial Stacked Connections

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

## Install

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

## Data Format

The following values are the expected input data structure.

```json
[
    {
        "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

```bash
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

```bash
# 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
```
npm package: @lgv/ring-chart
Description: ES6 d3.js ring chart visualization
Author: lgensinger
Latest version: 1.0.1

# Ring Chart

ES6 d3.js ring chart visualization.

## Install

```bash
# install package
npm install @lgv/ring-chart
```

## Data Format

The following values are the expected input data structure; id is optional.

```json
[
    {
        "id": "a",
        "label": "xyz",
        "value": 1
    },
    {
        "id": "b",
        "label": "abc",
        "value": 3
    }
]
```

## Use Module

```bash
import { RingChart } from "@lgv/ring-chart";

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

// initialize
const rc = new RingChart(data);

// render visualization
rc.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 |

## 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-ring-chart` | top-level svg element |
| `lgv-arc` | ring arc element |
| `lgv-label` | arc text label element |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd ring-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 example

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/stacked-bar-chart
Description: ES6 d3.js stacked bar chart visualization
Author: lgensinger
Latest version: 0.2.3

# Stacked Bar Chart

ES6 d3.js stacked bar chart visualization.

## Install

```bash
# install package
npm install @lgv/stacked-bar-chart
```

## Data Format

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

```json
{
    "someKey": { "a": 445, "b": 4, "c": 10 },
    "someKey2": { "a": 300, "b": 200, "c": 5 }
}
```

## Use Module

```bash
import { StackedBarChart } from "@lgv/stacked-bar-chart";

// have some data
let data = {
    "someKey": { "a": 445, "b": 4, "c": 10 },
    "someKey2": { "a": 300, "b": 200, "c": 5 }
};

// initialize
const sbc = new StackedBarChart(data);

// render visualization
sbc.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 |
| :-- | :-- | :-- |
| bar rect | `bar-click` | on click |
| bar rect | `bar-mouseover` | on hover |
| bar rect | `bar-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-stacked-bar-chart` | top-level svg element |
| `lgv-content` | content inside artboard inside padding |
| `lgv-bar` | bar chart bar |
| `lgv-bar-label` | bar chart bar label |
| `lgv-series` | bar chart series |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd stacked-bar-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 StackedBarChart(data);
# add sbc.render(document.body);
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/stacked-column-chart
Description: ES6 d3.js stacked column chart visualization
Author: lgensinger
Latest version: 0.2.4

# Stacked Column Chart

ES6 d3.js stacked column chart visualization.

## Install

```bash
# install package
npm install @lgv/stacked-column-chart
```

## Data Format

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

```json
{
    "someKey": { "a": 445, "b": 4, "c": 10 },
    "someKey2": { "a": 300, "b": 200, "c": 5 }
}
```

## Use Module

```bash
import { StackedColumnChart } from "@lgv/stacked-column-chart";

// have some data
let data = {
    "someKey": { "a": 445, "b": 4, "c": 10 },
    "someKey2": { "a": 300, "b": 200, "c": 5 }
};

// initialize
const scc = new StackedColumnChart(data);

// render visualization
scc.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 |
| :-- | :-- | :-- |
| column rect | `column-click` | on click |
| column rect | `column-mouseover` | on hover |
| column rect | `column-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-stacked-column-chart` | top-level svg element |
| `lgv-content` | content inside artboard inside padding |
| `lgv-column` | column chart column |
| `lgv-column-label` | column chart column label |
| `lgv-series` | column chart series |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd stacked-column-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 scc = new StackedColumnChart(data);
# add scc.render(document.body);
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/stacked-connections
Description: ES6 d3.js stacked column chart / connections hybrid visualization
Author: lgensinger
Latest version: 0.2.3

# Stacked Connections

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

## Install

```bash
# install package
npm install @lgv/stacked-connections
```

## Data Format

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

```json
[
    {
        "id": 1,
        "series1": 8,
        "series2": 6,
        "series3": 4
    },
    {
        "id": 2,
        "series1": 1,
        "series2": 2,
        "series3": 3
    }
]
```

## Use Module

```bash
import { StackedConnections } from "@lgv/stacked-connections";

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

// initialize
const sc = new StackedConnections(data);

// render visualization
sc.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 |
| :-- | :-- | :-- |
| column rect | `column-click` | on click |
| column rect | `column-mouseover` | on hover |
| column rect | `column-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-connections` | top-level svg element |
| `lgv-content` | content inside artboard inside padding |
| `lgv-column` | column chart column |
| `lgv-column-label` | column chart column label |
| `lgv-connection` | curved path |
| `lgv-series` | column chart series |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd 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 sc = new StackedConnections(data);
# add sc.render(document.body);
# replace `data` with whatever data you want to develop with

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/venn-diagram
Description: ES6 d3.js venn diagram visualization
Author: lgensinger
Latest version: 0.0.1

# Venn Diagram

ES6 d3.js venn diagram visualization.

## Install

```bash
# install package
npm install @lgv/venn-diagram
```

## Data Format

The following values are the expected input data structure; id is optional.

```json
[
    {
        "label": "xyz",
        "value": 1
    },
    {
        "label": "abc",
        "value": 3
    }
]
```

## Use Module

```bash
import { VennDiagram } from "@lgv/venn-diagram";

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

// initialize
const vd = new VennDiagram(data);

// render visualization
vd.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 |

## 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-venn-diagram` | top-level svg element |
| `lgv-node` | venn circle element |
| `lgv-label` | venn text label element |

## Actively Develop

```bash
# clone repository
git clone <repo_url>

# update directory context
cd venn-diagram

# 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

# view visualization in browser at http://localhost:8080
```
npm package: @lgv/vue-material-style
Description: vue-material design system style overrides
Author: lgensinger
Latest version: 0.0.1

# vue-material Style Overrides

scss files to replace pixel-based values with `em`.

## Install

```bash
# install package
npm install @lgv/vue-material-style
```

### Use Module

```bash
// declare vue-material themeing like normal from the official vue-material project
import "vue-material/dist/vue-material.min.css";
import "vue-material/dist/theme/default.css";
...
...

// import vue-material-style high enough in the cascading for it to influence your style as you wish
@import "@lgv-vue-material-style/src/index.scss";
```
npm package: @lgyn10/mini-lodash
Description: lodash에서 특정 메서드를 구현 `take`, `takeWhile`
Author: lgyn10
Latest version: 0.0.2

# mini-lodash

lodash에서 특정 메서드를 구현
`take`, `takeWhile`

- 배열, 객체, 문자열을 다루기 위한 API 제공
- 외부 의존성 없는 경량화

## 설치

```bash
npm istall lgyn10/mini-lodash
```

## 사용법

```js
const ml = require('lgyn10/mini-lodash');
```
npm package: @lh-ignite-ui/docs
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 1.0.0

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```