This is a library of interactive infographics React components for challenging data visualization.

⏬ Installation

Creative-Infographics is available as an npm package.

// with npm
npm  install creative-infographics

Usage

For each infographic component there is fixed data schema and reaquired props, see the followed documentation below.

Infographics

1) FlowerGraph

• Import FlowerGraph

import { FlowerGraph } from "creative-infographics";

Data schema for FlowerGraph

• following data schema is required to render this infographic.

data /* array_of_objects */ = [
    {
      /* key_for_label */ : /* label */,
      /* key_for_type */ : /* array of distinguished values of string|number */ [ "type_a", "type_b", ...]
      ...
    },
    ...
]

• component schema

<FlowerGraph data={/* data */} label={/* key name of label */} term={/* key name of type */} />

Props

Using following props, Info-graphic can be customize as per required.

| props | type | Default values | Description | | -------------- | ----------------------------- | -------------- | ----------------------------------------------------------------------------------- | | data | array of objects | *required | This prop requires data as per shown in data schema | | label | string | *required | This is key name of text label inside objects | | term | string | *required | This is key name of array of types inside objects | | leafs | integer | 5 | Number of flower leafs | | leafR | integer | 55 | leafs Radius | | leafDeg | integer | 270 | Round cut off of leafs circle in degree | | flowerR | integer | 195 | Flower root Radius | | flowerDeg | integer | 360 | Round cut off of Flower circle in degree | | flowerRotation | integer | 0 | Rotation of Flower | | fontSize | integer | 6 | text size | | fadingOpacity | float | 0.02 | Opacity of other elements on mouse hover range : 0.0 to 1 | | luminosity | string ("bright" | "dark") | "bright" | "bright" : for white text and bright colors, "dark": for black text and dark colors | | tint | bool | string(colors_only) | false | false : random colors, "color_names" : gives shades of colors (red, blue, ..) |

License

This project is licensed under the terms of the ISC license.