score:2

Accepted answer

Here's how I'd do it:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
    data = [{
      num: 4,
      category: 'A'
    }, {
      num: 3,
      category: 'B'
    }, {
      num: 2,
      category: 'D'
    }, {
      num: 5,
      category: 'A'
    }]

    d3.select('body')
      .selectAll('div')
      .data(data) // bind our data
      .enter()
      // inner selection
      .selectAll('div')
      // inner selection data binding
      // creates array of repeating datum that is length of num
      .data((d) =>
        d3.range(d.num).map(() => d)
      ) 
      .enter()
      .append('div')
      .text((d) => d.num)
      .style('width', (d) => d.num * 20 + "px");
  </script>
</body>

</html>


Related Query

More Query from same tag