Selections are core to working with D3 beyond the basics. They're powerful and useful, but require new developers to get up to speed (e.g. set aside 30m to read and digest: https://github.com/mbostock/d3/wiki/Selections) and if used in the context of a larger application will result in a portion of the code using different patterns than the rest, requiring a translation layer in between.
The complexity and flexibility of D3.js results in it being a time-consuming tool to learn for many users.
D3 is incredibly flexible; probably more so than any other JavaScript visualization library at the time of this posting. With that flexibility comes increased complexity. If you just want to create some quick charts you will get results faster with something else.
As a continuation of the Processing project, this frameworks helps in understanding the general programming concepts that goes beyond drawing (connecting electronics, using sounds or the webcam etc),
If looking for something to build UIs with or similar, one might be disappointed by the lack of any pre-defined UI element objects and such in p5.js. One has to write all the rendering code for any objects one includes, integrating it appropriately with the loop.
Objects in Paper make it easy to extend parent objects and run constructor functions without having to worry about JavaScript prototypal inheritance. Because of this it is easy to make compound drawing objects with their own instance variables and behaviors.
Example: each swimming tadpole follows its own behavior
These features make it easier to create objects that can act autonomously with complex behaviors. This makes Paper a good choice for particle effects and game development.
Paper uses a frame based approach to rendering the canvas. This makes it conceptually easier to create objects with animations and behaviors that interact and perform with other objects.
Along with Paper's approach to creating and managing objects this makes Paper especially good for creating applications with complex behaviors with many elements doing different actions at once, and makes it a good choice for making games.
The code is written in a way that everything is global and limited to a single instance, there is no clean way to use 2 separate instances in the same page
Because Processing doesn't keep track of shape objects it's more efficient than other libraries. Processing can do more complicated effects faster than other libraries. Although this means you have to keep track of more yourself in your code, it also means you have more control over the finer details of how things are rendered.
A demo showcasing the ability to create complex renderings
In processing you can write code in both JavaScript and Processing code. This allows you to use existing Processing code on the client side.
Processing code is similar to Java in that it has static typing. This can make more complex calculations more robust, and less likely to cause conflicts.
The library takes a more frame based approach to rendering, so you use drawing functions to draw directly to the frame without objects. This can make it easier to write efficient full frame rendering scenes and post processing effects.
Because Raphael supports rendering VML + SVG, it is one of the few drawing libraries that is backwards compatible with older browsers that do not support canvas.
Several built-in animations (such as ways of easing) are provided for you out of the box, but Raphael also allows cubic beziers for more complicated easing functions. Any drawing object property can be modified making it similar to css animations in jQuery.
Everything that is drawn in Raphael is an object which means it is easy to manipulate any part of the rendered image after it is processed. It uses an event handler system for user inputs which makes it easy to learn for JavaScript developers used to event based libraries.
An interactive chart demo.
This style of handling objects makes Raphael a good fit for rendering interactive diagrams and charts that can also interact with other parts of the page.
Dmitry Baranovskiy also wrote Raphael (project now owned by Sencha), this is the updated modern version of that library. Dmitry also is a champion directly affecting the future of SVG standards with W3C
Fabric supports node.js, and has an npm package available for server side rendering with all the dependencies handled for you. This allows you to provide graceful degradation for image fallbacks to canvas or SVG content.
Drawing objects in fabric are vector focused, so everything is easily transformable. It makes it easy to create complex pathed shapes, add gradients, or filters. Although fabric is great for vector rendering, it also has image support as well.
When it comes to format compatibility, Fabric is the best, with the ability to output to Canvas, SVG, and JSON. SVG provides backwards compatibility for older browsers, and JSON allows you to store rendered output for later use.
Besides having all consecrated charts like line, area, bar, horizontal bar, pie, bubble , it can have styles for line dots (solid dot, hollow dot, star, bow, anchor) or bar types (like dome, cylinder, parallelepiped). It has support for stacked bars, negative bars, combo bar-line charts, dual axis, click events and tooltips.
Can be used together with a template engine such as Mustache or Handlebars to display SVG graphics or instead of a static template engine, you can use a data binding or MVC/MV* library, such as Ractive.js, Angular, Mithril or Facebook React.
3 APIs of increasing abstraction:
Low-level (svg paths)
Basic shapes (Polygon, Rectangle, Bezier, Sector, Connector etc..)
Basic graphs (Pie, bar, stock, radar, tree, waterfall, sankey etc...)
There is no magic, you can have as much control as you want on how you define your graphs, source code very readable.
Most drawing libraries are built for screens / pixels, which only need to be accurate to one decimal place (half a pixel). Maker.js is built for very accurate CAD drawings.
GFX can use a variety of formats to render (SVG, VML, canvas and SIlverlight). It simply does not lock you into one single browser's implementation of vector graphics.
As dojo.gfx is part of the dojo toolkit, it should be used when using (or at least planning to use) other tools in the toolkit. This is because it would simply be overwhelming to load the entire dojo library to use only one of its modules.
Pergola runs seamlessly in an HTML environment (option in configuration file). All the examples are provided both as SVG standalone and embedded in HTML, and are strictly equal.
Besides its universal Node Helper (http://www.svgmagazine.com/jul2011/dom-helper.html) Pergola also provides the equivalent for building HTML nodes and <foreignObject> HTML nodes.
The creator of Concrete.js tries to combine most of the features that every HTML5 canvas project needs and packs it all with about 600 lines of JavaScript.
Here is a chart of examples showing ZIM at 37% less code the developer writes when compared to other frameworks such as PixiJS, Flutter, CreateJS, PaperJS, P5js, Phaser and the DOM.
It is quite common in ZIM to not even store an object in a variable as chaining is available for almost all methods and there are short chainable methods for most properties.
new Circle().center().drag();
new Rectangle()
.loc(100,100)
.alp(0) // alpha
.animate({x:200, alpha:1}, .5);
new Tile(new Circle(20, series(red, blue, green), 10, 10).center();
// tiles 10x10 circles with colors is series of red, blue or green
new Emitter([new Circle(), new Rectangle()]).center();
// emits random circles and rectangles
interval({min:1, max:3}, ()=>{});
// each interval is between 1 and 3 seconds
So passing in a series lets you pick in order, passing in an array lets you pick randomly, passing in a min/max range picks from the range, passing in a function picks the result of the function. These can be applied to all styles too.
The entire library is built from scratch to be lightweight and modular. Its footprint can further be reduced by including only specific components and features that your application requires.
All controls and its features are created as modules to allow selective referencing, so that only controls and features you need are included in your application.
Complete source code, unit test files, and e2e test scripts are available on GitHub. Such components are subject to the terms and conditions of the Syncfusion EULA.
With our commitment to at least four major updates per year, you receive the most up-to-date functionality and new components in addition to monthly service packs and bug fixes. Custom patches are available as needed.
Pixel-perfect built-in themes are available in material, bootstrap, and fabric designs. In addition, it comes with accessible high-contrast theme and an online tool Theme Studio to customize built-in themes.