How to use the @vx/mock-data.genRandomNormalPoints function in @vx/mock-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,
  fill: theme.colors.categories[Math.floor(i / n)],
  size: Math.max(3, Math.random() * 10),
  label: i % n === 0 ? `(${parseInt(x, 10)},${parseInt(y, 10)})` : null,
}));

// band data
const stdDev = 0.1;
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,

import React from 'react';
import { genRandomNormalPoints } from '@vx/mock-data';
import { scaleLinear } from '@vx/scale';
import { Group } from '@vx/group';
import { AxisLeft, AxisBottom } from '@vx/axis';
import { BoxBrush, withBrush, getCoordsFromEvent, constrainToRegion } from '@vx/brush';
import { Motion, spring } from 'react-motion';
import colors from '../util/sillyColorScale';

const points = genRandomNormalPoints();

class BrushChart extends React.Component {
  constructor(props) {
    super(props);
    const { width, height, margin } = props;

    this.extent = {
      x0: margin.left,
      x1: width - margin.left,
      y0: margin.top,
      y1: height - margin.top,
    };

    this.initialDomain = {
      x: [-4.5, 4.5],
      y: [-4.5 / 2, 4.5 / 2],

import zooTheme from '@zooniverse/grommet-theme'
import { genRandomNormalPoints } from '@vx/mock-data'
import { scaleLinear } from '@vx/scale'
import { zip } from 'lodash'
import * as d3 from 'd3'
import kepler from '../../../helpers/mockLightCurves/kepler'
import variableStar from '../../../helpers/mockLightCurves/variableStar'
import { left, top, xMin, xMax, yMin, yMax } from './utils'

const color = zooTheme.global.colors['light-1']
const fontFamily = zooTheme.global.font.family
const fontSize = 12
const parentWidth = 768
const parentHeight = 384

const randomPoints = genRandomNormalPoints()

const xPoints = randomPoints.map((point) => {
  return point[0]
})
const yPoints = randomPoints.map((point) => {
  return point[1]
})

const data = {
  x: xPoints,
  y: yPoints
}

const dataPoints = zip(data.x, data.y)

const dataExtent = {

import { GlyphCircle } from '@vx/glyph';
import { GradientPinkRed } from '@vx/gradient';
import { Group } from '@vx/group';
import { genRandomNormalPoints } from '@vx/mock-data';
import { scaleLinear } from '@vx/scale';
import { Tooltip, withTooltip } from '@vx/tooltip';
import React from 'react';

const points = genRandomNormalPoints(600).filter((d, i) => {
  return i < 600;
});

const x = d => d[0];
const y = d => d[1];
const z = d => d[2];

let tooltipTimeout;

export default withTooltip(props => {
  const { width, height } = props;
  const xMax = width;
  const yMax = height - 80;
  if (width < 10) return null;

  const xScale = scaleLinear({

YAxis as XYChartYAxis,
  CrossHair,
  theme,
  withParentSize,
} from '@data-ui/xy-chart';

import { Histogram, DensitySeries, YAxis as HistYAxis } from '@data-ui/histogram';

import Checkbox from '../shared/Checkbox';

const BIN_COUNT = 50;
const n = 100;
const datasets = [];
const datasetColors = theme.colors.categories;

export const pointData = genRandomNormalPoints(n).forEach(([x, y], i) => {
  const dataSetIndex = Math.floor(i / n);
  if (!datasets[dataSetIndex]) datasets[dataSetIndex] = [];

  datasets[dataSetIndex].push({
    x: dataSetIndex === 1 ? x : x + Math.random(),
    y: dataSetIndex === 1 ? y - Math.random() : y,
    fill: theme.colors.categories[dataSetIndex],
    size: Math.max(3, Math.random() * 10),
  });
});

const marginScatter = { top: 10, right: 10, bottom: 64, left: 64 };
const marginTopHist = {
  top: 10,
  right: marginScatter.right,
  bottom: 5,