JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
d3 visual plotting one point per array entry, using type to control color: <br />
<svg id="vis" height="100px" width="100px"></svg>

JavaScript

var  vis = d3.select("#vis"),
     colors = ["blue", "red"],
     dataPoints,
     dataSet = [
          {
          xVar: 5,
          yVar: 90,
          type: 0
     },
     {
          xVar: 25,
          yVar: 30,
          type: 0
     },
     {
          xVar: 45,
          yVar: 50,
          type: 0
     },
     {
          xVar: 65,
          yVar: 55,
          type: 0
     },
     {
          xVar: 85,
          yVar: 25,
          type: 0
     },
     {
          xVar: 5,
          yVar: 22,
          type: 1
     },
     {
          xVar: 25,
          yVar: 25,
          type: 1
     },
     {
          xVar: 45,
          yVar: 80,
          type: 1
     },
     {
          xVar: 65,
          yVar: 9,
          type: 1
     },
     {
          xVar: 85,
          yVar: 95,
          type: 1
     }

     ];


function drawVis() {
     dataPoints = vis.selectAll("circle")
          .data(dataSet)
          .enter()
          .insert("svg:circle")
               .attr("cx", function (d) { return 100 - d.xVar})
               .attr("cy", function (d) { return 100 - d.yVar})
               .attr("r", 2)
               .style("fill", function (d) { return colors[d.type]; });

}

     drawVis();