JSFiddle - React, Tailwind, and code Playground

HTML

<div id="over_rating"></div>

JavaScript

var dataset = [5, 2, 1, 1, 1, 50] ;

var w = 600;
var h = 400;
var x = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, w/2]);

var y = d3.scale.ordinal()
      .domain(d3.range(dataset.length))
      .rangeBands([0, 120]);



var chart = d3.select("#over_rating")
          .append("svg")
          .attr("class", "chart")
          .attr("width", w)
          .attr("height", 20 * dataset.length);


chart.selectAll("rect")
    .data(dataset)
    .enter().append("rect")
     .attr("y", function(d,i) { return y(i); })
     .attr("width", x )
     .attr("height", y.rangeBand());




chart.selectAll("text")
     .data(dataset)
    .enter().append("text")
     .attr("x", w/2 + 15)
     .attr("y", function(d, i) { return y(i) + y.rangeBand() / 2; })
     .attr("dx", 3) // padding-right
     .attr("dy", ".35em") // vertical-align: middle
     .attr("text-anchor", "end") // text-align: right
     .text(String);