creative-infographics

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.