JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

HTML

<!DOCTYPE html>
<meta charset="utf-8">
 
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
 
</body>

JavaScript

var width = 960,
    height = 500;
var data  = [
  {"x":80, "r":20, "label":"Node 1"}, 
  {"x":200, "r":20, "label":"Node 2"}, 
  {"x":380, "r":20, "label":"Node 3"}
];

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    

    /* Define the data for the circles */
    var elem = svg.selectAll("g myCircleText")
        .data(data)
  
    /*Create and place the "blocks" containing the circle and the text */  
    var elemEnter = elem.enter()
	    .append("g")
	    .attr("transform", function(d){return "translate("+d.x+",80)"})
 
    /*Create the circle for each block */
    var circle = elemEnter.append("circle")
	    .attr("r", function(d){return d.r} )
	    .attr("stroke","black")
	    .attr("fill", "white")
 
    /* Create the text for each block */
    elemEnter.append("text")
	    .attr("dx", function(d){return 20})
	    .text(function(d){return d.label})