function drawChart(user: PuzzleUserData) {
  const history = Array.from(user.recent.map(x => x[2]))
  const rating = user.rating
  if (rating !== undefined) {
    history.push(rating)
  }
  const data = history.map((x, i) => [i + 1, x])
  const graph = select('#training-graph')
  const margin = {top: 5, right: 20, bottom: 5, left: 35}
  const width = +graph.attr('width') - margin.left - margin.right
  const height = +graph.attr('height') - margin.top - margin.bottom
  const g = graph.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

  const xvalues = data.map(d => d[0])
  const scaleX = scaleLinear()
  .domain([Math.min.apply(null, xvalues), Math.max.apply(null, xvalues)])
  .rangeRound([0, width])

  const yvalues = data.map(d => d[1])
  const scaleY = scaleLinear()
  .domain([Math.min.apply(null, yvalues) - 10, Math.max.apply(null, yvalues) + 10])
  .rangeRound([height, 0])

  const area = d3Area()
  .x(d => scaleX(d[0]))
  .y0(height)
  .y1(d => scaleY(d[1]))

  const line = d3Area()
  .x(d => scaleX(d[0]))
  .y(d => scaleY(d[1]))

  const yAxis = axisLeft(scaleY)
  .tickFormat(d => String(d))

  g.datum(data)

  g.append('g')
  .call(yAxis)
  .append('text')
  .attr('class', 'legend')
  .attr('transform', 'rotate(-90)')
  .attr('y', 6)
  .attr('dy', '0.71em')
  .attr('text-anchor', 'end')
  .text(i18n('rating'))

  g.append('path')
  .attr('class', 'path')
  .attr('fill', 'steelblue')
  .attr('stroke', 'steelblue')
  .attr('stroke-linejoin', 'round')
  .attr('stroke-linecap', 'round')
  .attr('stroke-width', 0)
  .attr('d', area)

  g.append('path')
  .attr('class', 'line')
  .attr('d', line)
}

export function niceInterval(interval: Interval): Interval {
  const nicedInterval = d3Scale.scaleLinear().domain([ interval.min, interval.max ]).nice().domain();
  return {
    min: nicedInterval[0],
    max: nicedInterval[1]
  }
}

  generateColorScheme(scheme, type, domain) {
    if (typeof(scheme) === 'string') {
      scheme = colorSets.find(cs => {
        return cs.name === scheme;
      });
    }
    let colorScale;
    if (type === 'quantile') {
      colorScale = scaleQuantile()
        .range(scheme.domain)
        .domain(domain);

    } else if (type === 'ordinal') {
      colorScale = scaleOrdinal()
        .range(scheme.domain)
        .domain(domain);

    } else if (type === 'linear') {
      // linear schemes must have at least 2 colors
      const colorDomain = [...scheme.domain];
      if (colorDomain.length === 1) {
        colorDomain.push(colorDomain[0]);
        this.colorDomain = colorDomain;
      }

      const points = range(0, 1, 1.0 / colorDomain.length);
      colorScale = scaleLinear()
        .domain(points)
        .range(colorDomain);
    }

    return colorScale;
  }

