Can d3.js draw two scatterplots on the same graph using data from the same source?

Question

All of the d3 tutorials I\'ve found use data arranged in arrays of objects from which they graph one point for each object in the array. Given data in the following structure:<

Answer 1

Place the two circles for each data point into a single svg:g element. This produces a one-to-one mapping for the data to elements but still allows you to show two different points.

var nodeEnter = vis1.selectAll("circle")
      .data(dataSet)
      .enter()
      .insert("svg:g");

nodeEnter.insert("svg:circle")
           .attr("cx", function (d) { return 100 - d.xVar})
           .attr("cy", function (d) { return 100 - d.yVar1})
           .attr("r", 2)
           .style("fill", "green");

nodeEnter.insert("svg:circle")
           .attr("cx", function (d) { return 100 - d.xVar})
           .attr("cy", function (d) { return 100 - d.yVar2})
           .attr("r", 2)
           .style("fill", "blue");

Working JSFiddle.