diff --git a/README.md b/README.md index efd4eeaa5..bbd944ac9 100644 --- a/README.md +++ b/README.md @@ -5,166 +5,8 @@ [![NPM version][npm-image]][npm-url] [![Dependencies][gemnasium-image]][gemnasium-url] -**nivo** provides supercharged React components to easily build dataviz apps, it's built on d3. +**nivo** provides supercharged React components to easily build dataviz apps, it's built on top of d3. -- [Layouts](#layouts) - - [Pie](#pie) - - [Legends](#pie-legends) - - [Column](#piecolumnlegends) - - [Radial](#pieradiallegends) - - [Slice](#pieslicelegends) - - [Combining](#combining-pie-legends) - - [Stack](#stack) -- [Colors](#colors) - -## Layouts - -### Pie - -Pie - -Use [d3 Pie layout](https://github.com/mbostock/d3/wiki/Pie-Layout). - -```javascript -import { Chart, Pie } from 'nivo'; - -// ... - -React.render(( - - - -), document.getElementById('pie')); -``` - -#### properties - -key | required | default | description ------------------------|----------|-----------|---------------------------- -**sort** | no | `null` | -**data** | yes | — | -**keyProp** | yes | `'label'` | -**valueProp** | yes | `'value'` | -**startAngle** | yes | `0` | -**endAngle** | yes | `360` | -**padAngle** | yes | `0` | -**transitionDuration** | yes | | -**transitionEasing** | yes | | -**innerRadius** | yes | `0 | - -#### Pie Legends - -##### PieColumnLegends - -PieColumnLegends - -Distribute legends on left/right side of the pie with a link to the corresponding slice. - -```javascript -import { Chart, Pie, PieColumnLegends } from 'nivo'; - -// ... - -React.render(( - - - - - -), document.getElementById('pie')); -``` - -###### properties - -key | required | default | description ----------------------|----------|-------------|---------------------------- -**labelFn** | no | `undefined` | -**radiusOffset** | yes | `16` | -**horizontalOffset** | yes | `30` | -**textOffset** | yes | `10` | -**lineColor** | yes | `'none'` | see [colors](#colors) -**textColor** | yes | `'none'` | see [colors](#colors) - - - -##### PieRadialLegends - -PieRadialLegends - -Radial legend distribution around your pie. - -```javascript -import { Chart, Pie, PieRadialLegends } from 'nivo'; - -// ... - -React.render(( - - - - - -), document.getElementById('pie')); -``` - -##### PieSliceLegends - -PieSliceLegends - -Distribute legends inside each pie slice. This component is useful to display data value on each pie slice, -but won't work well with labels. - -```javascript -import { Chart, Pie, PieSliceLegends } from 'nivo'; - -// ... - -React.render(( - - - - - -), document.getElementById('pie')); -``` - -##### Combining Pie legends - -PieSliceLegends - -You can combine different legends on a single pie, for example, you can have the value displayed on each pie slice plus a label outside it. -Note that the `labelFn` of the `PieSliceLegends` is overridden in order to use data value instead of label. - -```javascript -import { Chart, Pie, PieRadialLegends, PieSliceLegends } from 'nivo'; - -// ... - -React.render(( - - - - d.data.value} /> - - -), document.getElementById('pie')); -``` - -### Stack - -Use [d3 Stack layout](https://github.com/mbostock/d3/wiki/Stack-Layout) - -## Colors - -Beside highlighting data insights, your dataviz should be pretty, right ? -**nivo** provides an easy way to deal with colors, very useful when dealing with nested components. - -A lot of components have a `*Color` property, but what can we pass to it ? - -- `none` will do nothing, it's often the default, it's useful if you manage chart styles via external **css** -- `inherit` will use color from parent context/component -- `inherit:darker(.5)` will use parent context/component color, and apply [`darker`](https://github.com/mbostock/d3/wiki/Colors#rgb_darker) function on it with an amount of `.5` -- `inherit:brighter(1)` will use parent context/component color, and apply [`brighter`](https://github.com/mbostock/d3/wiki/Colors#rgb_brighter) function on it with an amount of `1` [license-image]: https://img.shields.io/github/license/plouc/nivo.svg?style=flat-square [license-url]: https://github.com/plouc/nivo/blob/master/LICENSE.md diff --git a/doc/nivo-pie-legends-column.png b/doc/nivo-pie-legends-column.png deleted file mode 100644 index ee16080ea..000000000 Binary files a/doc/nivo-pie-legends-column.png and /dev/null differ diff --git a/doc/nivo-pie-legends-radial-slice.png b/doc/nivo-pie-legends-radial-slice.png deleted file mode 100644 index ea7bd4ddf..000000000 Binary files a/doc/nivo-pie-legends-radial-slice.png and /dev/null differ diff --git a/doc/nivo-pie-legends-radial.png b/doc/nivo-pie-legends-radial.png deleted file mode 100644 index 3f60924f2..000000000 Binary files a/doc/nivo-pie-legends-radial.png and /dev/null differ diff --git a/doc/nivo-pie-legends-slice.png b/doc/nivo-pie-legends-slice.png deleted file mode 100644 index 42c327a82..000000000 Binary files a/doc/nivo-pie-legends-slice.png and /dev/null differ diff --git a/doc/nivo-pie.png b/doc/nivo-pie.png deleted file mode 100644 index 3b84fff61..000000000 Binary files a/doc/nivo-pie.png and /dev/null differ