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;

for(var i = 0; i < data.length; i++){
let o = data[i];
let g = d3.select('#chart')
	.append('g')
  .datum(o)
  .attr('class', 'data-group');
  
g.append('rect')
  .attr('class', 'data-rect')
  .attr('x',5)
  .attr('y', d => d.id * offset)
  .attr('width', 10)
  .attr('height', 10)
  .style('fill', d => d.color);
  
g.append('text')
  .attr('class', 'data-text')
  .attr('x', 15)
  .attr('y', d => d.id * offset + 9)
  .text(d => d.text);
}