grouped bar

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
	<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
      var data2 = [
      {
          cat: "Student",
        	"Tremendously":0,
        	"Very much":6,
        	"Medium":12,
        	"Not very much":4,
        	"Not at all":0
      }, 
      {
          cat: "Liberal Profession", 
        	"Tremendously":6,
        	"Very much":18,
        	"Medium":13,
        	"Not very much":21,
        	"Not at all":1
      }
  	];
    var data = [
      {
          cat: "Student", 
          values: [
              {
                  value: 0, 
                  rate: "Not at all"
              }, 
              {
                  value: 4, 
                  rate: "Not very much"
              }, 
              {
                  value: 12, 
                  rate: "Medium"
              }, 
              {
                  value: 6, 
                  rate: "Very much"
              }, 
              {
                  value: 0, 
                  rate: "Tremendously"
              }
          ]
      }, 
      {
          cat: "Liberal Profession", 
          values: [
              {
                  value: 1, 
                  rate: "Not at all"
              }, 
              {
                  value: 21, 
                  rate: "Not very much"
              }, 
              {
                  value: 13, 
                  rate: "Medium"
              }, 
              {
                  value: 18, 
                  rate: "Very much"
              }, 
              {
                  value: 6, 
                  rate: "Tremendously"
              }
          ]
      }
  	]
		var margin = {top: 20, right: 20, bottom: 30, left: 40},
    	width = 960 - margin.left - margin.right,
   		height = 500 - margin.top - margin.bottom;
    
    var x0 = d3.scaleBand().rangeRound([0,width]).paddingInner(0.1);
    var x1 = d3.scaleBand();
    var y = d3.scaleLinear().rangeRound([height, 0]);
    
    var xAxis = d3.axisBottom(x0);
    var yAxis = d3.axisLeft(y);

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

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js