Skip to main content

Data Transformation

By, default, the loaded data is used as is.

However, it is possible to transform the data before it is used in the chart, by one of these ways:

dataTransform function​

The chart options can have a dataTransform function which can be used to transform the data before it is used in the chart. It receives the loaded data and returns the transformed data.

Example:

import { race } from 'racing-bars';

const options = {
  dataTransform: (data) =>
    data.map((d) => ({
      ...d,
      icon: `https://flagsapi.com/${d.code}/flat/64.png`,
    })),
  title: 'World Population',
  // ...
};

race('/data/population.csv', '#race', options);

View in gallery

Manually loading and transforming data​

The loadData function can be used to load data. It can then be transformed before it is used in the chart.

import { loadData, race } from 'racing-bars';

const data = await loadData('/data/population.csv', 'csv');
const transformedData = data.map((d) => ({
  ...d,
  icon: `https://flagsapi.com/${d.code}/flat/64.png`,
}));

const options = {
  title: 'World Population',
  // ...
};

race(transformedData, '#race', options);

startDate and endDate options​

The data can be filtered by setting the startDate and endDate options.

import { race } from 'racing-bars';

const options = {
  title: 'World Population',
  startDate: '1970-01-01',
  endDate: '1999-12-31',
};

race('/data/population.csv', '#race', options);

View in gallery

makeCumulative option​

The data values can be converted to cumulative sums (running totals) by setting the makeCumulative option to true.

import { race } from 'racing-bars';

const options = {
  title: 'Github Stars',
  makeCumulative: true,
  // ...
};

race('/data/gh-star.csv', '#race', options);

View in gallery

valueDecimals option​

In case you just need to control the number of decimal places to display for values, you do not need to transform the data. You may just use the valueDecimals option.

import { race } from 'racing-bars';

const options = {
  title: 'World Population',
  valueDecimals: 0,
  // ...
};

race('/data/population.csv', '#race', options);

View in gallery

Filling gaps in data​

Dates that are missing from data will be skipped. If you need to fill date gaps, you may use the options fillDateGapsInterval and fillDateGapValue.

import { race } from 'racing-bars';

const options = {
  fillDateGapsInterval: 'month',
  fillDateGapsValue: 'interpolate',
  valueDecimals: 2,
};

race('/data/population.csv', '#race', options);

View in gallery