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

import { GradientTealBlue } from '@vx/gradient';
import { Group } from '@vx/group';
import { letterFrequency } from '@vx/mock-data';
import { scaleBand, scaleLinear } from '@vx/scale';
import { Bar } from '@vx/shape';
import { max } from 'd3-array';
import React from 'react';

const data = letterFrequency.slice(5);

function round(value, precision) {
  var multiplier = Math.pow(10, precision || 0);
  return Math.round(value * multiplier) / multiplier;
}

// accessors
const x = d => d.letter;
const y = d => +d.frequency * 100;

export default ({ width, height, events = false }) => {
  if (width < 10) return null;

  // bounds
  const xMax = width;
  const yMax = height - 120;

import React from 'react';
import { Pie } from '@vx/shape';
import { Group } from '@vx/group';
import { GradientPinkBlue } from '@vx/gradient';
import { letterFrequency, browserUsage } from '@vx/mock-data';

const letters = letterFrequency.slice(0, 4);
const browsers = Object.keys(browserUsage[0])
  .filter(k => k !== 'date')
  .map(k => ({ label: k, usage: browserUsage[0][k] }));

function Label({ x, y, children }) {
  return (
    
  );
}

export default ({
  width,
  height,
  events = false,

import React from 'react';
import { Group } from '@vx/group';
import { letterFrequency } from '@vx/mock-data';
import { scaleLinear } from '@vx/scale';
import { Point } from '@vx/point';
import { Line, LineRadial } from '@vx/shape';

const orange = '#ff9933';
const pumpkin = '#f5810c';
const silver = '#d9d9d9';
const bg = '#FAF7E9';

const ANG = 360;
const data = letterFrequency.slice(2, 12);

const y = d => d.frequency;

export default ({
  width,
  height,
  levels = 5,
  margin = {
    top: 40,
    left: 80,
    right: 80,
    bottom: 80,
  },
}) => {
  if (width < 10) return null;