version 4

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 = [
			        {
			          "userName": "Rihanna",
			          "userImage": girlImg,
			          "interests": [
			            {
			              "Gardening": 10
			            },
			            {
			              "Cinema": 10
			            },
			            {
			              "Bowling": 15
			            },
			            {
			              "Sculpting": 35
			            },
			            {
			              "Painting": 15
			            }
			          ]
			        },
			        {
			          "userName": "Brody",
			          "userImage": guyImg,
			          "interests": [
			            {
			              "Painting": 30
			            },
			            {
			              "Comics": 10
			            },
			            {
			              "Bodybuilding": 15
			            },
			            {
			              "Cinema": 35
			            },
			            {
			              "Carpentry": 15
			            }
			          ]
			        }
			      ];

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

		        var color = d3.scaleOrdinal()
		            .range(["#eb6383", "#fa9191", "#ffe9c5", "#b4f2e1"]);


				var margin = {top: 20, right: 5, bottom: 30, left: 20},
				    width = width - margin.left - margin.right,
				    height = height - margin.top - margin.bottom;


		        var svg = d3.select($this[0])
		        	.append("svg")
		            .attr("width", width + margin.left + margin.right)
		            .attr("height", height + margin.top + margin.bottom)
					.append("g")
					.attr('class', 'barchart')
					.attr("transform", "translate(" + margin.left + "," + margin.top +...