JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<svg width='300' height='400'></svg>

CSS

svg {
  outline: 1px dashed silver;
}

JavaScript

var jsonData = [{
  'x': 100,
  'y': 70,
  'r': 60,
  'clr': 'orange',
  'head1': 'Flying',
  'head2': 'House'
}, {
  'x': 100,
  'y': 260,
  'r': 80,
  'clr': 'purple',
  'head1': 'Playing',
  'head2': 'Eleven'
}];

var node = d3.select('svg')
  .selectAll('g')
  .data(jsonData)
  .enter()
  .append('g');

node
  .append('circle')
  .attr('cx', (d) => d.x)
  .attr('cy', (d) => d.y)
  .attr('r', (d) => d.r)
  .attr('fill', (d) => d.clr);

var createTxtNode = (x, y, txt) => {
  return node
    .append('text')
    .attr('dx', x)
    .attr('dy', y)
    .text(txt)
    .style('text-anchor', 'middle')
    .style('dominant-baseline', 'central')
    .attr('fill', 'white');
};

/*node
	.append('text')
 .attr('dx', (d) => d.x)
 .attr('dy', (d) => d.y)
 .text(d => d.head1)
 .style('text-anchor', 'middle')
 .style('dominant-baseline', 'central')
 .attr('fill', 'white');
 
node
	.append('text')
 .attr('dx', (d) => d.x)
 .attr('dy', (d) => d.y + 35)
 .text(d => d.head2)
 .style('text-anchor', 'middle')
 .style('dominant-baseline', 'central')
 .attr('fill', 'white');*/