Composer

Graphane is based on the custom tag <g-composer></g-composer>. This web component is the main element of Graphane and everything happens inside it. We will include the other elements in a nested way.

The component g-composer can include:

name	description	tag
template	defines the SVG powered by directives	<template></template>
data	data in format CSV, JSON or JSON5	<script type="data"></script>
methods	Optionally, can include Javascript functions to manage events and data transformation	<script type="methods"></script>

Using external resources instead including the code in the component

In all our examples we will include the code directly inside g-composer. In practice, we can create separate files for each of the elements and link them by the attributes:

• The svg-src attribute specifies the path to the SVG template.
• The data-src attribute indicates the location of the data source.
• The methods-src attribute indicates the location of methods.