ameyms / Diffract
Licence: mit
A set of d3 based visualization components built for React
Stars: ✭ 87
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Diffract
Vue D3 Network
Vue component to graph networks using d3-force
Stars: ✭ 415 (+377.01%)
Mutual labels: graph, chart, d3
React D3 Components
D3 Components for React
Stars: ✭ 1,599 (+1737.93%)
Mutual labels: graph, chart, d3
Billboard.js
📊 Re-usable, easy interface JavaScript chart library based on D3.js
Stars: ✭ 5,032 (+5683.91%)
Mutual labels: graph, chart, d3
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (+116.09%)
Mutual labels: graph, chart, d3
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (+524.14%)
Mutual labels: graph, chart, d3
Amcharts4
The most advanced amCharts charting library for JavaScript and TypeScript apps.
Stars: ✭ 907 (+942.53%)
Mutual labels: graph, chart
Multi charts
A flutter package which makes it easier to plot different types of charts with lots of customization, made purely in dart
Stars: ✭ 23 (-73.56%)
Mutual labels: graph, chart
Mpandroidchart
A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.
Stars: ✭ 34,377 (+39413.79%)
Mutual labels: graph, chart
Uplot
📈 A small, fast chart for time series, lines, areas, ohlc & bars
Stars: ✭ 6,808 (+7725.29%)
Mutual labels: graph, chart
D3 Spotmatrix
Open Source Javascript Library to render Spot Matrix Charts using D3.js
Stars: ✭ 12 (-86.21%)
Mutual labels: chart, d3
Resonance
◾️Resonance | 5kb React animation library
Stars: ✭ 1,011 (+1062.07%)
Mutual labels: graph, d3
Ember C3
📈 Ember addon library for C3, a D3-based reusable chart library.
Stars: ✭ 81 (-6.9%)
Mutual labels: chart, d3
D3fc
A collection of components that make it easy to build interactive charts with D3
Stars: ✭ 898 (+932.18%)
Mutual labels: chart, d3
Chart.xkcd
Chart.xkcd is a chart library that plots “sketchy”, “cartoony” or “hand-drawn” styled charts.
Stars: ✭ 6,982 (+7925.29%)
Mutual labels: graph, chart
Rickshaw
JavaScript toolkit for creating interactive real-time graphs
Stars: ✭ 6,506 (+7378.16%)
Mutual labels: graph, d3
Ilg
because the world needs another iOS chart library.
Stars: ✭ 13 (-85.06%)
Mutual labels: graph, chart
diffract
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
npm install diffract
Usage
After installing diffract via NPM, you may use the components in your code as follows:
/** 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 for more examples including Donuts, BarChart, stacked bar chart, grouped bar chart etc.
Demo
Donut
Bar Graph
License: MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].