JSFiddle - React, Tailwind, and code Playground

by Majo Chiou

HTML

<p>Hello!</p>
<div id="svg"></div>

JavaScript

var data = [38,69,72,42,58,87];

var obj = d3.select('#svg').selectAll('meta');
obj.data(data)
    .enter()
    .append('div')
    .text(function(d){
        return d;
    }).style({
        'color':function(d){
            if(d<60){
                return 'red'
            }else{
                return '#274';
            }
        },
        'width':function(d){
            return d+'px'
        },
        'margin':'2px 0',
        'background':function(d){
            if(d<60){
                return '#fdd';
            }else{
                return '#df8';
            }
        }
    });