How to use the d3-scale.scaleUtc function in d3-scale

let localTimeScaleNumber: d3Scale.ScaleTime;
let localTimeScaleString: d3Scale.ScaleTime;
let localTimeScaleNumString: d3Scale.ScaleTime;

localTimeScaleNumber = d3Scale.scaleTime();
localTimeScaleString = d3Scale.scaleTime();
localTimeScaleNumString = d3Scale.scaleTime();


let utcScaleNumber: d3Scale.ScaleTime;
let utcScaleString: d3Scale.ScaleTime;
let utcScaleNumString: d3Scale.ScaleTime;

utcScaleNumber = d3Scale.scaleUtc();
utcScaleString = d3Scale.scaleUtc();
utcScaleNumString = d3Scale.scaleUtc();

// domain(...) -----------------------------------------------------------------

localTimeScaleNumber = localTimeScaleNumber.domain(domainDates);

domainDates = localTimeScaleNumber.domain();

localTimeScaleString = localTimeScaleString.domain([new Date(2016, 6, 1), Date.now()]);
domainDates = localTimeScaleString.domain();

localTimeScaleNumString = localTimeScaleNumString.domain(domainDates);
domainDates = localTimeScaleNumString.domain();


// range(...) -----------------------------------------------------------------

// scaleTime() and scaleUtc() ----------------------------------------------------

let localTimeScaleNumber: d3Scale.ScaleTime;
let localTimeScaleString: d3Scale.ScaleTime;
let localTimeScaleNumString: d3Scale.ScaleTime;

localTimeScaleNumber = d3Scale.scaleTime();
localTimeScaleString = d3Scale.scaleTime();
localTimeScaleNumString = d3Scale.scaleTime();

let utcScaleNumber: d3Scale.ScaleTime;
let utcScaleString: d3Scale.ScaleTime;
let utcScaleNumString: d3Scale.ScaleTime;

utcScaleNumber = d3Scale.scaleUtc();
utcScaleString = d3Scale.scaleUtc();
utcScaleNumString = d3Scale.scaleUtc();

// domain(...) -----------------------------------------------------------------

localTimeScaleNumber = localTimeScaleNumber.domain(domainDates);

domainDates = localTimeScaleNumber.domain();

localTimeScaleString = localTimeScaleString.domain([new Date(2016, 6, 1), Date.now()]);
domainDates = localTimeScaleString.domain();

localTimeScaleNumString = localTimeScaleNumString.domain(domainDates);
domainDates = localTimeScaleNumString.domain();

// range(...) -----------------------------------------------------------------

export default function timeScale<output>({
  range,
  rangeRound,
  domain,
  nice = false,
  clamp = false,
}: UtcConfig<output>) {
  const scale = scaleUtc<output>();

  if (range) scale.range(range);
  if (rangeRound) scale.rangeRound(rangeRound);
  if (domain) scale.domain(domain);
  if (nice) scale.nice();
  if (clamp) scale.clamp(true);

  // @ts-ignore
  scale.type = 'utc';

  return scale;
}
</output></output></output>

} = this.props;

    const yValues = data.map(d => d.label);

    const maxLabelLength = Math.max(...yValues.map(
      val => val.toString().length), MAX_LABEL_LENGTH);

    // adjust left margin for label length on horizontal bars
    // 4px for each letter is just a randomly chosen value
    const marginLeft = margin.left +
      Math.min(MAX_LABEL_LENGTH, maxLabelLength) * 4;

    const maxWidth = width - marginLeft - margin.right;
    const maxHeight = height - margin.top - margin.bottom;

    const xScale = scaleUtc()
      .range([0, maxWidth])
      .domain([startDate.toDate(), endDate.toDate()]);

    const yScale = scaleBand()
      .range([0, maxHeight])
      .domain(yValues)
      .padding(0.125);

    const futureRuns = [];
    let schedules = [];

    for (const d of data) {
      const {
        label,
        isInfinite = false,
        starts,

this.setup();
    }
    const { data, timeScale } = this.props;

    // keep old data rendered when data resets
    if (!data.length) {
      return;
    }
    const innerHeight = this.innerHeight;
    const innerWidth = this.innerWidth;

    let xScale;
    if (timeScale === 'scaleTime') {
      xScale = scaleTime().range([0, innerWidth]);
    } else if (timeScale === 'scaleUtc') {
      xScale = scaleUtc().range([0, innerWidth]);
    } else {
      xScale = scaleLinear().range([0, innerWidth]);
    }

    const yScale = scaleLinear().range([innerHeight, 0]);

    // filter out infinite values
    const filteredData = data.filter(d => d < Infinity && d > -Infinity);

    const xExtent = extent(filteredData);
    xScale.domain(xExtent);
    this.xAxis.call(axisBottom(xScale).ticks(7));

    const bins = histogram()
      .domain(xScale.domain())
      .thresholds(xScale.ticks(20))(filteredData);

function createScaleFromType<output>(type: ScaleType) {
  switch (type) {
    case ScaleType.LINEAR:
      return scaleLinear<output>();
    case ScaleType.LOG:
      return scaleLog<output>();
    case ScaleType.POW:
      return scalePow<output>();
    case ScaleType.SQRT:
      return scaleSqrt<output>();
    case ScaleType.SYMLOG:
      return undefined;
    case ScaleType.TIME:
      return scaleTime<output>();
    case ScaleType.UTC:
      return scaleUtc<output>();
    case ScaleType.QUANTILE:
      return scaleQuantile<output>();
    case ScaleType.QUANTIZE:
      return scaleQuantize<output>();
    case ScaleType.THRESHOLD:
      return scaleThreshold();
    case ScaleType.BIN_ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.ORDINAL:
      return scaleOrdinal&lt;{ toString(): string }, Output&gt;();
    case ScaleType.POINT:
      return scalePoint&lt;{ toString(): string }&gt;();
    case ScaleType.BAND:
      return scaleBand&lt;{ toString(): string }&gt;();
    default:
      return undefined;</output></output></output></output></output></output></output></output></output>

if (timeline) {
      xDomain = data.length > 1 ?
        [xMin, xMax] :
        [
          moment(xMin).subtract(1, 'day').toDate(),
          moment(xMax).add(1, 'day').toDate(),
        ];
    }
    else {
      xDomain = data.length > 1 ?
        [xMin, xMax] :
        [xMin - 1, xMax + 1];
    }

    const xScale = timeline ?
      scaleUtc()
        .range([0, maxWidth])
        .domain(xDomain) :
      scaleLinear()
        .range([0, maxWidth])
        .domain(xDomain);

    const yDomain = data.length > 1 ? [0, yMax] : [0, yMax * 2];

    const yScale = scaleLinear()
      .range([maxHeight, 0])
      .domain(yDomain)
      .nice();

    const y2Domain = data.length > 1 ? [0, y2Max] : [0, y2Max * 2];
    const y2Scale = scaleLinear()
      .range([maxHeight, 0])

(domain, width) =>
      Array.isArray(domain)
        ? scaleUtc()
            .domain(domain)
            .range([0, width])
        : null
  );

export default function tickGenerator(scale, settings) {
  const timeScale = d3ScaleTime();

  const fn = function fn() {};

  fn.transformTicks = function transformTicks(qTicks) {
    return qTicks.map((qt) => {
      let value = (qt.qStart + qt.qEnd) / 2;
      if (settings.anchor === 'start') {
        value = qt.qStart;
      } else if (settings.anchor === 'end') {
        value = qt.qEnd;
      }

      return {
        value,
        position: scale(value),
        start: scale(qt.qStart),