# Scatter Plot

A scatter plot is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. 

## Example

![example scatter plot](imgs/scatterPlot_example_1.png)

```js

import React from 'react';
import ReactDom from 'react-dom';
import r3 from 'r3-charts'

// get line chart component
const ScatterPlot = r3.ScatterPlot;

// source data
const data = [
  {x:15,y:3,z:1},
  {x:1,y:-14,z:5},
  {x:-5,y:-8,z:4},
  {x:13,y:13,z:6},
  {x:18,y:-8,z:5},
  {x:-14,y:11,z:2},
  {x:0,y:0,z:4},
  {x:14,y:3,z:1}
];

const z = [2, 11];

ReactDOM.render(
  <ScatterPlot data={data} z={z}/>,
  document.getElementById('app')
);

```

## Properties

Name              | Type            | Default                       | Description
---               | ---             | ----                          | ---
data *            | array           | -                             | The source data in which each element is an object, like: `{x: 1, y: 2, z:3}`. Parameter `z` is responsible for points linear dimension is not mandatory
background        | string          | `#eee`                        | The chart background color 
chartClassName    | string          | `r3-scatter-plot`             | The class name of chart
color             | string \| array | `red`                         | If type a string is in a hex color, then it color will be filled for all the rectangles. If type array that which is color-value map then rectangles are filled in accordance with this map. More about [colorScale](../Others/colorScale.md)
height            | number          | `300`                         | The height of chart container 
padding           | object          | `{bottom: 10,left: 10,right: 15,top: 20}`    | The sizes of whitespace inside the svg container
width             | number          | `400`                         | The width of chart container 
xAxis             | object          | [XAxisOptionsDefault](../Components/XAxis.md) | X-axis options object. [XAxisOptions](../Components/XAxis.md)
xAxis.className   | string          | `r3-scatter-plot-xaxis`       | The class name of chart x-axis
xAxis.domainDelta | number          | `.5`                          | The value of the percentage of the width of the available area of the chart, which will be expanded this area (for example, the frame will fit to the tooltip and the values do not lie directly on the axis)
xAxis.height      | number          | `30`                          | The height of chart x-axis
yAxis             | object          | [YAxisOptionsDefault](../Components/YAxis.md) | Y-axis options object. [YAxisOptions](../Components/YAxis.md)
yAxis.className   | string          | `r3-scatter-plot-yaxis`       | The class name of chart y-axis
yAxis.domainDelta | number          | `.5`                          | The value of the percentage of the width of the available area of the chart, which will be expanded this area (for example, the frame will fit to the tooltip and the values do not lie directly on the axis)
yAxis.width       | number          | `35`                          | The width of chart y-axis 
z                 | number \| array | `2`                           | If type number, it value is the linear dimension of the point (radius or square side). If type is an array, like `[a, b]`, it is the linear size of the range in which it will be change. The point with the smallest value of z of data set will have at `a` linear dimension, and the point with the largest value of data set will have `b` linear dimension. Intermediate values are uniformly distributed on the interval `[a, b]`