Untitled

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: geometricPrecision;
}

.x.axis path {
  display: none;
}
.grouped-rect {
    stroke-width: 0.5;
    fill-opacity: 0.8;
    stroke: gray;
    cursor: pointer;
}
#chartPanel, #legendDiv {
    float: left;
}
#legendPanel, #legendText {
    float: right;
}
</style>
<body>
    <div id="chartPanel"></div>
    <div id="legendPanel">
        <div id="legendDiv"></div>
        <div id="legendText"></div>
    </div>
</body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script>
let margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
    },
    xScale,
    groupScale,
    yScale,
    xAxis,
    yAxis,
    groupAxis,
    svg,
    svgGroup,
	svgGroupAxis,
	color,
    data = [{"categorie":"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"}]},{"categorie":"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"}]},{"categorie":"Salaried Staff","values":[{"value":3,"rate":"Not at all"},{"value":22,"rate":"Not very much"},{"value":6,"rate":"Medium"},{"value":15,"rate":"Very much"},{"value":3,"rate":"Tremendously"}]},{"categorie":"Employee","values":[{"value":12,"rate":"Not at all"},{"value":7,"rate":"Not very much"},{"value":18,"rate":"Medium"},{"value":13,"rate":"Very much"},{"value":6,"rate":"Tremendously"}]},{"categorie":"Craftsman","values":[{"value":6,"rate":"Not at all"},{"value":15,"rate":"Not very much"},{"value":9,"rate":"Medium"},{"value":12,"rate":"Very much"},{"value":3,"rate":"Tremendously"}]},{"categorie":"Inactive","values":[{"value":6,"rate":"Not at all"},{"value":6,"rate":"Not very much"},{"value":6,"rate":"Medium"},{"value":2,"rate":"Very much"},{"value":3,"rate":"Tremendously"}]}],
    categorie,
    rateNames,
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

xScale = d3.scaleBand()
    .range( [30, width] );

groupScale = d3.scaleBand();

yScale = d3.scaleLinear()
    .range( [(height-60), 10]);

xAxis = d3.axisBottom( xScale )
    .tickSize(10);

groupAxis = d3.axisBottom (groupScale)
    .tickSizeOuter(20);

yAxis = d3.axisLeft( yScale )
    .tickSizeInner(4)
    .tickSizeOuter(8);

svg = d3.select('#chartPanel').append('svg')
    .attr('width', width + margin.left + margin.right )
    .attr('height', height + margin.top + margin.bottom )
    .append('g')
    .attr('transform', 'translate('+ margin.left + ',' + margin.right +')' );

categorie = data.map( (d) => { return d.categorie; } );
rateNames = data[0].values.map( (d) => { return d.rate; });

color = d3.scaleOrdinal()
    .range(["#ca0020","#f4a582","#d5d5d5","#92c5de","#0571b0"]);

xScale.domain( categorie );

groupScale.domain( rateNames )
    .range( [10, xScale.bandwidth() ] )
    .paddingInner(0.2)
    .paddingOuter(1);

yScale.domain( [0, d3.max(data, (categorie) => { return d3.max (categorie.values, (d)=> { return d.value; } ) } )]);

svg.append('g')
    .attr('class', 'x-axis')
    .attr('transform', 'translate(0,' + (height-60) + ')' )
    .call(xAxis);

svgGroupAxis = svg.selectAll('.x-axis-group')
    .data(categorie)
    .enter()
    .append('g')
    .attr('class', 'x-axis-group')
    // .attr('transform', 'translate(0,' + height + ')' )

svgGroupAxis
    .attr('transform',  (d)=> {  return 'translate('+ xScale(d)+ ','+ (height-30) + ')'} )
    .call(groupAxis)
.selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

svg.append('g')
    .attr('class', 'y-axis')
    .attr('transform', 'translate(30, 0)' )
    .call(yAxis)

svgGroup = svg.selectAll('bar')
    .data(data)
    .enter()
    .append('g')
    .attr('class', 'g')
    .attr('transform', (d) => { return "translate(" + xScale(d.categorie) + ", 0)" });

svgGroup.selectAll('rect')
    .data (function(d){ return d.values })
    .enter()
    .append('rect')
    .attr('class', 'grouped-rect')
    .attr('width', groupScale.bandwidth() )
    .attr('height', (d)=> {  return ((height-60) - yScale(d.value)); })
    .attr('x', (d)=> { return groupScale(d.rate); })
    .attr('y', (d)=> { return yScale(d.value); })
    .style('fill', (d)=> { return color(d.rate); })
    .on("mouseover", function(d) {
          d3.select(this).style("fill", d3.rgb(color(d.rate)).darker(2));
    })
    .on("mouseout", function(d) {
        d3.select(this).style("fill", color(d.rate));
    })
    .append('title')
    .text( (d)=> { return 'Rate = ' + d.rate + '\nValue = ' + d.value } )

let legendPanel = d3.select('#legendDiv')
    .selectAll('div')
    .data(rateNames);

    legendPanel
    .enter()
    .append('div')
    .style('width', '50px')
    .style('height', '50px')
    .style('margin', '3px')
    .style('background-color', (d)=> { return color(d); })

    legendPanel.exit();

let legendText = d3.select('#legendText')
    .selectAll('div')
    .data(rateNames);

    legendText
    .enter()
    .append('div')
    .style('width', '200px')
    .style('height', '50px')
    .append('div')
    .style('padding', '20px 5px 10px 5px')
    .style('font-weight' , 'bold')
    .text( function(d) { return d; } )


</script>