Skip to content
Permalink
Browse files

add bubble chart docs

  • Loading branch information...
mutsumiya committed Mar 8, 2019
1 parent 7ef4853 commit f2f5cfa86e6563e9f71c323e302aae9b5475dad2
Showing with 74 additions and 16 deletions.
  1. +2 −2 docs/README.md
  2. +37 −0 docs/charts/bubble-chart.md
  3. +30 −11 package-lock.json
  4. +5 −3 src/docs.story.tsx
@@ -18,8 +18,8 @@
- [Sparklines](charts/sparklines.md)
- [Sankey Chart](charts/sankey.md)
- [Hive Plot](charts/hive-plot.md)
- Scatter Plot
- Bubble Chart
- [Scatter Plot](charts/scatter-plot.md)
- [Bubble Chart](charts/bubble-chart.md)
- Utilities
- Brush
- Pan Zoom
@@ -0,0 +1,37 @@
# Bubble Chart

The bubble chart is a variation of the scatter plot and supports a third dimension/variable whose value is represented by the size of the dots.

View [Demo Source Code](https://github.com/jask-oss/reaviz/blob/master/src/ScatterPlot/ScatterPlot.story.tsx#L109)

### Basic Example

In this example, the bubble size is given by the `size` property of each data point.

Since the bubble chart is supported by the scatter plot, you can use all the other supported features by the scatter plot components.

```jsx
import { ScatterPlot, ScatterSeries, ScatterPoint } from 'reaviz';
const data = [
{ key: new Date(), data: 10, size: 6 },
...more data...
];
<ScatterPlot
height={400}
width={750}
data={data}
margins={20}
series={
<ScatterSeries
point={
<ScatterPoint
fill="rgba(174, 52, 255, .5)"
size={d => d.size}
/>
}
/>
}
/>
```

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -17,6 +17,7 @@ import * as mapDoc from '../docs/charts/map.md';
import * as sankeyDoc from '../docs/charts/sankey.md';
import * as hiveDoc from '../docs/charts/hive-plot.md';
import * as scatterPlot from '../docs/charts/scatter-plot.md';
import * as bubbleChart from '../docs/charts/bubble-chart.md';

import * as customChartsDoc from '../docs/advanced/custom-charts.md';
import * as animationsDoc from '../docs/advanced/animations.md';
@@ -36,14 +37,15 @@ storiesOf('Documentation/Getting Started', module)

storiesOf('Documentation/Charts', module)
.add('Area Chart', () => <Markdown source={areaChartDoc} />)
.add('Line Chart', () => <Markdown source={lineChartDoc} />)
.add('Bar Chart', () => <Markdown source={barChartDoc} />)
.add('Line Chart', () => <Markdown source={lineChartDoc} />)
.add('Map', () => <Markdown source={mapDoc} />)
.add('Pie Chart', () => <Markdown source={pieChartDoc} />)
.add('Sparklines', () => <Markdown source={sparklineDoc} />)
.add('Map', () => <Markdown source={mapDoc} />)
.add('Sankey Diagram', () => <Markdown source={sankeyDoc} />)
.add('Hive Plot', () => <Markdown source={hiveDoc} />)
.add('Scatter Plot', () => <Markdown source={scatterPlot} />);
.add('Scatter Plot', () => <Markdown source={scatterPlot} />)
.add('Bubble Chart', () => <Markdown source={bubbleChart} />);

storiesOf('Documentation/Advanced', module)
.add('Custom Charts', () => <Markdown source={customChartsDoc} />)

0 comments on commit f2f5cfa

Please sign in to comment.
You can’t perform that action at this time.