JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>


<div>red
  <div>
  green
  </div>
</div>

JavaScript

// d3.js demo

/****** demo1 ******/
d3.select('div').style({ 'color': 'red' });
d3.select('div div').style({ 'color': 'green' });

/****** demo2 ******/
d3.select('body')
  .append('div')
  .html('My name is Veck')
  .style({
  'border':'1px solid #000',
  'width':'120px'
  });
  
/****** demo3 ******/  
   d3.select('body')
    .append('svg')
    .attr({
      'width':200,
      'height':200
    });

  d3.select('svg')
    .append('circle')
    .attr({
    'cx':50,
    'cy':50,
    'r':30,
    'fill':'#f3b',
    'stroke':'blue',
    'stroke-width':'5px'
    });
    
/****** demo4 ******/
 var data = [1,2,3,4,5];

d3.select('body').selectAll('div')
    .data(data)
    .enter()
    .append('div')
    .text(function(d){
        return d;
    });
    */


/****** demo5 ******/
var data = [1, 2, 3, 4, 5];

d3.select('body').selectAll('div')
    .data(data)
    .enter()
    .append('div')
    .text(function(d){
        return d;
    }).style({
        'color':function(d){
            if(d<4){
                return 'red'
            }
        },
        'width':function(d){
            return d*10+'px'
        },
        'margin':'2px 0',
        'background':'lightgreen',
    });