Tutorial 2 D3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .tooltip{
    width: 100px;
    height: 150px;
    position: absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
    border: 1px solid #dedede;
    padding: 10px;
    font-size: 15px;
    font-family: nyt-franklin;
    border-radius:2px;
    box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
    background-color: rgba(255, 255, 255, 1);     
}
  </style>
</head>

<body>
  <div id="chart"></div> 
  <script>    
    data = []
    data.push({nombre:"willi", edad:190,telefono:"727272727272"})
    data.push({nombre:"juansiii", edad:350,telefono:"6969696969"})
    data.push({nombre:"stivii", edad:50,telefono:"1234"})
       
    width=960
    height=500
    var svg = d3.select("#chart").append("svg")
      .attr("width", width+20)
      .attr("height", height+20)
    
    var xs = d3.scaleLinear().range([0,width]),
    ys = d3.scaleBand().rangeRound([height, 0],.1).paddingInner(0.1),
    xaxis = d3.axisBottom(xs);
    yaxis = d3.axisLeft(ys);
    
    svg.append("g")
    .attr("class","x axis")    
    	 .call(xaxis).append("text").text("x")
    
     svg.append("g")
    .attr("class","y axis")
     .attr("transform", "translate(0," + height + ")")
    	 .call(yaxis).append("text").text("y")
    
        
    var tooltip = d3.select("#chart").append("div")
        .attr("class", "tooltip") 
    
    update (data)
    
    
    function update(mdata){      
      //selection and map data
      barra  = svg.selectAll("rect").data(mdata);
      ys.domain(mdata.map(function(d){
        return d.nombre;
      }))
      xs.domain([0,d3.max(data,function(d){return d.edad})])
      svg.select(".x axis").transition().duration(500).call(xaxis)
      svg.select(".y axis").transition().duration(500).call(yaxis)
      //update
      barra.enter()
        .append("rect")
        .merge(barra)    
        .on("mouseover", function(d){
         showTooltip(d,this);
      }).on("mouseout",function(d){
         tooltip.style("visibility", "hidden");
         tooltip.html('')
         d3.select(this).transition()
            .duration(100)
            .style("opacity", 1)
      })
        .transition().duration(500)
      	.attr("x",0)
        .attr("y",function(d,i){return i*(50+1)})
      	.attr("width",function (d){return d.edad})
      	.attr("height",50)
      	.style("fill","green")
      	.style("opacity",function(d){return 1-(1/d.edad)})
      //remove
      barra.exit()
        	 .transition().duration(500)
         	 .remove()        
    }
    
    function showTooltip(d,o){
      
         tooltip.style("visibility", "visible");
         tooltip.transition()
            .duration(200)
            .style("opacity", 1)
         tooltip.append("h4").attr("class", "page-header")
            .style("margin", "0px")
            .style("text-align", "center").text('Juansiiii');
         divDesc = tooltip.append("div")
            .attr("class", "TooltipDescription")
            .style("width", "50%")
            .style("float", "left")
         divDesc.append("h5").text('Nombre: ' + d.nombre);
         divDesc.append("h5").text('Edad: ' + d.edad);
         divDesc.append("h5").text('Telefono: ' + d.telefono);
         tooltip.style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY) + "px");
         d3.select(o).transition()
            .duration(100)
            .style("opacity", 0.5)
      
    }

</script>
</body>

https://d3js.org/d3.v4.min.js