title: Google Charts Bubble charts no overlap?
body: <p>I made a glorious <a href="http://savedbythegoog.appspot.com/?id=05ca1a3b61be424ba33d291de8cbbe8e3c987803" rel="nofollow">Bubble Chart</a> with <a href="https://code.google.com/apis/ajax/playground/?type=visualization#hpvs_mbti_chart" rel="nofollow">Google Visualization</a>.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!--
  You are free to copy and use this sample in accordance with the terms of the
  Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
  --&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;
        Google Visualization API Sample
      &lt;/title&gt;
      &lt;script type="text/javascript" src="//www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.load('visualization', '1', {packages: ['corechart']});
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        &lt;!--
        You are free to copy and use this sample in accordance with the terms of the
        Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
        --&gt;
  
        &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
        &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
          &lt;head&gt;
            &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
            &lt;title&gt;
              Google Visualization API Sample
            &lt;/title&gt;
            &lt;script type="text/javascript" src="//www.google.com/jsapi"&gt;&lt;/script&gt;
            &lt;script type="text/javascript"&gt;
              google.load('visualization', '1', {packages: ['corechart']});
            &lt;/script&gt;
            &lt;script type="text/javascript"&gt;
              function drawVisualization() {
                  // Create and populate the data table.
                  var data = google.visualization.arrayToDataTable([
                 ['ID','X','Y','Colour','Size'],
        ['Ravenclaw - ISTJ',2,28,'blue',4.519342105263158],
        ['Ravenclaw - ISFJ',2,56,'blue',9.813428571428572],
        ['Ravenclaw - INFJ',2,84,'blue',4.014584415584415],
        ['Ravenclaw - INTJ',2,112,'blue',6.503031999999999],
        ['Ravenclaw - ISTP',2,140,'blue',3.180277777777778],
        ['Ravenclaw - ISFP',2,168,'blue',4.906714285714286],
        ['Ravenclaw - INFP',2,196,'blue',5.627474576271186],
        ['Ravenclaw - INTP',2,224,'blue',5.8676125],
        ['Ravenclaw - ESTP',2,252,'blue',5.7245],
        ['Ravenclaw - ESFP',2,280,'blue',4.293375],
        ['Ravenclaw - ENFP',2,308,'blue',3.816333333333333],
        ['Ravenclaw - ENTP',2,336,'blue',5.7245],
        ['Ravenclaw - ESTJ',2,364,'blue',7.155625],
        ['Ravenclaw - ESFJ',2,392,'blue',6.542285714285715],
        ['Ravenclaw - ENFJ',2,420,'blue',2.453357142857143],
        ['Ravenclaw - ENTJ',2,448,'blue',2.2898],
        ['Hufflepuff - ISTJ',5,28,'yellow',8.803913192071086],
        ['Hufflepuff - ISFJ',5,56,'yellow',2.655148423005566],
        ['Hufflepuff - INFJ',5,84,'yellow',9.655085174565695],
        ['Hufflepuff - INTJ',5,112,'yellow',2.379012987012987],
        ['Hufflepuff - ISTP',5,140,'yellow',4.13023088023088],
        ['Hufflepuff - ISFP',5,168,'yellow',10.620593692022263],
        ['Hufflepuff - INFP',5,196,'yellow',8.820493066255777],
        ['Hufflepuff - INTP',5,224,'yellow',3.252556818181818],
        ['Hufflepuff - ESTP',5,252,'yellow',6.195346320346321],
        ['Hufflepuff - ESFP',5,280,'yellow',9.293019480519481],
        ['Hufflepuff - ENFP',5,308,'yellow',2.478138528138528],
        ['Hufflepuff - ENTP',5,336,'yellow',4.37318563789152],
        ['Hufflepuff - ESTJ',5,364,'yellow',0],
        ['Hufflepuff - ESFJ',5,392,'yellow',10.620593692022263],
        ['Hufflepuff - ENFJ',5,420,'yellow',5.310296846011132],
        ['Hufflepuff - ENTJ',5,448,'yellow',3.717207792207792],
        ['Gryffindor - ISTJ',8,28,'Red',3.423744019138756],
        ['Gryffindor - ISFJ',8,56,'Red',1.858603896103896],
        ['Gryffindor - INFJ',8,84,'Red',5.744775678866588],
        ['Gryffindor - INTJ',8,112,'Red',3.538781818181818],
        ['Gryffindor - ISTP',8,140,'Red',8.673484848484847],
        ['Gryffindor - ISFP',8,168,'Red',0],
        ['Gryffindor - INFP',8,196,'Red',4.851271186440678],
        ['Gryffindor - INTP',8,224,'Red',5.52934659090909],
        ['Gryffindor - ESTP',8,252,'Red',0],
        ['Gryffindor - ESFP',8,280,'Red',9.757670454545455],
        ['Gryffindor - ENFP',8,308,'Red',13.010227272727272],
        ['Gryffindor - ENTP',8,336,'Red',6.122459893048127],
        ['Gryffindor - ESTJ',8,364,'Red',3.252556818181818],
        ['Gryffindor - ESFJ',8,392,'Red',0],
        ['Gryffindor - ENFJ',8,420,'Red',11.151623376623377],
        ['Gryffindor - ENTJ',8,448,'Red',7.806136363636362],
        ['Slytherin - ISTJ',11,28,'green',6.917360365198712],
        ['Slytherin - ISFJ',11,56,'green',0],
        ['Slytherin - INFJ',11,84,'green',4.930989928438907],
        ['Slytherin - INTJ',11,112,'green',6.775938775510204],
        ['Slytherin - ISTP',11,140,'green',8.11295351473923],
        ['Slytherin - ISFP',11,168,'green',8.344752186588922],
        ['Slytherin - INFP',11,196,'green',2.475138360428917],
        ['Slytherin - INTP',11,224,'green',5.47624362244898],
        ['Slytherin - ESTP',11,252,'green',9.735544217687076],
        ['Slytherin - ESFP',11,280,'green',0],
        ['Slytherin - ENFP',11,308,'green',2.920663265306123],
        ['Slytherin - ENTP',11,336,'green',4.295093037214887],
        ['Slytherin - ESTJ',11,364,'green',7.301658163265307],
        ['Slytherin - ESFJ',11,392,'green',4.172376093294461],
        ['Slytherin - ENFJ',11,420,'green',6.258564139941692],
        ['Slytherin - ENTJ',11,448,'green',11.682653061224489]
                  ]);
  
                  var options = {
                    title: 'Correlation between MBTI Type and Harry Potter House (Google docs survey)',
                    hAxis: {title: 'House'},
                    vAxis: {title: 'Type'},
  
                    bubble: {textStyle: {fontSize: 11}}
                  };
  
                  // Create and draw the visualization.
                  var chart = new google.visualization.BubbleChart(
                      document.getElementById('visualization'));
                  chart.draw(data, options);
              }
  
  
              google.setOnLoadCallback(drawVisualization);
            &lt;/script&gt;
          &lt;/head&gt;
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body style="font-family: Arial;border: 0 none;"&gt;
      &lt;a href="http://goo.gl/fzOxy"&gt;Google Docs Survey&lt;/a&gt;
      &lt;div id="visualization" style="width: 600px; height: 400px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  ​
  </code></pre>
  
  <p>(The Data is set up so that each point is spaced by the maximum value of size in the Y-axis)</p>
  
  <p>My first task to clean this up is to space the bubbles so they don't overlap. <code>minSize</code> seems to be able to shrink the individual bubbles but it doesn't actually space them out exactly. Changing the positional data doesn't seem to do anything to the spacing (as they're all relative?). So I'm struggling to see how I can stop the overlap of bubbles.</p>
  
  <p>How do I do this?</p>