Tutorial Balkendiagramm

<!DOCTYPE html>
<head>
<title>ein Balkendiagramm</title>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>

ergebnis.sort(function(a, b) { return a.wert < b.wert; });

var width = window.innerWidth * 0.95;
var height = window.innerHeight * 0.95;

var abstand = 10;
var balken_breite = width / ergebnis.length - abstand;
var max_hoehe = height;

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

svg.selectAll("rect")
  .data(ergebnis)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return balken_breite * i + abstand * i; })
  .attr("y", max_hoehe)
  .attr("width", balken_breite)
  .attr("height", 0)
  .style("fill", function(d) { return d.farbe; })
  .on("mouseover", function(d, i) {
     svg.append("text")
       .attr("x", balken_breite * i + abstand * i + balken_breite / 2)
       .attr("y", max_hoehe - max_hoehe * d.wert / 100 - 5)
       .style("fill", d.farbe)
       .style("text-anchor", "middle")
       .style("font-size", "36px")
       .text(d.wert);
     })
  .on("mouseout", function() {
     svg.selectAll("text").remove();
   });
   
svg.selectAll("rect")
  .transition()
  .delay(function(d, i) { return 250 * i; })
  .duration(1000)
  .attr("y", function(d) { return max_hoehe - max_hoehe * d.wert / 100; })
  .attr("height", function(d) { return max_hoehe * d.wert / 100; });

</script>

</body>
</html>

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