test 3

<!DOCTYPE html>
<meta charset="utf-8">
    <html>
    <head>
        <title>Test 3.1</title>
        <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
        <style>
            body {background-color: white; font-family: Lato; font-size: 16px;	}
            .chart {
                border: 1px solid #ccc;
                display: block;
                margin: 0 auto;
            }
            
        </style>
    </head>
    <body>
        <svg class="chart" width="900" height="500"></svg>
        <script src="https://d3js.org/d3.v4.min.js"></script>
      <script>
            var svg = d3.select(".chart"),
                margin = {top: 20, right: 20, bottom: 30, left: 100},
                width = +svg.attr("width") - margin.left - margin.right,
                height = +svg.attr("height") - margin.top - margin.bottom,
                g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear()
                    .rangeRound([0, width]);

var y = d3.scaleBand()
                    .rangeRound([0, height])
                    .paddingInner(0.3);     //0.05

var z = {
                'a': d3.scaleOrdinal()
                    .range(["#eee8aa", "#FFFFFF", "#F44EEE"]),   
                'b': d3.scaleOrdinal()
                    .range(["#eee8aa", "#FFFFFF", "#F44EEE"]),  
                'c': d3.scaleOrdinal()
                    .range(["#F4713D", "#FFFFFF", "#F44EEE"])     
            };

d3.csv("data.csv", function(d, i, columns) {
                for (i = 2, t = 0; i < columns.length; ++i){
                    d[columns[i]] = +d[columns[i]];
                    t += d[columns[i]];
                }
                d.total = t;
                return d;

}, function(error, data) {
                if (error) throw error;

var keys = data.columns.slice(2);
              //   data.sort(function(a, b) { return d3.ascending(a.total,b.total); });
                data.sort(function(a, b) { return a.total - b.total; });

//setting domains
                x.domain([0, d3.max(data, function(d){  
                        return d.total;
                    })
                ]).nice();
                y.domain(data.map(function(d){
                        return d.Name;
                    })
                );
                for (key in z){
                    z[key].domain(key);
                }

//drawing chart
                g.append("g")
                    .selectAll("g")
                        .data(d3.stack().keys(keys)(data))
                        .enter().append("g")
                    .selectAll("rect")
                        .data(d => d)
                        .enter().append("rect")
                            .attr("fill", function(d, i) {
                                var key = d3.select(this.parentNode).datum().key;
                                return z[d.data.team](key);
                            })
                            .attr("x", function(d){
                                return x(d[0]);
                            })
                            .attr("y", function(d){
                                return y(d.data.Name);
                            })
                            .attr("height", function(d){
                                return y.bandwidth();
                            })
                            .attr("width", function(d){
                                return x(d[1]) - x(d[0]);
                            });
                g.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(d3.axisBottom(x).ticks(7));

g.append("g")
                        .attr("class", "axis")
                        .call(d3.axisLeft(y).ticks(null, "s"));  //
           });
        </script>
    </body>
</html>

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