JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<div class='vis' style="width: 100px; height: 20px"></div>

JavaScript

let data = [.2, .3, .5];
let colorMap = ['red', 'blue', 'green'];

let aggregated  = data.map((d,i) => ({data: d, color: colorMap[i] }));

const vis = d3.select('.vis');

const total = 300;

vis.selectAll('div')
	.data(aggregated)
	.enter()
  	.append('div')
    .style('display', 'inline-block')
    .style('width', d => (d.data * 100 + '%'))
    .style('height', '100%')
    .style('background-color', d => d.color)
    .style('border-radius', '2px');