TradesByProduct

<!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
    };

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;
    
    function createSvg() {
      return d3.select(host).select("svg")
        .attr("width", dim.width)
        .attr("height", dim.height)

}
    
    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 drawLegend(data, svg, colorScale) {
      var legendPlot = svg.append('g')
      	.attr('transform', 'translate('+(clientWidth - legendWidth + 20)+', '+margin.top+')')
      	.attr('class', 'legend--plot')
      	.attr('height', clientHeight)
      	.attr('width', legendWidth);

var legend = legendPlot.selectAll('g').data(data).enter()
      	.append('g')
        .attr('class', function(d, ix) {
          return 'legend--item legend--item-' + (ix + 1);
        })
      	.attr('data-product-name', function(d) { return d.name; });

var offsetHeight = 22;
      var getY = function(_, ix) {
        return ix * offsetHeight;
      };

legend.append('rect')
      	.attr('width', 40)
      	.attr('height', 18)
        .attr('x', function(_, ix) { return legendWidth - 45})
        .attr('y', getY)
        .attr('clss', function(d, ix) {
      		return 'legend--box legend--box-' + (ix + 1);
        })
      	.style('fill', function(d, ix) {
        	return 'url(#Gradient' + (ix + 1) + ')';
      	});
      
      legend.append('text')
        .attr('x', 30)
        .attr('y', getY)
      	.attr('class', function(_, ix) { return 'legend--text legend--text-' + (ix + 1);})
      	.text(function(d) { return d.name; })
      	.each(function(d, i) {
        	var w = this.getComputedTextLength();
        	d3.select(this).attr('transform', 'translate('+(legendWidth - 80 - w)+', 14)');
      	})

return legendPlot;
    }

function createChart(data) {
      var totalBars = data.length;
      var barHeight = clientHeight / (totalBars + 1);

var svg = createSvg();
      var colorScale = createColorPalette(data, svg);
      drawLegend(data, svg, colorScale);
      
      var plot = createPlotArea(svg);

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);

plot.append('line')
        .attr('x1', xScale(0)).attr('y1', 0)
        .attr('x2', xScale(0)).attr('y2', clientHeight)
        .attr('stroke', 'steelblue')
        .attr('stroke-width', '2px')
        .style('opacity', '0.5');
    }
    
    d3.json('data.json', function(error, data) {
      if (error) {
        console.log(error);
      }
      this.createChart(data);
    });
    
  </script>
</body>

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