const plotLinesChart = function() {
  const data = this.dyk.linesChart.data;
  if (data.length == 0 || this.commitLocsChartPlotted) {
    return;
  }

  const countTicks = 10;
  const { width, height } = this.box;
  const { left, bottom, top } = this.offset;
  const linesSvg = d3.select(this.$refs.linesSvg);

  const g = linesSvg.append('g');

  const allData = data.slice().sort((a, b) => {
    a = +a.lines;
    b = +b.lines;

    return a < b ? -1 : (a > b ? 1 : 0);
  });

  let represented = splitByBins(allData);
  represented = represented.concat([{
    lines: represented.slice(-1)[0].lines * 2,
    freq: 0
  }]);

  const xDomain = represented.map(d => d.lines);

  const x = d3.scalePoint()
    .rangeRound([left, width])
    .domain(xDomain)
    .padding(0.15);

  const linesAxis = d3.axisBottom()
    .scale(x)
    .tickFormat(siFormatter)
    .tickSizeInner(this.tickSize);
  const xg = g.append('g')
    .call(linesAxis)
    .call(move(0, height - bottom));

  const freqsDomain = d3.extent(represented, d => d.freq);
  const y = d3.scaleLinear()
    .range([height - bottom, top])
    .domain(freqsDomain);
  const freqsAxis = d3.axisLeft()
    .scale(y)
    .tickFormat(siFormatter)
    .tickSizeInner(this.tickSize);
  const yg = g.append('g')
    .call(freqsAxis)
    .call(move(left, 0));

  const xTextGroup = xg.append('g')
    .call(move(width/2 + left/2, bottom - 5));

  xTextGroup.append('text')
    .text('Number of lines per commit')
    .attr('text-anchor', 'middle')
    .attr('alignment-baseline', 'middle');

  const yTextGroup = yg.append('g')
    .call(move(-left + 5, height/2 - bottom/2));

  yTextGroup.append('text')
    .attr('text-anchor', 'middle')
    .attr('alignment-baseline', 'middle')
    .attr('transform', 'rotate(270)')
    .text('Number of commits');

  // // Bars with relatively small value may have zero height due to interpolation.
  const barWidth = 3;
  g.append('g')
    .selectAll('g')
    .data(represented)
    .enter()
      .append('rect')
      .attr('width', x(xDomain[1]) - x(xDomain[0]) - 2)
      .attr('height', d => height - bottom - y(d.freq))
      .attr('transform', d => {

        const _x = x(d.lines) + 1;
        const _y = y(d.freq);
        return `translate(${_x}, ${_y})`;
      })
      .attr('fill', colors.primary);

};