@vx/mock-data

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

Installation

``
npm install --save @vx/mock-data
`

Generators

Generators can create simple generic data for you like this:

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

$3

Returns a series of random normal x,y points.

$3

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:

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

$3

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

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

$3

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

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

$3

`js
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',
},
...
];
`

$3

`ts
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',
},
...
];
`

$3

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

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

$3

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

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

$3

`ts
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 },
...
],
};
`

$3

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

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

$3

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

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

Source For Components

$3

- genDateValue()
- genRandomNormalPoints()

$3

- appleStock
- browserUsage
- cityTemperature
- groupDateValue
- letterFrequency