Layers with

What is a Layer ?

  1. Canvas or DOM element
  2. Displayed within the viz
  3. Sync with the camera

When to use layers ?

  • Annotate the graph
  • Add non native features
  • Add meaning to the graph

API

            
              ogma.layers.addCanvasLayer(
                (ctx) => {...},
                index
              )
              ogma.layers.addLayer({
               element: beautifulDomElement
              })
              ogma.layers.addOverlay({
               element: beautifulDomElement,
               position: {x: 0, y: 0},
               size: {width: 100, height: 50}
              })
            
          

Basic Layers

  • DOM element
  • Do not move with the camera

Overlays

  • DOM element
  • Move with the camera

Canvas Layer

  • Create a canvas
  • Move with the camera

Annotate the graph

Annotate the graph

Non native features

Non native features

Add meaning

Add meaning

D3 integration

Kanva.js integration

Conclusion

Questions ?