@visx/mock-data

@visx/mock-data

The @visx/mock-data package is here to help you test out your graphs.

Installation

npm install --save @visx/mock-data

Generators

Generators can create simple generic data for you like this:

import Mock from '@visx/mock-data';
const points = Mock.genRandomNormalPoints();

Mock.genRandomNormalPoints()

Returns a series of random normal x,y points.

Mock.getDateValue(n)

Generates n date values an hour apart from each other starting with the current time.

Mocks

Mock are essentially a bunch of data dumps that you can use like this:

import Mock from '@visx/mock-data';
// or import { cityTemperature } from '@visx/mock-data';
const data = Mock.cityTemperature;

Mock.appleStock

interface AppleStock {
  date: string;
  close: number;
}

const appleStock: AppleStock[] = [
  { date: '2007-04-24T07:00:00.000Z', close: 93.24 },
  ...
];

Mock.bitcoinPrice

interface BitcoinPrices {
  currency: string;
  prices: BitcoinPrice[];
}

const bitcoinPrice: BitcoinPrices = {
  currency: 'USD',
  prices: [
    { price: '2486.69', time: '2017-07-03T00:00:00Z' },
    ...
  ]
};

Mock.browserUsage

const browserUsage: BrowserUsage[] = [
  {
    date: '2015 Jun 15',
    'Google Chrome': '48.09',
    'Internet Explorer': '24.14',
    Firefox: '18.82',
    Safari: '7.46',
    'Microsoft Edge': '0.03',
    Opera: '1.32',
    Mozilla: '0.12',
    'Other/Unknown': '0.01',
  },
  ...
];

Mock.cityTemperature

interface CityTemperature {
  date: string;
  'New York': string;
  'San Francisco': string;
  Austin: string;
}

const cityTemperature: CityTemperature[] = [
  {
    date: '20111001',
    'New York': '63.4',
    'San Francisco': '62.7',
    Austin: '72.2',
  },
  ...
];

Mock.exoplanets

interface Exoplanets {
  name: string;
  radius: number;
  distance: number | null;
}

const exoplanets: Exoplanets[] = [
  {
    name: 'Jupiter',
    radius: 10.97,
    distance: 0,
  },
  ...
];

Mock.groupDateValue

interface GroupDateValue {
  key: string;
  value: string;
  date: string;
}

const groupDateValue: GroupDateValue[] = [
  { key: 'Group1', value: '37', date: '04/23/12' },
  ...
];

Mock.lesMiserables

interface LesMiserablesNode {
  id: string;
  group: number;
}

interface LesMiserablesLink {
  source: string;
  target: string;
  value: number;
}

interface LesMiserables {
  nodes: LesMiserablesNode[];
  links: LesMiserablesLink[];
}

const lesMiserables: LesMiserables = {
  nodes: [
    { id: 'Myriel', group: 1 },
    ...
  ],
  links: [
    { source: 'Napoleon', target: 'Myriel', value: 1 },
    ...
  ],
};

Mock.letterFrequency

interface LetterFrequency {
  letter: string;
  frequency: number;
}

const letterFrequency: LetterFrequency[] = [
  { letter: 'A', frequency: 0.08167 },
  ...
];

Mock.shakespeare

interface Shakespeare {
  id: string;
  parent: string | null;
  size: number | null;
}

const shakespeare: Shakespeare[] = [
  {
    id: 'Shakespeare',
    parent: null,
    size: 0,
  },
  ...
];

Source For Components

generators/

• genDateValue()
• genRandomNormalPoints()

mocks/

• appleStock
• browserUsage
• cityTemperature
• groupDateValue
• letterFrequency

Changelog

v3.12.0 (2024-11-07)

:rocket: Enhancements

• feat(sankey): add @visx/sankey #1880

:memo: Documentation

• Fix small error in the code example in the "Theming" section #1863

:trophy: Contributors

• jacksonhardaker
• maurer2