@lgv/venn-diagram

Venn Diagram

ES6 d3.js venn diagram visualization.

Install

# install package
npm install @lgv/venn-diagram

Data Format

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

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

Use Module

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

# 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