JSFiddle - React, Tailwind, and code Playground

by janeshdev

HTML

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

JavaScript

//d3.select("body").text("hello");


	var data = [1,2,3,4,5];
	
	var canvas = d3.select("body").append("svg")
		.attr("width", 500)
		.attr("height", 500);
		
  // Code to create rectangle
	canvas.selectAll("rect")
		.data(data)
		.enter()
			.append("rect")
			.attr("width", function(d) {
      			return d *20 ;
            })
			.attr("height", 20)
       .attr("y", function(d, i) {
       return i*50;
       });
		
    // Code to add text 
   	canvas.selectAll("text")
		.data(data)
		.enter()
			.append("text")
			.attr("fill", "white")
			.attr("y", function(d,i){
				return i*50 + 15;
				})
			.text(function(d) {return d ;});