JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<svg id="svg"></svg>

CSS

#svg {
	width: 500px;
	height: 500px;
	background: yellow;
}

JavaScript

sourcesData = [
  { title: 'qwerrt', value: 0 },
  { title: 'asdffg', value: 100 },
  { title: 'zxzxccv', value: 200 }
];

const svg = d3.select('#svg');

svg.selectAll('rect')
    .data(this.sourcesData)
    .enter()
    .append('rect')
    .attr('x', d => d.value)
    .attr('y', d => d.value)
    .attr('width', 50)
    .attr('height', 50)
    .attr('fill', '#f00');