title: How to handle data occlusion in d3js?
body: <p>I am trying to create a sort of raw distribution of the data with:</p>
  
  <ul>
  <li>X axis: Person (a or b)</li>
  <li>Y axis: Intensity (on a scale of 0 to 4)</li>
  </ul>
  
  <p>Is there any way in which I can prevent data points from occluding each other? Such as, when there is an existing data point the next data point with the same value (different date) is positioned at an offset from it, as shown in the images below.</p>
  
  <p><em>Current status of the plot</em>
  <img src="https://i.stack.imgur.com/YVcq3.png" alt="Current status of plot"></p>
  
  <p><em>Desired status of the plot</em>
  <img src="https://i.stack.imgur.com/fYUnO.png" alt="Desired status of plot"></p>
  
  <p>I am open to changing the data format to get the end result.</p>
  
  <pre><code>Dataset:
  
      condition   intensity   date
      a   2   1
      a   3   2
      a   0   3
      a   1   4
      b   3   5
      b   3   6
      b   4   7
      b   4   8
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
  
  var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
  
  var y = d3.scale.linear()
    .range([height, 0]);
  
  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
  
  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5);
  
  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  d3.csv("data.csv", type, function(error, data) {
    if (error) throw error;
  
    x.domain(data.map(function(d) {
      return d.condition;
    }));
    y.domain([0, 4]);
  
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
  
    svg.selectAll(".point")
      .data(data)
      .enter().append("path")
      .attr("class", "point")
      .attr("d", d3.svg.symbol().type("square").size([500]))
      .attr("transform", function(d) {
        return "translate(" + x(d.condition) + "," + y(d.intensity) + ")";
      });
  });
  
  
  function type(d) {
    d.severity = +d.severity;
    return d;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bar {
    fill: steelblue;
  }
  .bar:hover {
    fill: brown;
  }
  .axis {
    font: 10px sans-serif;
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>