JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
First plot: x vs yVar1 <br />
<svg id="vis1" height="100px" width="100px"></svg>
<br />
second plot: x vs yVar2 <br />
<svg id="vis2" height="100px" width="100px"></svg>
<br />
I can get both on the same graph by changing my data structure (dataSet2):<br />
<svg id="vis3" height="100px" width="100px"></svg>
<br />
But I dont know how to reproduce the third plot using the original dataSet:<br />

JavaScript

var  vis1 = d3.select("#vis1"),
     vis2 = d3.select("#vis2"),
     vis3 = d3.select("#vis3"),
     colors = ["black", "blue", "red"],
     dataPoints1,
     dataPoints2,
     dataPoints3,
     dataSet = [
     {
          xVar: 5,
          yVar1: 90,
          yVar2: 22,
     },
     {
          xVar: 25,
          yVar1: 30,
          yVar2: 25,
     },
     {
          xVar: 45,
          yVar1: 50,
          yVar2: 80,
     },
     {
          xVar: 65,
          yVar1: 55,
          yVar2: 9,
     },
     {
          xVar: 85,
          yVar1: 25,
          yVar2: 95,
     }
     ],
     dataSet2 = [
          {
          xVar: 5,
          yVar: 90,
          type: 1
     },
     {
          xVar: 25,
          yVar: 30,
          type: 1
     },
     {
          xVar: 45,
          yVar: 50,
          type: 1
     },
     {
          xVar: 65,
          yVar: 55,
          type: 1
     },
     {
          xVar: 85,
          yVar: 25,
          type: 1
     },
     {
          xVar: 5,
          yVar: 22,
          type: 2
     },
     {
          xVar: 25,
          yVar: 25,
          type: 2
     },
     {
          xVar: 45,
          yVar: 80,
          type: 2
     },
     {
          xVar: 65,
          yVar: 9,
          type: 2
     },
     {
          xVar: 85,
          yVar: 95,
          type: 2
     }

     ];


function drawVis1() {
     dataPoints1 = vis1.selectAll("circle")
          .data(dataSet)
          .enter()
          .insert("svg:circle")
               .attr("cx", function (d) { return 100 - d.xVar})
               .attr("cy", function (d) { return 100 - d.yVar1})
               .attr("r", 2)
               .style("fill", "blue");
}

function drawVis2() {
     dataPoints2 = vis2.selectAll("circle")
          .data(dataSet)
          .enter()
          .insert("svg:circle")
               .attr("cx", function (d) { return 100 - d.xVar})
               .attr("cy", function (d) { return 100 - d.yVar2})
               .attr("r",...