I am looking to create a chart like this -- that shows the various different relationships in a horizontal plane.

[![enter image description here](https://i.stack.imgur.com/fGrGn.png)](https://i.stack.imgur.com/fGrGn.png)

So I envision the data will look like this

```
[{
    "name": "Twitter",
    "vistsperday": "15 billion",
    "employeecount": 450
}, {
    "name": "Facebook",
    "vistsperday": "5 billion",
    "employeecount": 2000
}, {
    "name": "Google",
    "vistsperday": "5 billion",
    "employeecount": 25000
}, {
    "name": "Netflix",
    "vistsperday": "10 billion",
    "employeecount": 2200
}, {
    "name": "Ebay",
    "vistsperday": "8 billion",
    "employeecount": 17700
}, {
    "name": "Klout",
    "vistsperday": "2 billion",
    "employeecount": 45
}]

```

I have started a jsfiddle here.
deriving from <https://bost.ocks.org/mike/circles/> - three little circles
\* Latest fiddle - <http://jsfiddle.net/NYEaX/1425/>

* The problem I am having first - is all of the data in the array has to be different values otherwise the circle won't render
* How to contract/squash the circles closer together -I've tried adjusting the cx formula but to no affect.

here is the current structure of the code from the latest fiddle.

//code

```
        $(document).ready(function() {

  var rawData = [{
    "name": "Twitter",
    "vistsperday": "15 billion",
    "employeecount": 450
  }, {
    "name": "Facebook",
    "vistsperday": "5 billion",
    "employeecount": 2000
  }, {
    "name": "Google",
    "vistsperday": "5 billion",
    "employeecount": 25000
  }, {
    "name": "Netflix",
    "vistsperday": "10 billion",
    "employeecount": 2200
  }, {
    "name": "Ebay",
    "vistsperday": "8 billion",
    "employeecount": 17700
  }, {
    "name": "Klout",
    "vistsperday": "2 billion",
    "employeecount": 45
  }];

  var width = 700;
  var height = 500;
  var margin = {
    top: 20,
    right: 100,
    bottom: 30,
    left: 100
  }

  //serieschart
  var svg = d3.select(".serieschart").append("svg")
    .attr("class", "serieschart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var bluedata = [5000,2000,2000,1600,701,1603];

  //blue layer
    var bluelayer = svg.append("g")
                                .attr("class", "bluelayer")

  var bluecircle = bluelayer.selectAll("circle")
    .data(bluedata);

  bluecircle.enter().append("circle")
    .attr("class", "blue")
    .attr("cy", 60)
    .attr("cx", function(d, i) {
      return (i * 60) + 10;
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });

  bluecircle.exit().remove();

  var golddata = [32, 57, 293,31, 455, 296];
    //gold layer
    var goldlayer = svg.append("g")
                                .attr("class", "goldlayer")

  var goldcircle = goldlayer.selectAll("circle")
    .data(golddata);

  goldcircle.enter().append("circle")
    .attr("class", "gold")
    .attr("cy", 60)
    .attr("cx", function(d, i) {
      return (i * 60) + 10;
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });

  goldcircle.exit().remove();

});

```