var getMaxTickLabelSize = function (domainValues, formatter, fnCalcTickLabelSize, axisLabelLimit) {

    if (domainValues.length === 0) {
        return {width: 0, height: 0};
    }

    if (formatter === null) {
        var size = fnCalcTickLabelSize('TauChart Library');
        size.width = axisLabelLimit * 0.625; // golden ratio
        return size;
    }

    if (domainValues.every(d => (typeof d === 'number'))) {
        domainValues = d3.scaleLinear().domain(domainValues).ticks();
    }

    var maxXTickText = domainValues.reduce((prev, value) => {
        let computed = formatter(value).toString().length;

        if (!prev.computed || computed > prev.computed) {
            return {
                value: value,
                computed: computed
            };
        }
        return prev;
    }, {}).value;

    return fnCalcTickLabelSize(formatter(maxXTickText));
};

  getColor(value) {
    if (this.scaleType === 'linear') {
      const valueScale = scaleLinear()
        .domain(this.domain)
        .range([0, 1]);

      return (this.scale(valueScale(value)));
    } else {

      if(typeof this.customColors === 'function') {
        return this.customColors(value);
      }

      const formattedValue = value.toString();
      let found: any; // todo type customColors
      if (this.customColors && this.customColors.length > 0) {
        found = this.customColors.find((mapping) => {
          return mapping.name.toLowerCase() === formattedValue.toLowerCase();
        });
      }

      if (found) {
        return found.value;
      } else {
        return this.scale(value);
      }
    }
  }

  constructor(column: DataGridColumn, state: IHihglighterState) {
    super(column, state);

    this.state.minColor = formatColor(state.minColor || getDefaultColor('blue'));
    this.state.maxColor = formatColor(state.maxColor || getDefaultColor('red'));

    this.colorScale = d3scale.scaleLinear()
      .domain([this.state.minVal, this.state.maxVal])
      .range([this.state.minColor, this.state.maxColor]);
  }

  initBarGraph() {
    const svg = selection.select('.line-graph-container')
      .append('svg')
      .attr('width', 700)
      .attr('height', 300);
    const margin = {top: 20, right: 20, bottom: 30, left: 40};
    const width = +svg.attr('width') - margin.left - margin.right;
    const height = +svg.attr('height') - margin.top - margin.bottom;
    const x = scaleBand().rangeRound([0, width]).padding(0.1);
    const y = scaleLinear().rangeRound([height, 0]);

    const g = svg.append('g')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

    // uses sample data from https://bl.ocks.org/mbostock/3885304
    (d3 as any).tsv('/assets/data.tsv').then(function(d) {
      d.frequency = +d.frequency;
      return d;
    }, function(error, data: [{ letter: string, frequency: number}]) {
      if (error) {
        throw error;
      }

      x.domain(data.map((d) => d.letter));
      y.domain(d3.extent(data, (d) => d.frequency));

      g.append('g')
        .attr('class', 'axis axis--x')
        .attr('transform', `translate(0, ${height})`)
        .call(d3.axisBottom(x));

      g.append('g')
        .attr('class', 'axis axis--y')
        .call(d3.axisLeft(y).ticks(10, '%').tickPadding(23))
        .append('text')
          .attr('transform', 'rotate(-90)')
          .attr('y', 6)
          .attr('dy', '0.71em')
          .attr('text-anchor', 'end')
          .text('Frequency');

      g.selectAll('.bar')
        .data(data)
        .enter().append('rect')
          .attr('class', 'bar')
          .attr('x', (d) => x(d.letter))
          .attr('y', (d) => y(d.frequency))
          .attr('width', x.bandwidth())
          .attr('height', (d) => height - y(d.frequency));
    });
  }

  constructor(column: DataGridColumn, state: IHihglighterState) {
    super(column, state);

    if (typeof this.state.minVal !== 'number' || typeof this.state.maxVal !== 'number' ) {
      throw new Error('Min and Max values are not set');
    }

    this.state.midVal = column.getValueResolver()(this.state.midVal || (this.state.minVal + this.state.maxVal / 2));
    this.state.midColor = formatColor(state.midColor);

    this.colorScale = d3scale.scaleLinear()
      .domain([this.state.minVal, this.state.midVal, this.state.maxVal])
      .range([this.state.minColor, this.state.midColor, this.state.maxColor]);
  }

	constructor( svg: Selection<BaseType, {}, HTMLElement, any>, dataLength: number) {
		const node: SVGSVGElement = svg.node() as SVGSVGElement
		const div: HTMLElement = node.parentNode as HTMLElement

		const width = div.clientWidth
		const height = div.clientHeight

		const x = scaleTime().range([0, width])
		const y = scaleLinear().range([height, 0])

		const minModelX = Date.now()

		const idxToTime = (idx: number) => minModelX + idx * 86400 * 1000
		const xAxis = new MyAxis(Orientation.Bottom, x)
			.ticks(4)
			.setTickSize(height)
			.setTickPadding(8 - height)
			.setScale(x)

		const yAxis = new MyAxis(Orientation.Right, y)
			.ticks(4)
			.setTickSize(width)
			.setTickPadding(2 - width)
			.setScale(y)

		const gX = svg.append('g')
			.attr('class', 'axis')
			.call(xAxis.axis.bind(xAxis))

		const gY = svg.append('g')
			.attr('class', 'axis')
			.call(yAxis.axis.bind(yAxis))

		animateBench((elapsed: number) => {
			const minY = -5
			const maxY = 83
			const minX = animateCosDown(dataLength / 2, 0, elapsed)
			const maxX = minX + dataLength / 2

			x.domain([minX, maxX].map(idxToTime))
			y.domain([minY, maxY])

			xAxis.axisUp(gX)
			yAxis.axisUp(gY)
		})
	}

 colors.forEach(function (color) {
     if (prevColor) {
         const scale = d3ScaleLinear()
             .domain([0, subPaletteSize])
             .range([prevColor, color])
             .interpolate(d3InterpolateLab as any)
             ;
         for (let i = 0; i < subPaletteSize; ++i) {
             range.push(scale(i));
         }
     }
     prevColor = color;
 });