How to use @vx/mock-data - 10 common examples

import { AxisLeft } from '@vx/axis';
import { Group } from '@vx/group';
import { cityTemperature } from '@vx/mock-data';
import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
import { BarGroupHorizontal } from '@vx/shape';
import { max } from 'd3-array';
import { timeFormat, timeParse } from 'd3-time-format';
import React from 'react';

const data = cityTemperature.slice(0, 4);
const keys = Object.keys(data[0]).filter(d => d !== 'date');
const parseDate = timeParse('%Y%m%d');
const format = timeFormat('%b %d');
const formatDate = date => format(parseDate(date));

// accessors
const y0 = d => d.date;
const x = d => d.value;

export default ({
  width,
  height,
  events = false,
  margin = {
    top: 20,
    left: 50,

{ x: new Date('2017-06-28'), y0: 170, y1: 273 },
    { x: new Date('2017-06-29'), y0: 190, y1: 285 },
    { x: new Date('2017-06-30'), y0: 201, y1: 301 },
  ],
};

priceBandData.points = priceBandData.band.map(({ x, y0, y1 }) => ({
  x,
  // Introduce noise within the y0-y1 range
  y: (y1 + y0) / 2 + (Math.random() > 0.5 ? -1 : 1) * Math.random() * ((y1 - y0) / 4),
}));

// interval data
const intervals = [[5, 8], [15, 19]];

export const intervalLineData = cityTemperature.slice(0, 25).map((d, i) => ({
  ...d,
  x: d.date,
  y: intervals.some(([i0, i1]) => i >= i0 && i <= i1) ? null : Number(d[groupKeys[0]]),
}));

export const intervalData = intervals.reduce((ret, [i0, i1]) => {
  ret.push({
    x0: cityTemperature[i0].date,
    x1: cityTemperature[i1].date,
  });

  return ret;
}, []);

// circle pack
const dateBetween = (startDate, endDate) =>

import { AxisBottom } from '@vx/axis';
import { Grid } from '@vx/grid';
import { LegendOrdinal } from '@vx/legend';
import { cityTemperature } from '@vx/mock-data';
import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
import { BarStack } from '@vx/shape';
import { Tooltip, withTooltip } from '@vx/tooltip';
import { max } from 'd3-array';
import { timeFormat, timeParse } from 'd3-time-format';
import React from 'react';

const data = cityTemperature.slice(0, 12);

const keys = Object.keys(data[0]).filter(d => d !== 'date');
const parseDate = timeParse('%Y%m%d');
const format = timeFormat('%b %d');
const formatDate = date => format(parseDate(date));

// accessors
const x = d => d.date;
const y = d => d.value;

const totals = data.reduce((ret, cur) => {
  const t = keys.reduce((dailyTotal, k) => {
    dailyTotal += +cur[k];
    return dailyTotal;
  }, 0);
  ret.push(t);

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

// point data
const n = 10;
export const pointData = genRandomNormalPoints(n).map(([x, y], i) => ({
  x,
  y,

import { AxisBottom } from '@vx/axis';
import { cityTemperature } from '@vx/mock-data';
import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
import { BarGroup } from '@vx/shape';
import { max } from 'd3-array';
import { timeFormat, timeParse } from 'd3-time-format';
import React from 'react';

const data = cityTemperature.slice(0, 8);
const keys = Object.keys(data[0]).filter(d => d !== 'date');
const parseDate = timeParse('%Y%m%d');
const format = timeFormat('%b %d');
const formatDate = date => format(parseDate(date));

// accessors
const x0 = d => d.date;
const y = d => d.value;

export default ({
  width,
  height,
  events = false,
  margin = {
    top: 40
  }

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

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 { Group } from '@vx/group';
import { GlyphDot } from '@vx/glyph';
import { LinePath } from '@vx/shape';
import { genDateValue } from '@vx/mock-data';
import { scaleTime, scaleLinear } from '@vx/scale';
import { curveMonotoneX, curveBasis } from '@vx/curve';

const data = genDateValue(15);

// accessors
const date = d => d.date;
const value = d => d.value;

// scales
const xScale = scaleTime({
  domain: [Math.min(...data.map(date)), Math.max(...data.map(date))],
});
const yScale = scaleLinear({
  domain: [0, Math.max(...data.map(value))],
});

// positions
const x = d => xScale(date(d));
const y = d => yScale(value(d));

import React from 'react';
import { Grid } from '@vx/grid';
import { Group } from '@vx/group';
import { curveBasis } from '@vx/curve';
import { GradientOrangeRed } from '@vx/gradient';
import { genDateValue } from '@vx/mock-data';
import { AxisLeft, AxisRight, AxisBottom } from '@vx/axis';
import { Area, LinePath, Line } from '@vx/shape';
import { scaleTime, scaleLinear } from '@vx/scale';
import { extent } from 'd3-array';

const data = genDateValue(20);

// accessors
const x = d => d.date;
const y = d => d.value;

// responsive utils for axis ticks
function numTicksForHeight(height) {
  if (height <= 300) return 3;
  if (height > 300 && height <= 600) return 5;
  return 10;
}

function numTicksForWidth(width) {
  if (width <= 300) return 2;
  if (width > 300 && width <= 400) return 5;
  return 10;