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

logNormal[mu] = [];

  stddevs.forEach(std => {
    const normalGen = randomNormal(mu, std);
    const logNormalGen = randomLogNormal(mu, std);
    normal[mu].push(range(n).map(normalGen));
    logNormal[mu].push(range(n).map(logNormalGen));
  });
});

// randomly sample from the letters above
const letters = 'abcdefghijklmnopqrstuvwxyz';
export const categorical = range(n).map(() => letters[intBetween(0, letters.length - 1)]);

// binned data ----------------------------------------------------------------
export const binnedCategorical = letterFrequency.map(({ letter, frequency }) => ({
  bin: letter,
  count: Math.floor(10000 * frequency),
  id: letter,
}));

export const binnedNumeric = range(15).map(i => ({
  bin0: i,
  bin1: i + 1,
  count: intBetween(2, 200),
  id: String(i),
}));

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

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]))),

const margin = {
  top: 20,
  bottom: 20,
  right: 20,
  left: 20,
}

const xMax = width - margin.left - margin.right
const yMax = width - margin.top - margin.bottom

const x = d => d.letter
const y = d => d.frequency * 100

const xScale = scaleBand({

  domain: data.map(x),
  padding: 0.4,
})
const yScale = scaleLinear({
  range: [yMax, 0],
  domain: [0, Math.max(...data.map(y))],
})

const compose = (scale, accessor) => data => scale(accessor(data))
const xPoint = compose(xScale, x)
const yPoint = compose(yScale, y)

export default () => {
  return (
    <svg height="{height}" width="{width}">
      {data.map((d, i) =&gt; {
        const barHeight = yMax - yPoint(d)</svg>

margin: {
      bottom: 40,
      left: 60,
      right: 0,
      top: 0
    },
    xAxisLabel: 'Letters',
    yAxisLabel: 'Frequency',
  }
}

const dataInZooFormat = letterFrequency.map((datum) => {
  return { label: datum.letter, value: datum.frequency }
})

const dataWithVariableBarColor = letterFrequency.map((datum) => {
  return { color: '#1cc6b7', label: datum.letter, value: datum.frequency }
})

const mockData = Object.assign({}, { data: dataInZooFormat }, optionsMock)
const mockDataWithColor = Object.assign({}, { data: dataWithVariableBarColor }, optionsMock)

const variableStarPeriodMockData = {
  data: [
    {
      color: 'neutral-3',
      label: 'filter-1',
      value: 0.4661477096
    },
    {
      color: 'status-critical',
      label: 'filter-2',

export default () => {
  return (
    <svg height="{height}" width="{width}">
      {data.map((d, i) =&gt; {
        const barHeight = yMax - yPoint(d)
        return (
          
            
          
        )
      })}
    </svg>
  )
}

}

const xMax = width - margin.left - margin.right
const yMax = width - margin.top - margin.bottom

const x = d => d.letter
const y = d => d.frequency * 100

const xScale = scaleBand({

  domain: data.map(x),
  padding: 0.4,
})
const yScale = scaleLinear({
  range: [yMax, 0],
  domain: [0, Math.max(...data.map(y))],
})

const compose = (scale, accessor) => data => scale(accessor(data))
const xPoint = compose(xScale, x)
const yPoint = compose(yScale, y)

export default () => {
  return (
    <svg height="{height}" width="{width}">
      {data.map((d, i) =&gt; {
        const barHeight = yMax - yPoint(d)
        return (
          
            </svg>

const { colors } = zooTheme.global

const optionsMock = {
  options: {
    margin: {
      bottom: 40,
      left: 60,
      right: 0,
      top: 0
    },
    xAxisLabel: 'Letters',
    yAxisLabel: 'Frequency',
  }
}

const dataInZooFormat = letterFrequency.map((datum) => {
  return { label: datum.letter, value: datum.frequency }
})

const dataWithVariableBarColor = letterFrequency.map((datum) => {
  return { color: '#1cc6b7', label: datum.letter, value: datum.frequency }
})

const mockData = Object.assign({}, { data: dataInZooFormat }, optionsMock)
const mockDataWithColor = Object.assign({}, { data: dataWithVariableBarColor }, optionsMock)

const variableStarPeriodMockData = {
  data: [
    {
      color: 'neutral-3',
      label: 'filter-1',
      value: 0.4661477096