JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js"></script>
<div id="scatter"></div>

CSS

html,body,#scatter{
 width:100%;
 height:100%;  
 margin:0;
 padding: 0;
}

#scatter > svg{  
 display:block;
}

.color-red {
  fill: red;
}

.color-green {
  fill: green;
}

.color-blue {
  fill: blue;
}

JavaScript

var plot = new tauCharts.Chart({
    data: [
        { name: "John", age: 30, gender: 'Male',   hasChild: true  },
        { name: "Jim", age: 28, gender: 'Male',   hasChild: false  },
        { name: "Tom", age: 27, gender: 'Male',   hasChild: true  },
        { name: "Edd", age: 29, gender: 'Male',   hasChild: true  },
        { name: "Jack", age: 23, gender: 'Male',   hasChild: false  },
        { name: "Mary", age: 22, gender: 'Female', hasChild: false },
        { name: "Anna", age: 25, gender: 'Female', hasChild: true },
        { name: "Lisa", age: 26, gender: 'Female', hasChild: true },
        { name: "Donna", age: 27, gender: 'Female', hasChild: true },
        { name: "Jane", age: 28, gender: 'Female', hasChild: true }
    ],
    type:  "scatterplot",
    x:     "gender",
    y:     "age",
    size:  "age",
    color: "hasChild"
});
plot.renderTo('#scatter');