text: ---
  layout: default
  title: How to use scatter plot
  ---
  
  # How to use scatter plot
  Here's an example code regarding the use of scatter plot: 
  
  ```yaml
  dashboard "Example": 
    - 
      scatter plot: 
        xs: 
          setosa: "setosa_x"
          versicolor: "versicolor_x"
        columns: 
          - 
            - "setosa_x"
            - 3.5
            - 3
            - 3.2
            - 3.1
            - 3.6
            - 3.9
            - 3.4
            - 3.4
            - 2.9
            - 3.1
            - 3.7
            - 3.4
            - 3
            - 3
            - 4
            - 4.4
            - 3.9
            - 3.5
            - 3.8
            - 3.8
            - 3.4
            - 3.7
            - 3.6
            - 3.3
            - 3.4
            - 3
            - 3.4
            - 3.5
            - 3.4
            - 3.2
            - 3.1
            - 3.4
            - 4.1
            - 4.2
            - 3.1
            - 3.2
            - 3.5
            - 3.6
            - 3
            - 3.4
            - 3.5
            - 2.3
            - 3.2
            - 3.5
            - 3.8
            - 3
            - 3.8
            - 3.2
            - 3.7
            - 3.3
          - 
            - "versicolor_x"
            - 3.2
            - 3.2
            - 3.1
            - 2.3
            - 2.8
            - 2.8
            - 3.3
            - 2.4
            - 2.9
            - 2.7
            - 2
            - 3
            - 2.2
            - 2.9
            - 2.9
            - 3.1
            - 3
            - 2.7
            - 2.2
            - 2.5
            - 3.2
            - 2.8
            - 2.5
            - 2.8
            - 2.9
            - 3
            - 2.8
            - 3
            - 2.9
            - 2.6
            - 2.4
            - 2.4
            - 2.7
            - 2.7
            - 3
            - 3.4
            - 3.1
            - 2.3
            - 3
            - 2.5
            - 2.6
            - 3
            - 2.6
            - 2.3
            - 2.7
            - 3
            - 2.9
            - 2.9
            - 2.5
            - 2.8
          - 
            - "setosa"
            - 0.2
            - 0.2
            - 0.2
            - 0.2
            - 0.2
            - 0.4
            - 0.3
            - 0.2
            - 0.2
            - 0.1
            - 0.2
            - 0.2
            - 0.1
            - 0.1
            - 0.2
            - 0.4
            - 0.4
            - 0.3
            - 0.3
            - 0.3
            - 0.2
            - 0.4
            - 0.2
            - 0.5
            - 0.2
            - 0.2
            - 0.4
            - 0.2
            - 0.2
            - 0.2
            - 0.2
            - 0.4
            - 0.1
            - 0.2
            - 0.2
            - 0.2
            - 0.2
            - 0.1
            - 0.2
            - 0.2
            - 0.3
            - 0.3
            - 0.2
            - 0.6
            - 0.4
            - 0.3
            - 0.2
            - 0.2
            - 0.2
            - 0.2
          - 
            - "versicolor"
            - 1.4
            - 1.5
            - 1.5
            - 1.3
            - 1.5
            - 1.3
            - 1.6
            - 1
            - 1.3
            - 1.4
            - 1
            - 1.5
            - 1
            - 1.4
            - 1.3
            - 1.4
            - 1.5
            - 1
            - 1.5
            - 1.1
            - 1.8
            - 1.3
            - 1.5
            - 1.2
            - 1.3
            - 1.4
            - 1.4
            - 1.7
            - 1.5
            - 1
            - 1.1
            - 1
            - 1.2
            - 1.6
            - 1.5
            - 1.6
            - 1.5
            - 1.3
            - 1.3
            - 1.3
            - 1.2
            - 1.4
            - 1.2
            - 1
            - 1.3
            - 1.2
            - 1.3
            - 1.3
            - 1.1
            - 1.3
  
  ```
  The code above will render a scatter plot that looks like this:
  
  ![](../screenshots/scatter_plot.png)
  
  ## JSON format
  The YAML above is equivalent to this JSON:
  ```json
  {
    "component": "root",
    "args": {
      "title": "Example"
    },
    "data": [
      {
        "component": "chart",
        "args": {
          "type": "scatter",
          "stacked": false
        },
        "data": {
          "xs": {
            "setosa": "setosa_x",
            "versicolor": "versicolor_x"
          },
          "columns": [
            [
              "setosa_x",
              3.5,
              3,
              3.2,
              3.1,
              3.6,
              3.9,
              3.4,
              3.4,
              2.9,
              3.1,
              3.7,
              3.4,
              3,
              3,
              4,
              4.4,
              3.9,
              3.5,
              3.8,
              3.8,
              3.4,
              3.7,
              3.6,
              3.3,
              3.4,
              3,
              3.4,
              3.5,
              3.4,
              3.2,
              3.1,
              3.4,
              4.1,
              4.2,
              3.1,
              3.2,
              3.5,
              3.6,
              3,
              3.4,
              3.5,
              2.3,
              3.2,
              3.5,
              3.8,
              3,
              3.8,
              3.2,
              3.7,
              3.3
            ],
            [
              "versicolor_x",
              3.2,
              3.2,
              3.1,
              2.3,
              2.8,
              2.8,
              3.3,
              2.4,
              2.9,
              2.7,
              2,
              3,
              2.2,
              2.9,
              2.9,
              3.1,
              3,
              2.7,
              2.2,
              2.5,
              3.2,
              2.8,
              2.5,
              2.8,
              2.9,
              3,
              2.8,
              3,
              2.9,
              2.6,
              2.4,
              2.4,
              2.7,
              2.7,
              3,
              3.4,
              3.1,
              2.3,
              3,
              2.5,
              2.6,
              3,
              2.6,
              2.3,
              2.7,
              3,
              2.9,
              2.9,
              2.5,
              2.8
            ],
            [
              "setosa",
              0.2,
              0.2,
              0.2,
              0.2,
              0.2,
              0.4,
              0.3,
              0.2,
              0.2,
              0.1,
              0.2,
              0.2,
              0.1,
              0.1,
              0.2,
              0.4,
              0.4,
              0.3,
              0.3,
              0.3,
              0.2,
              0.4,
              0.2,
              0.5,
              0.2,
              0.2,
              0.4,
              0.2,
              0.2,
              0.2,
              0.2,
              0.4,
              0.1,
              0.2,
              0.2,
              0.2,
              0.2,
              0.1,
              0.2,
              0.2,
              0.3,
              0.3,
              0.2,
              0.6,
              0.4,
              0.3,
              0.2,
              0.2,
              0.2,
              0.2
            ],
            [
              "versicolor",
              1.4,
              1.5,
              1.5,
              1.3,
              1.5,
              1.3,
              1.6,
              1,
              1.3,
              1.4,
              1,
              1.5,
              1,
              1.4,
              1.3,
              1.4,
              1.5,
              1,
              1.5,
              1.1,
              1.8,
              1.3,
              1.5,
              1.2,
              1.3,
              1.4,
              1.4,
              1.7,
              1.5,
              1,
              1.1,
              1,
              1.2,
              1.6,
              1.5,
              1.6,
              1.5,
              1.3,
              1.3,
              1.3,
              1.2,
              1.4,
              1.2,
              1,
              1.3,
              1.2,
              1.3,
              1.3,
              1.1,
              1.3
            ]
          ]
        }
      }
    ]
  }
  ```
  