https://github.com/ameyms/diffract

A set of d3 based visualization components built for React
https://github.com/ameyms/diffract

chart d3 donut graph javascript react reactjs visual-components visualization

Last synced: about 2 months ago
JSON representation

A set of d3 based visualization components built for React

• Host: GitHub
• URL: https://github.com/ameyms/diffract
• Owner: ameyms
• License: mit
• Created: 2015-02-04T08:06:27.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-05-09T17:36:48.000Z (over 8 years ago)
• Last Synced: 2024-05-14T03:23:18.809Z (4 months ago)
• Topics: chart, d3, donut, graph, javascript, react, reactjs, visual-components, visualization
• Language: JavaScript
• Homepage: http://diffract.js.org/
• Size: 2.45 MB
• Stars: 87
• Watchers: 9
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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 (

        

            

                 ({fill: this.getColors(i)})}>

                    

                        {'Hello'}

                    

                    

                        {'diffract'}

                    

                

            

        

    );

  }

}

```

## 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