Data

The Graphane goal is to display information based on data. Therefore, data is one of the elements that g-composer integrates, allowing the template to build the graph on top of the data information.

We can create visualizations using data in CSV, JSON or JSON5 formats. To load the data, we need to use the script tag indicating that it is type="data".

Using external data source

In all our examples we will include the data directly inside g-composer. In practice, data can be obtained from an external file as a resource from a URL. To load external data, we can use:

• The data-src attribute of g-composer indicates the location of the data source.

• The src attribute of script type="data" indicates the location of the data source.

Formats

Graphane allows the use of data in different formats, without the need to identify them in advance. The format used is automatically identified by Graphane.

The supported formats are:

CSV

Comma-Separated Values format is a simple and widely-used text format for storing tabular data. Each line in a CSV file represents a single record, and fields within the record are separated by commas or semicolon. The first line often contains headers that define the names of the columns. Graphane can use the Comma Separated Values (CSV) format in its different variants.

JSON or JSON5

JavaScript Object Notation is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. It represents data as key-value pairs and ordered lists using a syntax derived from JavaScript, though it is language-independent. JSON is commonly used for transmitting data in web applications, and its simplicity makes it ideal for representing structured data.

JSON5 is a simplified version of JSON that aims to make the format more human-friendly and writable. It allows for comments, trailing commas, single-quoted strings, and unquoted keys, among other enhancements. These features make JSON5 more forgiving and easier to work with, particularly during the development process.

We can use both as a format for the data used in g-composer.

Data Structure

The data structure can be as flexible as necessary. Normally, we will use a combination of arrays (where each record is an entry in the matrix) and objects (with its key-value pairs for each field).

• Array: The data can be a collection of data in an array. When data is loaded in CSV format it is always transformed into an array with objects.

• Object: the data can be an object with properties and attributes, and can include other nested objects or arrays.

Change the data and the reactivity

You can update the data by the g-compoposer property .data. By this property, we can access and manipulate the data of the component. If we modify the data, the graph is automatically updated with the new information. It's a fully reactive system. It observes changes in the data both at the surface level, and any changes in the data nested in depth.