JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

JavaScript

var myArr = [
  ['John', 'm', 18 ],
  ['Mary', 'f', 20 ],
  ['Ivy', 'f', 27 ]]
  // name, gender, age

var divSelection = d3.select("body")
  .selectAll("div")
  .data(myArr, (e)=>{ return e })

divSelection.enter().append("div")
divSelection.exit().remove()

divSelection.text((e)=>{ return e[0] })
            .style({
              margin: "5px",
              "background-color": (e)=>{return (e[1] === 'm')? '#A9D0F5':'#D0A9F5'},
              width: (e)=>{return (e[2]*10)+"px"}
            })