---
title: Basic Scatter Plot
charts:
  - Scatter Plot
---
<h5>{{title}}</h5>
<p>
  This is a basic example of the scatter plot. The scatter plot has three axes:
  <code>x</code>, <code>y</code> and <code>z</code>. By default the scatter
  plot expects linear scale values for all axes. The basic scatter plot chart
  has these default features:
  <dl>
    <dt>Accessors</dt>
    <dd><code>circles</code> - series of circles</dd>
    <dd><code>xAxis</code> - the axis for the <code>x</code> dimension</dd>
    <dd><code>yAxis</code> - the axis for the <code>y</code> dimension</dd>
   </dl>
</p>

<hr/>
<script type="text/javascript" charset="utf-8" id='source_code'>
'use strict';

$(document).ready(function(){
  var data = [
      { age: 12, unitsSold: 0,    month: 1 },
      { age: 23, unitsSold: 200,  month: 2 },
      { age: 44, unitsSold: 300,  month: 3 },
      { age: 35, unitsSold: 400,  month: 4 },
      { age: 26, unitsSold: 500,  month: 5 },
      { age: 17, unitsSold: 100,  month: 6 },
      { age: 78, unitsSold: 100,  month: 7 },
      { age: 49, unitsSold: -200, month: 8 },
      { age: 30, unitsSold: 500,  month: 9 },
      { age: 11, unitsSold: 600,  month: 10 },
      { age: 62, unitsSold: 400,  month: 11 },
      { age: 83, unitsSold: 0,    month: 12 }
    ];

  var chart = d4.charts.scatterPlot()
  .width($('#example').width())
  .x(function(x){
    x.min(-10);
    x.key('age');
  })
  .y(function(y){
    y.key('month');
  })
  .valueKey('unitsSold')
  .z(function(z){
    z.key('unitsSold');
  });

  d3.select('#example')
  .datum(data)
  .call(chart);
});
</script>
<div id="scatter">
  <div id="example"></div>
</div>
<h6>JavaScript Code</h6>
<pre><code id="code" class="language-javascript"></code></pre>