JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.js"></script>
<svg class='chart'></svg>

CSS

.chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: middle;
}

JavaScript

(function(){

	data = [ { value:30, color: 'blue'}, { value:60, color: 'red'}, { value:10, color: 'purple'} ];

	var width = 500, height = 50;

	var chart = d3.select('.chart')
		.attr('width',width)
		.attr('height',height);

	update = function update(data)
	{
		var bar = chart.selectAll('g')
			.data(data, function(d,i){ return d.color; });

		// Enter
		var barEnter = bar.enter()
			.append('g')
			.attr('transform', function(d,i){
				var x = 0;
				for( c=0; c<i; c++) {
					x += data[c].value/100*width;
				}
				return "translate(" + x + ",0)";
			});

		barEnter.append('rect')
			.style('fill',function(d,i){
				return d.color;
			})
			.attr('height', height)
			.attr('width', function(d){ return d.value/100*width - 2 });
        barEnter.append('text');

		// Enter + Update
		bar.transition()
			.duration(1000)
			.attr('transform', function(d,i){
				var x = 0;
				for( c=0; c<i; c++) {
					x += data[c].value/100*width;
				}
				return "translate(" + x + ",0)";
			});
        bar.select("rect")
            .transition().duration(1000)
            .attr('width', function(d){ return d.value/100*width - 2 });

    bar.select("text")
        .transition().duration(1000)
        .attr('x', function(d,i){ return d.value/100*width/2 })
		.attr('y', height / 2 )
		.attr('dy', '.35em')
		.text(function(d,i){ return d.value + "%"; });
    
    bar.exit().remove();
}
update(data);

setTimeout(function(){
	data = [ { value:10, color: 'blue'}, { value:60, color: 'red'}, { value:30, color: 'purple'} ];
	update(data);
},1000);

})();