JSFiddle - React, Tailwind, and code Playground

by superboggly

HTML

<svg/>

JavaScript

var data=[1,2,3];

var svg = d3.select('svg').attr({width: 200, height:200});

var nodes = svg.selectAll('g.node-group').data(data);
var newNodes = nodes.enter()
.append('g')
.classed('node-group', true)
.attr('transform', function(d,i) { return 'translate(' + (30*d) + ',' + (100 + 4*i) + ')';});

newNodes.append('circle').attr({
    cx: 10,
    cy: 10,
    r: 10
})
.style({
    fill: 'red'
});

newNodes.append('text').attr({
    x: 20,
    y: 15
})
.text(function(d) { return 'text is ' + d; });