This is a library of interactive infographics React components for challenging data visualization.
Creative-Infographics is available as an npm package.
// with npm
npm install creative-infographicsFor each infographic component there is fixed data schema and reaquired props, see the followed documentation below.
- Import FlowerGraph
import { FlowerGraph } from "creative-infographics";- 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 */} />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, ..) |
This project is licensed under the terms of the ISC license.