Introduction to I2Djs
Version-4.0 - 2D graphics renderer for SVG, Canvas and WebGL contexts.
Last updated
Version-4.0 - 2D graphics renderer for SVG, Canvas and WebGL contexts.
Last updated
Integrated-2D is an Open source Javascript framework for rendering 2D graphics on SVG, Canvas, and WebGL contexts. I2Djs provides many graphical functionalists that help in building rich interactive visual applications.
The goal of this framework is to provide the same programming interface to create and animate elements across different graphical rendering contexts by leveraging their underlying capabilities. Its declarative approach simplifies the learning curve of a developer. Developers can use I2D’s multi-layered contextual approach seamlessly for creating powerful composite visualization under a single roof. Because of a single API, it's very easy to port visual application from one rendering context to another in a short period.
I2D’s declarative approach provides the same API syntax, and semantics, for all supported graphical contexts.
It provides methods for the creation, access, modification, and removal of nodes. Functionalities such as Data Joins (Join-Actions), Animations on attributes, styles, Path Animation, and Morphing are common across all the supported contexts.
SVG: For low scale better performance. I2Djs exposes full native SVG capabilities through its intuitive and easy to use APIs. Full scale native event types are supported along with some additional interaction behaviours like drag, zoom, Pan, etc.
Canvas: I2Djs Canvas provides API's with simple syntax to create different geometrical elements. It has an internal pseudo-DOM implementation of all basic elements supported by SVG. It also provides pixel manipulation capabilities and also supports events and behaviours to create more interactive canvas visualizations.
WebGL: I2Djs WebGL also has a pseudo-DOM implementation of almost all elements supported by SVG. In addition, it provides a way to define the custom shaders and the way to feed the data to the attributes, uniforms, textures. Similar to SVG and Canvas, even webGL supports most of the Events and behaviours.
PDF: I2Djs pdfLayer provides great API interface to define and generate rich PDF documents. Its API syntax and semantics are in-line with other layer APIs. It also supports features like - pages, templates, reusable templates. It internally uses PDFKit for generating PDF.
I2Djs implements various mechanisms to achieve efficient and scalable rendering of graphics.
Virtual DOM: I2Djs layer (all contexts) implements a mini Virtual DOM tree, which is a Javascript object representation of the corresponding DOM. All operations are performed on the VDOM and the same will be reflected in the actual DOM as part of the frame Refresh cycle. It helps in batching reads and writes.
Layering: I2Djs multi contextual layering technique helps in gaining the performance by splitting the composite scene into multiple sub-scenes across different layer contexts.
Join-Actions: I2Djs Join-Action mechanism helps in performing efficient high-scale data join with DOM and lets you define actions on them. It provides flexible handlers to manipulate data and to trigger corresponding actions without performing unnecessary join operations.
WebGL: I2Djs WebGL renderer provides intuitive syntax and semantics to achieve high-scale rendering.
Performance Intensive Examples
100000 particle distortion animation — WebGL
30000 particle distortion animation — Canvas
5000 particle distortion animation — SVG
I2Djs is licensed under the BSD 3-Clause "New" or "Revised" License. Please refer to the below link for more details
