JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viz"></div>

CSS

svg {
    border: 1px solid #ccc;
}

JavaScript

var svg = d3.select('#viz').append('svg')
    .attr('width', 100)
    .attr('height', 100)
    .attr('viewBox', '0 0 100 100');

var layer1 = svg.append('g');
var layer2 = svg.append('g');

var redCircle = layer2.append('circle')
    .attr('cx', 50)
    .attr('cy', 50)
    .attr('r', 16)
    .attr('fill', 'red')

var blueSquare = layer1.append('rect')
    .attr('x', 25)
    .attr('y', 25)
    .attr('width', 50)
    .attr('height', 50)
    .attr('fill', 'blue');