graphane

data visualization microframework

Declarative Syntax

Easily create and manage powerful graphs using intuitive templating directives, reducing the learning curve and increasing productivity.

Data Binding

The rendering engine detects and applies changes to the graphical representation, ensuring seamless updates that stay in sync with your data.

Powerful and Open

Create any type of data-driven graphic, with low-level access to all visual elements without limitations.

Seamless Integration

Built with web components, it integrates smoothly with plain HTML and popular Javascript frameworks.

Performance Optimization

Optimized for performance, the solution includes efficient rendering algorithms and element reuse for fast, effective rendering.

Tiny size

Designed as a microframework with a minimal footprint, it ensures a quick and smooth download experience.

Simple example

html

<g-composer>
  <svg viewBox="0 0 200 100" width="200px" height="100px">
    <g stroke-width="12" stroke-linecap="round">
      <g g-for="(record, index) of data">
        <line  x1="22"
              :x2="record.value"
              :y1="index * 20 + 30"
              :y2="index * 20 + 30"
              :stroke="record.color"
        ></line>
      </g>
    </g>
  </svg>
  <script type="data">
    [
      {"color": "#D80000", "value": 130},
      {"color": "#00D800", "value": 170},
      {"color": "#0000D8", "value": 100}
    ]
  </script>
</g-composer>