# ![Grapper](./assets/img/grapper.png)

See the complete documentation at [grapper.dev](https://grapper.dev/) and many editable examples
at [playground.grapper.dev](https://playground.grapper.dev/).

Grapper is a free and open-source **data visualization low-level microframework** designed to
facilitate the creation of custom, dynamic and interactive visualizations. Grapper offers 
**flexibility in designs**, allowing creators to make unique aesthetic visualizations that are far 
from becoming monotonous charts seen everywhere.

Grapper is composed of:

- **A web component** for combining:
  - **SVG** markup template with directives.
  - **Data** in JSON or CSV formats.
  - **Methods**, optionally, to handle interactivity and data transformation.

This is a basic example:

![example](assets%2Fimg%2Fexample.png)
  
```html
<grapper-view id="example-starter">
  <template>
    <svg viewBox="0 0 200 100" width="200px" height="100px">
      <g stroke-width="12" stroke-linecap="round">
        <defs g-for="(record, index) of data">
          <line x1="22"
                g-bind:x2="record.value"
                g-bind:y1="index * 20 + 30"
                g-bind:y2="index * 20 + 30"
                g-bind:stroke="record.color"/>
        </defs>
      </g>
    </svg>
  </template>
  <script type="data">[ 
    { color: "#D80000", value: 130 }, 
    { color: "#00D800", value: 170 }, 
    { color: "#0000D8", value: 100 }, 
  ]
  </script>
</grapper-view>
```

Grapper is based on SVG and directives, defining a **declarative way** to build **data-driven**
graphics. This approach allows centering the effort on the design in a very natural form. Designers
and developers achieve technical efficiency and gain the means to communicate their data story to
their audience effectively.

In addition, Grapper has a **smooth rendering** and **optimal performance** with a **tiny 
overhead**. It is not just a tool but a complete system that includes specially designed mechanisms 
to update the visualization efficiently when data are changed. Grapper maintains high runtime 
performance without the need for pre-compilation processes.

## Load

To start, you must load Grapper on your HTML page. This is done by adding a `script` tag pointing
to the Grapper file. 

You can use the CDN directly:

```html
<script src="https://cdn.graphery.online/grapper/1.0.0/view.js"></script>
```

You can install locally the Grapper package with:

```bash
npm i grapper
```

## Authors and acknowledgment

The initial version has been created by Graphery. Thanks to collaborators and friends for their 
support and help. If you have any questions or need support, feel free to reach out.

## Contributing

We appreciate any contributions to the project! Whether it's reporting bugs, suggesting new
features, or submitting pull requests, your input is valuable.

## License

Grapper is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for more details.