D3 Playground

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="chart"></svg>

JavaScript

let data = [
	{id: 5, color: 'red', text: 'data1'}, 
  {id: 10, color: 'green', text: 'data2'}, 
  {id: 15, color: 'gray', text: 'data3'}
  ];

let offset = 5;

d3.select('#chart')
	.selectAll('.data-group')
	.data(data, d => d.id)
  .join((enter) => {
  	enter
    	.append('g')
    	.attr('class', 'data-group');
      
    enter.append('rect')
      .attr('class', 'data-rect')
      .attr('x',d => d.id * offset)
      .attr('y', 5)
      .attr('width', 10)
      .attr('height', 10)
      .style('fill', d => d.color);
      
     enter.append('text');
     
     return enter;
  })