title: Creating a scatter plot using Plotly.js with multiple Y for common X's
body: <p>This is the graph that I've created currently.
  It looks the way I want it to, but it doesn't behave the way I want it to.</p>
  
  <p><a href="http://i.stack.imgur.com/y9nea.png" rel="nofollow">Current Graph</a></p>
  
  <p>Hello, I am trying to create a scatter plot using Plotly.js, and I am having trouble with markers being buggy (or I just wrote the code in a wrong way).</p>
  
  <p>This is my current code on how I am formatting the data:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var formatData2 = function(antibacData) {
      console.log("Data formatting begins now ---------------");
      var plotData = {};
      var antibiotics = {
          neomycin: [],
          penicilin: [],
          streptomycin: []
      };
      var gramstain = [];
      
      antibacData.forEach(function(d) {
          if (d != null) {
              var gramStain;
              // Converts gramstain string data to boolean
              if (d["Gram Staining "] == "positive") {
                  gramStain = "rgba(102, 51, 153, 0.7)";
              } else {
                  gramStain = "rgba(255, 47, 47, 0.7)";
              }
              
              plotData[d["Bacteria "]] = {
                  stain : gramStain,
                  neomycin : d["Neomycin"],
                  penicilin : d["Penicilin"],
                  streptomycin : d["Streptomycin "]
              };
          }
      });
      var keys = Object.keys(antibiotics);
      var bactName = Object.keys(plotData);
      console.log(keys);
      console.log(bactName);
      
      antibacData.forEach(function(d) {
          antibiotics.neomycin.push(d["Neomycin"]);
          antibiotics.penicilin.push(d["Penicilin"]);
          antibiotics.streptomycin.push(d["Streptomycin "]);
      });
      console.log(antibiotics);
      
      var name1 = new Array(16).fill('Neomycin');
      var name2 = new Array(16).fill('Penicilin');
      var name3 = new Array(16).fill('Streptomycin');
      
      var group1 = {
          x: name1,
          y: antibiotics.neomycin,
          name: 'Neomycin',
          mode: 'markers',
          type: 'scatter',
          text: bactName
      };
  
      var group2 = {
          x: name2,
          y: antibiotics.penicilin,
          name: 'Penicilin',
          mode: 'markers',
          type: 'scatter',
          text: bactName
      };
      
      var group3 = {
          x: name3,
          y: antibiotics.streptomycin,
          name: 'Streptomycin',
          mode: 'markers',
          type: 'scatter',
          text: bactName
      };
      
      var resultData = [group1, group2, group3];
      
      console.log("Data formatting ends now -----------------");
      
      return resultData;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's pretty long (sorry about that).
  Basically, I created a marker for each bacteria using antibacterials as x-axes, and their MIC as the y-axis.</p>
  
  <p>However, when I plot the data, it doesn't allow me to hover over each marker to display the individual data associated with it. It will only allow me to hover over one marker for each X (or each antibacterial).</p>
  
  <p>Is there a way to fix this? or am I just approaching it in a wrong way. </p>