w50 - d3js

<!DOCTYPE html>
<html>
<head>
  <style>
.ventas {
  fill: red
}

.sucursales {
  fill: blue
}
</style>

</head>
<body>
  <div id="uno"></div>
  <div id="dos"></div>

/**
d3.select("div#uno").append("ol").selectAll("li")
  .data(w50).enter().append("li")
  .text( function(d,i) {return d.chain;} );
**/

var w = 800, h = 800;

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

svg.selectAll("text").data(w50).enter()
  .append("text")
    .attr("x", 10)
    .attr("y", (d,i) => (i+1)*20 )
    .text(  (d) => d.chain  );

var ventas =  d3.scaleLinear().domain([0, d3.max(w50, (d)  => d.sales_u_s_2017)]).range([0,100]);

svg.selectAll("rect.ventas").data(w50).enter()
  .append("rect")
    .attr("class","ventas")
    .attr("x", 120)
    .attr("y", (d,i) => 3+(i)*20 )
    .attr("width", (d) => ventas(d.sales_u_s_2017) )
    .attr("height", 19)
      .append("title").text( (d) => "U$S " +  d.sales_u_s_2017.toLocaleString() );

var sucursales =  d3.scaleLinear().domain([0, d3.max(w50, (d) => d.of_locations_u_s )]).range([0,100]);

svg.selectAll("rect.sucursales").data(w50).enter()
  .append("rect")
    .attr("class","sucursales")
    .attr("x", 230)
    .attr("y", (d,i) => 3+(i)*20 )
    .attr("width", (d) => sucursales(d.of_locations_u_s ) )
    .attr("height", 19)
      .append("title").text( (d) => d.of_locations_u_s.toLocaleString() + " sucursales"   );

</script>

</body>
</html>

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