Trades By Product 2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis.axis--x path {
      stroke: #fff;
      stroke-width: 1.5px;
    }
    .axis--x .tick line {
      stroke: #eee;
      stroke-width: 1px;
    }
    svg .legend--text {
      font-family: Calibri;
    }
  </style>
</head>

<body>
  <svg xmlns="https://www.w3.org/2000/svg"></svg>
  <script>
    var margin = { top: 50, right: 20, bottom: 50, left: 20 };
    function getDimensions(root) {
      var size = root.getBoundingClientRect();
      return { width: size.width, height: 400 };
    }
    
    function createSvg(host) {
      var svg = d3.select(host).select("svg");
    	return svg.attr("width", 960).attr("height", 500);
    }
    
    function createPlotArea(svg) {
      return svg.append('g')
        .attr('width', chartWidth)
        .attr('height', clientHeight)
        .attr('class', 'chart--plot')
        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
    }
    
    function createColorPalette(data, svg) {
      var colorScale = d3.scaleLinear()
        .domain([0, 1, 2, 3, 4, 5])
        .range(['#2077B3', '#f03e3e', '#2f9e44', '#3bc9db', '#ffe066', '#f76707']);
        var gradients = svg.append('defs').selectAll('linearGradient').data(data).enter()
      	.append('linearGradient')
      	.attr('id', function(_, ix) {
          return 'Gradient' + (ix + 1);
        });
      
      gradients.append('stop')
      	.attr('offset', '0%')
        .attr('style', function(_, ix) {
        	return 'stop-color: ' + colorScale(ix) + '; stop-opacity: 0.1;';
      	});
      gradients.append('stop')
      	.attr('offset', '100%')
        .attr('style', function(_, ix) {
        	return 'stop-color: ' + colorScale(ix);
      	});
        
      return colorScale;
    }
    
    function createChart(data, host) {
      var svg = this.createSvg(host);
      var colorScale = createColorPalette(data, svg);
      var plot = this.createPlotArea(svg);
      
      var valueSelector = function(d) { return d.value; };
      var xScale = d3.scaleLinear()
        .domain([d3.min(data, valueSelector), d3.max(data, valueSelector)])
        .range([0, chartWidth])
      	.nice();
      
      var xAxis = d3.axisBottom(xScale)
      	.tickSizeInner(-clientHeight)
      	.tickPadding(10);
      var xAxisGroup = plot
        .append('g')
        .attr('class', 'axis axis--x')
        .attr('transform', 'translate(0, '+clientHeight+')');

xAxisGroup.call(xAxis);
      
      var yScale = d3.scaleBand()
      	.domain([0, 1, 2, 3, 4, 5])
      	.range([0, clientHeight])
      	.round(true)
      	.paddingInner(0.2)
      	.paddingOuter(0.2);
      
      var barsArea = plot.append('g').attr('class', '.bars--area');
      barsArea.selectAll('rect').data(data).enter().append('rect')
        .attr('y', function (d, ix) { return yScale(ix); })
        .attr('height', yScale.bandwidth())
        .attr('width', function (d) { return xScale(d.value); })
      	.attr('fill', function(d, ix) { return colorScale(ix); });
      
                                           
    }
    
    var host = document.querySelector('body');
    var dim = getDimensions(host);
    var clientWidth = dim.width - (margin.left + margin.right);
    var clientHeight = dim.height - (margin.top + margin.bottom);
    var legendWidth = 300;

var chartWidth = clientWidth - legendWidth;
   
    d3.json('data.json', function(error, data) {
      if (error) console.error(error);
      this.createChart(data, host);
    });

</script>
</body>

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