Handling Data

Your KronoGraph data defines your entities and events. Ensure that every entity and event is identified by an id that is unique.

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:

Kronograph Example

Search

Handling Data

Terms of use