barras.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>D3</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>

  <script>
        var datos = [
          {"candidato":"trump","seguidores":14607000,"color":"#ff4d4d"},
          {"candidato":"clinton","seguidores":10946000,"color":"#33CAFF"},
          {"candidato":"obama","seguidores":13465463,"color":"#0080ff"}
        ];

        var w = 400, h = 600;
    
        var ancho = d3.scaleLinear().domain([0,14607000]).range([0,200]);

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

    
        var rect = svg.selectAll('rect').data(datos).enter().append('rect')
          .attr("width",0)
          .attr("height",h/7)
          .attr("y",function(d,i){return i*100;})
          .attr("fill", "orange");
    
        var text = svg.selectAll("text")
                        .data(datos)
                        .enter()
                        .append("text");
    

        rect.transition()
          .duration(1000)
           .attr("fill", function(d,i) {return  d.color;})
          .attr("width",function(d,i){return ancho(d.seguidores);});
    

        text
          .attr("x",function(d,i){return ancho(d.seguidores)-10;})
          .attr("y", function(d,i){return (h/12)+(i*(h/6));})
          //.attr("dy", "2.5em")
          .text(function(d,i) {return  d.candidato;})
          .attr("font-family", "sans-serif")
          .attr("font-size", "30px")
          .attr("text-anchor", "end")
          .attr("fill", "white");
       

        /*
        d3.select("body").selectAll("p")
          .data(datos)
          .enter()
          .append("p")
          .append("b")
          .html(function(d,i) {return i + " " + d.candidato + "";})
        */

  </script>
  
  
</body>
</html>