version 7

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>ForceChart I</title>

    <!--libs-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <!--js-->
    <script>
      $(document).ready(function() {

        var $this = $('.forcechart');


        var data = [{
            "id": 11929,
            "label": "Rihanna",
            "image": "https://i.insider.com/5c61c45deb3ce845b033b4f5?width=1100&format=jpeg&auto=webp",
            "items": [{
                "id": 991,
                "label": "Gardening",
                "value": 10
              },
              {
                "id": 998,
                "label": "Feng Shui",
                "value": 10
              },
              {
                "id": 992,
                "label": "Bowling",
                "value": 15
              },
              {
                "id": 994,
                "label": "Sculpting",
                "value": 35
              }
            ]
          },
          {
            "id": 12329,
            "label": "Brody",
            "image": "https://media1.popsugar-assets.com/files/thumbor/4UYUg9UKWqqhaFfElFDU9bKMRgQ/356x1145:1857x2646/fit-in/500x500/filters:format_auto-!!-:strip_icc-!!-/2019/09/04/970/n/1922398/cc3fa7b15d70381d55bd82.88203803_/i/Brad-Pitt.jpg",
            "items": [{
                "id": 996,
                "label": "Bodybuilding",
                "value": 10
              },
              {
                "id": 798,
                "label": "Comics",
                "value": 10
              },
              {
                "id": 992,
                "label": "Bowling",
                "value": 15
              },
              {
                "id": 994,
                "label": "Sculpting",
                "value": 35
              }
            ]
          }
        ];



        var width = $this.data('width'),
          height =...