JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<div id="grafico"></div>
</body>

JavaScript

<html>

	<head>

<title>Colores y etiquetas con D3 - Cibergeek.com</title>
</head>
<!-- Añadiendo D3 al sitio  -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<div id="grafico"></div>
 
<script type="text/javascript">
 
//Datos que van a ser usados para generar el grafico
var datos = [5,3,7,2,5];
 
//Alto y ancho
var svgwidth = 500;
var svgheight = 400;
 
//Creacion el SVG para "dibujar"
var svg = d3.select("#grafico")
            .append("svg")
            .attr('height', svgheight)
            .attr('width', svgwidth);
 
//Creacion de las barras
svg.selectAll('rect')
            .data(datos)
            .enter()
            .append('rect')
            .attr('width', function(){return svgwidth/datos.length -1;}) //ancho
            .attr('x', function(d,i){return i*(svgwidth/datos.length);}) //posicion x
            .attr('y', function(d){return svgheight - d*10;}) //posicion y
            .attr('height', function(d){return d*10;}) //altura
  		.attr('fill', '#0000ee'); //color (atributo fill de los elementos SVG)
			
/* Diferentes formas de definir colores:
	Hexadecimal: #0000ee
	RGB: (00,00,230)
	RGBa: (00,00,230,1) (el ultimo parametro es la opacidad, puede ir de 0 a 1)
	Explicito (nombre): 'azul'
*/
	
  		      
//Etiquetado de las barras, muy similar a lo que se hizo con las barras
svg.selectAll('text')
			.data(datos)
			.enter()
			.append('text')
			.text(function(d){return d;})
			.attr('x', function(d,i){return i*(svgwidth/datos.length)+(svgwidth/datos.length)/2;})
            .attr('y', function(d){return (svgheight - d*10)+15;})
			.attr('text-anchor', 'middle')
			.attr('font-size', 18)
			.attr('font-family', 'arial')
			.attr('fill', '#fff');
</script>
</body>
</html>