How to use the @vx/mock-data.cityTemperature.slice function in @vx/mock-data

import { AxisLeft } from '@vx/axis';
import { Group } from '@vx/group';
import { cityTemperature } from '@vx/mock-data';
import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
import { BarGroupHorizontal } from '@vx/shape';
import { max } from 'd3-array';
import { timeFormat, timeParse } from 'd3-time-format';
import React from 'react';

const data = cityTemperature.slice(0, 4);
const keys = Object.keys(data[0]).filter(d => d !== 'date');
const parseDate = timeParse('%Y%m%d');
const format = timeFormat('%b %d');
const formatDate = date => format(parseDate(date));

// accessors
const y0 = d => d.date;
const x = d => d.value;

export default ({
  width,
  height,
  events = false,
  margin = {
    top: 20,
    left: 50,

{ x: new Date('2017-06-28'), y0: 170, y1: 273 },
    { x: new Date('2017-06-29'), y0: 190, y1: 285 },
    { x: new Date('2017-06-30'), y0: 201, y1: 301 },
  ],
};

priceBandData.points = priceBandData.band.map(({ x, y0, y1 }) => ({
  x,
  // Introduce noise within the y0-y1 range
  y: (y1 + y0) / 2 + (Math.random() > 0.5 ? -1 : 1) * Math.random() * ((y1 - y0) / 4),
}));

// interval data
const intervals = [[5, 8], [15, 19]];

export const intervalLineData = cityTemperature.slice(0, 25).map((d, i) => ({
  ...d,
  x: d.date,
  y: intervals.some(([i0, i1]) => i >= i0 && i <= i1) ? null : Number(d[groupKeys[0]]),
}));

export const intervalData = intervals.reduce((ret, [i0, i1]) => {
  ret.push({
    x0: cityTemperature[i0].date,
    x1: cityTemperature[i1].date,
  });

  return ret;
}, []);

// circle pack
const dateBetween = (startDate, endDate) =>

import { AxisBottom } from '@vx/axis';
import { Grid } from '@vx/grid';
import { LegendOrdinal } from '@vx/legend';
import { cityTemperature } from '@vx/mock-data';
import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
import { BarStack } from '@vx/shape';
import { Tooltip, withTooltip } from '@vx/tooltip';
import { max } from 'd3-array';
import { timeFormat, timeParse } from 'd3-time-format';
import React from 'react';

const data = cityTemperature.slice(0, 12);

const keys = Object.keys(data[0]).filter(d => d !== 'date');
const parseDate = timeParse('%Y%m%d');
const format = timeFormat('%b %d');
const formatDate = date => format(parseDate(date));

// accessors
const x = d => d.date;
const y = d => d.value;

const totals = data.reduce((ret, cur) => {
  const t = keys.reduce((dailyTotal, k) => {
    dailyTotal += +cur[k];
    return dailyTotal;
  }, 0);
  ret.push(t);

export const appleStockData = appleStock
  .filter((d, i) => i % 10 === 0)
  .map(d => ({
    x: new Date(d.date),
    y: d.close,
  }));

export const categoricalData = letterFrequency.map(d => ({
  x: d.letter,
  y: d.frequency,
}));

// stacked data
export const groupKeys = Object.keys(cityTemperature[0]).filter(attr => attr !== 'date');
export const stackedData = cityTemperature.slice(0, 12).map(d => ({
  // convert all keys to numbers
  ...groupKeys.reduce((obj, key) => ({ ...obj, [key]: Number(d[key]) }), {}),
  x: d.date,
  y: groupKeys.reduce((ret, curr) => ret + Number(d[curr]), 0),
}));

export const groupedData = stackedData.slice(0, 6).map(d => ({
  ...d,
  y: Math.max(...groupKeys.map(attr => Number(d[attr]))),
}));

// point data
const n = 10;
export const pointData = genRandomNormalPoints(n).map(([x, y], i) => ({
  x,
  y,

import { AxisBottom } from '@vx/axis';
import { cityTemperature } from '@vx/mock-data';
import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
import { BarGroup } from '@vx/shape';
import { max } from 'd3-array';
import { timeFormat, timeParse } from 'd3-time-format';
import React from 'react';

const data = cityTemperature.slice(0, 8);
const keys = Object.keys(data[0]).filter(d => d !== 'date');
const parseDate = timeParse('%Y%m%d');
const format = timeFormat('%b %d');
const formatDate = date => format(parseDate(date));

// accessors
const x0 = d => d.date;
const y = d => d.value;

export default ({
  width,
  height,
  events = false,
  margin = {
    top: 40
  }

import { AxisBottom, AxisLeft } from '@vx/axis';
import { Group } from '@vx/group';
import { LegendOrdinal } from '@vx/legend';
import { cityTemperature } from '@vx/mock-data';
import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
import { BarStackHorizontal } from '@vx/shape';
import { Tooltip, withTooltip } from '@vx/tooltip';
import { max } from 'd3-array';
import { timeFormat, timeParse } from 'd3-time-format';
import React from 'react';

const data = cityTemperature.slice(0, 12);
const keys = Object.keys(data[0]).filter(d => d !== 'date');
const parseDate = timeParse('%Y%m%d');
const format = timeFormat('%b %d');
const formatDate = date => format(parseDate(date));

const totals = data.reduce((ret, cur) => {
  const t = keys.reduce((dailyTotal, k) => {
    dailyTotal += +cur[k];
    return dailyTotal;
  }, 0);
  ret.push(t);
  return ret;
}, []);

export default withTooltip(
  ({

{props => (
           d["date"]}
            keys={Object.keys(cityTemperature[0]).filter(d => d !== "date")}
            colors={[
              colors.turquoise.light,
              colors.blue.light,
              colors.purple.light
            ]}
            margin={{ top: 50, left: 25, right: 10, bottom: 30 }}
            {...props}
          />
        )}

.add("Data Table", () => {
    return (
      
        
      
    );
  });

export const temperatureBands = groupKeys.map((city, cityIndex) =>
  cityTemperature.slice(0, 25).map(d => {
    const y = Number(d[city]) - 20 * cityIndex;

    return {
      key: city,
      x: d.date,
      y,
      y0: y + stdDev * y,
      y1: y - stdDev * y,
    };
  }),
);