Data Visualization

The 'Data Visualization' npm package is a comprehensive toolset that empowers developers to transform raw data into stunning visual representations. With an array of chart types including bar charts, pie charts, scatter charts, and heatmaps, this package enables the creation of visually appealing and interactive data visualizations.

Key Features

• Chart Variety: Utilize a wide range of chart types, including bar charts, pie charts, scatter charts, and heatmaps, to effectively convey data insights.
• Export Options: Export charts as SVG, PNG, or PDF files, allowing for seamless integration into various platforms and documents.
• Chart Configuration: Customize charts by adjusting parameters such as color schemes, labels, axes, and legends to specific requirements.

Installation

npm i @bluepineapple-nebbia-tech/data-visualizer

Usage

import DataVisualization from "@bluepineapple-nebbia-tech/data-visualizer";

...
const data = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: 90 },
  { id: 6, lastName: 'Melisandre', firstName: 'Tom', age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];


<DataVisualization
    data={data}
    title="VISUAL REPRESENTATION OF DATA"
/>

API

Properties

| Property | Description | | -------------- | :--------------------------------------------------: | | title | The title of the datagrid. | | data | The source data, in which each element is an object. |