Handling Data

In order to display your data in KronoGraph, you need to transform it into JSON format.

This example shows how to convert a CSV file to the correct JSON format, but a similar method can be applied whatever the format of your original data.

In our example, we're using mini-dish.csv, delivered in the downloaded KG package. It's a subset of data from the now-retired "What's on the menu?" project, originally hosted by the New York Public Library.

The code below uses the NPM packages csvtojson and fs-extra to help transform and save the appropriate file.

const csvtojson = require('csvtojson');
const fs = require('fs-extra');

async function transformData() {
  // read the csv file
  const csvData = await csvtojson().fromFile('mini-dish.csv');
  // create an empty object for events
  const events = {};
  // create an empty object for entities
  const entities = {};

  // iterate through the csv data and assign the
  // values in the file to the appropriate API
  csvData.forEach(({ name, first_appeared, last_appeared, highest_price }, index) => {
    // add data to the event object
    events[`event${index}`] = {
      entityIds: [name],
      time: {
        start: Date.parse(first_appeared),
        end: Date.parse(last_appeared),
      },
    };

    // calculate the color of the entity based on the highest_price value
    let color;
    if (highest_price === '0') {
      color = '#ff9147';
    } else if (highest_price > '0' && highest_price <= '0.5') {
      color = '#f7d06e';
    } else {
      color = '#e12d39';
    }
    // add data to the entity object
    entities[name] = {
      color,
    };
  });
  // create a data object containing the events and entities objects
  const data = { events, entities };
  // write the JSON file
  await fs.writeJSON('dishes-data.json', data);
}

transformData();

This is the result of the transformation - a JSON file.

Once the JSON file is correctly formatted it can be used to create a timeline:

import { createTimeline } from 'kronograph';
const data = require('dishes-data.json');

const timeline = createTimeline('handlingDataExample');

timeline.set(data);
timeline.fit();

The timeline would look like this:

Default