# diffract

> A set of d3 based visualization components built for React

Latest version **0.3.2** (published 2016-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install diffract
pnpm add diffract
yarn add diffract
bun add diffract
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2016-05-09 |
| First published | 2015-02-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 85 |
| Author | Amey Sakhadeo |
| Maintainers | amey |
| Keywords | react, react-component, d3, visualization, graphs |

## Links

- npm: https://www.npmjs.com/package/diffract
- Repository: https://github.com/ameyms/diffract
- Homepage: https://github.com/ameyms/diffract#readme
- Issues: https://github.com/ameyms/diffract/issues
- npm.io page: https://npm.io/package/diffract

## Dependencies (3)

- [d3](https://npm.io/package/d3.md) ^3.5.16
- [react-motion](https://npm.io/package/react-motion.md) ^0.4.2
- [react-addons-transition-group](https://npm.io/package/react-addons-transition-group.md) ^0.14.0 || ^15.0.2

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.3.2 (latest) — 2016-05-09
- 0.0.1 (placeholder) — 2015-02-16
- 0.3.1 — 2016-04-07
- 0.3.0 — 2016-03-22
- 0.2.1 — 2016-03-10
- 0.2.0 — 2016-03-09
- 0.1.1 — 2015-10-07
- 0.1.0 — 2015-04-26
- 0.0.2 — 2015-02-18

## README

# diffract
[![npm version](https://badge.fury.io/js/diffract.svg)](http://badge.fury.io/js/diffract)
[![devDependency Status](https://david-dm.org/ameyms/diffract/dev-status.svg)](https://david-dm.org/ameyms/diffract#info=devDependencies)
[![peerDependency Status](https://david-dm.org/ameyms/diffract/peer-status.svg)](https://david-dm.org/ameyms/diffract#info=peerDependencies)

A set of d3 based visualization components with **cool animations** built for React

Installation
---
Diffract is available via npm and can be used along with [browserify](http://browserify.org/)

```shell
npm install diffract

```

## Usage

After installing diffract via NPM, you may use the components in your code as follows:

```js
/** DeathStar.jsx */

import React from 'react';
import {Chart, DataSeries, Pie} from 'diffract';

// ...And use it in your code
class DeathStar extends Component {

  render: function() {
    return (
        <Chart width={width} height={height}>
            <DataSeries data={this.state.values}>
                <Pie innerRadius={75} outerRadius={110}
                    style={(d, i) => ({fill: this.getColors(i)})}>
                    <text className="donut-title" textAnchor="middle"
                        x={0} y={0} fontSize={18}>
                        {'Hello'}
                    </text>
                    <text className="donut-subtitle" textAnchor="middle"
                        x={0} y={18} fontSize={10}>
                        {'diffract'}
                    </text>
                </Pie>
            </DataSeries>
        </Chart>
    );
  }

}

```

## More Examples
See [examples](https://github.com/ameyms/diffract/blob/master/example/demo.jsx) for more
examples including Donuts, BarChart, stacked bar chart, grouped bar chart etc.
## Demo
### Donut
![Donut](https://raw.github.com/ameyms/diffract/master/etc/donut.gif)

### Bar Graph
![Bar Graph](https://raw.github.com/ameyms/diffract/master/etc/bar_graph_1.gif)




----


  License: MIT

---
_Source: https://npm.io/package/diffract · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._