gráfico de barras con SVG by aaizemberg

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>

<div id="vis"></div>


<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

var h = 200, w = 500;

var datos = [40, 8, 15, 16, 23, 50];

var x = d3.scaleLinear()
    .domain([0, d3.max(datos)])
    .range([0, 420]);

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

svg.selectAll("rect")
  .data(datos)
  .enter()
  .append("rect")
  .attr("style", "stroke:white;fill:steelblue;")
  .attr("x", 10)
  .attr("y", function(d,i) {return i * (h/datos.length); })
  .attr("width", function(d,i) {return x(d);} )
  .attr("height", h/datos.length)
  .append("title").text(function(d){return d;});

svg.selectAll("text")
   .data(datos).enter().append("text")
   .attr("x", function(d,i) {return 10+x(d);} )
   .attr("y", function(d,i) {return i * (h/datos.length) + h/datos.length/2; })
   .text(function(d){return d;});

</script>