JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<h2>D3 Tutorial Step 1: select</h2>
<div id="chart"></div>
<p>By <a href="href://johnguerra.co">John Alexis Guerra GĂłmez</a></p>

CSS

.big {
  font-weight: bold; 
}

JavaScript

/*
chart.append("p")
	.text("Hola");
  
chart.append("p")
  .style("color", "red")
	.text("Mundo");
  
chart.append("p")
  .attr("class", "big")
	.text("bold!!");

chart.selectAll("p")
	.style("font-family", "sans-serif" );
  
chart.selectAll("p").style("font_Family", "sans serif")*/

/*var mydata = [23,12,23,15,50];

var chart = d3.select("#chart");

var ps = chart.selectAll("p")
.data(myData);

//create

ps.enter()
.append("p")
.text(function (d){return d;});

// update

ps
.text(function (d) {return d;});

ps.exit()
.remove();



update(myData);*/

var myData = [ 10, 30, 20, 30, 52];

var width = 300,
	height = 300,
  barH = 20,
	chart = d3.select("#chart")
		.append("svg")
    .attr("width", width)
    .attr("height", height);


function update(myData) {
  var ps = chart.selectAll("rect")
    .data(myData);

	// Creates items
  ps.enter()
    .append("rect")
    .attr("x", 0)
    .attr("y", function (d, i)  { return i*(barH+1); }) 
    .attr("height", barH)    
    .attr("width", function (d) { return d; });

	// Updates items
  ps.text(function (d) { return d; })
    .attr("y", function (d, i)  { return i*barH+1; })   
    .attr("width", function (d) { return d; });

	// Deletes items
  ps.exit().remove();
}


update(myData);

//update(myData.reverse());

//Only the first two elements
//update(myData.slice(0, 2));