Grouped scatter plot with multiple datasets D3

Question

Currently i have 3 data-sets in the form of arrays and i would like to keep one of the dataset as an Y-Axis and the rest to be plotted on the scatter plot and as X-Axis range.

So far i was able to plot just one dataset in the Y axis and one dataset in the X-Axis.

g.selectAll("scatter-dots")
  .data(y1data)
  .enter().append("svg:circle") 
  .attr("cy", function (d) { return y(d); } ) 
  .attr("cx", function (d,i) { return x(xdata[i]); } ) 

Datasets to be plotted are x1data x2data as X-Axis, And also how would the X axis range and domain change

this is my current X-Axis

var x = d3.scale.linear()
          .domain([11, d3.max(x1data)])  //i am only taking the max of one dataset.
          .range([ 0, width ]);       

The three datasets are

x1data= [11, 22, 10, 55, 44, 23, 12, 56, 100, 98, 75, 20]
x2data= [8, 41, 34, 67, 34, 13, 67, 45, 66, 3, 34, 75]
y1data = [2000, 2001, 2004, 2005, 2006,2007]

I want to achieve a scatter plot similar to This

Answer 1

Not quite sure if you want to use x2 as a third visual variable independent of the x-axis, or x1 and x2 joined together into the one series, but the key is the d3.zip function in either case - https://github.com/mbostock/d3/wiki/Arrays#d3_zip

---

For using x2 as a third variable ie for circle radius, use d3.zip to turn your three arrays into an array of three-element arrays:

var data = d3.zip ([y1data, x1data, x2data]);

data will now be [[2000,11,8],[2001,22,41], ... etc ...].

Then use that on your scatterplot selection

g.selectAll("scatter-dots")
  .data(data)
  .enter().append("svg:circle") 
  .attr("cy", function (d) { return y(d[0]); } ) // d[0] is the value from y1data for this datum
  .attr("cx", function (d,i) { return x(d[1]); } ) // d[1] is the value from x1data for this datum
  .attr("r", function (d,i) { return rscale(d[2]); } ) // d[2] is the value from x2data  for this datum.
  // ^^^rscale will need to be a scale you construct that controls the mapping of the x2 values

---

If you want to draw x1 and x2 as different series, but both tied to the x-axis, do this with d3.zip:

var data1 = d3.zip ([y1data, x1data, y1data.map (function(a) { return 1; }); ]);
var data2 = d3.zip ([y1data, x2data, y1data.map (function(a) { return 2; }); ]);
var data = data1.concat(data2);

data will now be [[2000,11,1],[2001,22,1], ... etc ..., [2000,8,2], [2001,41,2], ... etc ...].

g.selectAll("scatter-dots")
  .data(data)
  .enter().append("svg:circle") 
  .attr("cy", function (d) { return y(d[0]); } ) // d[0] is the value from y1data for this datum
  .attr("cx", function (d,i) { return x(d[1]); } ) // d[1] is the value from x1data or x2data for this datum
  .attr("r", "5") // fixed radius this time
  .attr("fill", function (d,i) { return colscale(d[2]); } ) // d[2] is either 1 or 2 for this datum
  // ^^^colscale will need to be a scale you construct that controls the mapping of the values 1 or 2 to a colour