---
title: Multi-series Scatterplot
charts:
  - Scatter Plot
---
<h5>{{title}}</h5>
<p>This examples how you can map multiple data series in a scatter plot</p>
<hr/>
<script type="text/javascript" charset="utf-8" id='source_code'>
'use strict';

$(document).ready(function(){
  var data = [
      { age: 12, state: 'mo', unitsSold: 0,    month: 1 },
      { age: 22, state: 'mo', unitsSold: 200,  month: 2 },
      { age: 42, state: 'mo', unitsSold: 300,  month: 3 },
      { age: 32, state: 'mo', unitsSold: 400,  month: 4 },
      { age: 22, state: 'mo', unitsSold: 500,  month: 5 },
      { age: 12, state: 'mo', unitsSold: 100,  month: 6 },
      { age: 72, state: 'mo', unitsSold: 100,  month: 7 },
      { age: 42, state: 'mo', unitsSold: -200, month: 8 },
      { age: 32, state: 'ks', unitsSold: 500,  month: 9 },
      { age: 12, state: 'ks', unitsSold: 600,  month: 10 },
      { age: 62, state: 'ks', unitsSold: 400,  month: 11 },
      { age: 82, state: 'ks', unitsSold: 0,    month: 12 },
      { age: 92, state: 'ks', unitsSold: 400,  month: 1 },
      { age: 12, state: 'ks', unitsSold: 400,  month: 2 },
      { age: 2 , state: 'ks', unitsSold: 400,  month: 2 }
    ];
  var parsedData = d4.parsers.nestedGroup()
    .x('age')
    .y('month')
    .nestKey('state')
    .value('unitsSold')(data);

  var chart = d4.charts.scatterPlot()
  .width($('#example').width())
  .mixin({'grid' : d4.features.grid},0)
  .x(function(x){
    x.min(-250)
    .max(610)
    .key('unitsSold');
  })
  .y(function(y){
    y.max(14)
    .min(-2)
    .key('month');
  })
  .z(function(z){
    z.key('age');
  });

  d3.select('#example')
  .datum(parsedData.data)
  .call(chart);
});
</script>
<div id="multi_scatter">
  <div id="example"></div>
</div>
<h6>CSS Code</h6>
<pre><code class="language-css">
  #multi_scatter .d4 .grid.border rect {
      fill: none;
      stroke: #aaa;
      stroke-width: 1px;
      shape-rendering: crispEdges;
  }

  #multi_scatter .d4 .grid line {
      fill:none;
      stroke: #aaa;
      stroke-width: 1px;
      stroke-dasharray :5, 5;
      shape-rendering: crispEdges;
  }

  #multi_scatter .d4 .series0 {
      fill: bisque;
      fill-opacity: 0.6;
      stroke: bisque;
      stroke-width: 1px;
  }

  #multi_scatter .d4 .series1 {
      fill: darkslategrey;
      fill-opacity: 0.6;
      stroke: darkslategrey;
      stroke-width: 2px;
  }
</code></pre>
<h6>JavaScript Code</h6>
<pre><code id="code" class="language-javascript"></code></pre>