Show HN: GraphicsJS, New Powerful Free Open-Source JavaScript Graphics Library

[rstuart]

The speed and responsiveness of Canvas for complex visualisation (ones where there are a lot of objects) means it's often the better choice. However, libraries like d3 make working with SVG a lot easier.

I'm interested, why does SVG seem to de the default choice for web graphics? And is there something like d3 that makes working with Canvas more accessible?

[oscilloscope]

D3 Version 4 has more utilities and examples of interactions with Canvas. Here's an example of a relatively small graph (~500 nodes, 10k edges) that SVG used to struggle with, but Canvas renders with ease.

http://bl.ocks.org/syntagmatic/954b31aa8b8beb91b30ccb0c9e57f...

Notice the nodes are draggable, an interaction supported by the new simulation.find https://github.com/d3/d3-force/#simulation_find

[coldtea]

>I'm interested, why does SVG seem to de the default choice for web graphics?

Because SVG IS web graphics (emphasis on "web"). It lives on the DOM, it's objects have event callbacks, can be styled in CSS-fashion, have nested items, links, etc.

In contrast, Canvas is just a bitmap pane that you can draw own in an imperative way through a JS API -- and everything above that has to be programmed by you or a third party lib in an ad-hoc way.

[tylerlarson]

SVG is many times slower than an optimized graphics library rendered on the canvas tag in 2d or webgl contexts. There are many libraries based on the canvas tag for graphics but not all of them are focused on doing visualizations but people still use them for these use cases all the time.

The most well known WebGL library is https://github.com/mrdoob/three.js/ Which has been used for many examples like this http://armsglobe.chromeexperiments.com/

But you could look at the libraries focused on 2d like these http://paperjs.org/ http://fabricjs.com/ But the larger 2d canvas libraries also have much of the same abilities. http://createjs.com/ - http://codepen.io/ianwhitfield/pen/BKOJmj https://github.com/pixijs/pixi.js - http://anvaka.github.io/ngraph/examples/pixi.js/06%20-%20Pac...

If you are just rendering vectors like an icon image, there is no harm in using SVG. If you want access to nodes on a page with a JavaScript library like jQuery, SVG is still the best option. For everything else SVG is not the most performant and is not able to deliver on many graphics abilities that the Canvas tag is capable of. I respect that in most visualizations it doesn't matter and it might be easier but it doesn't mean SVG is the best thing to use for all graphics.

[Roman_Lubushkin]

As far as i know there are some issues with canvas text measurement and accessibility support. So it's just hard to use it for data visualization and infographics. Take a look at W3C accessibility graphics topic https://www.w3.org/standards/webdesign/graphics.html

[paperkettle]

p5.js (https://p5js.org/) meets the mark of "canvas but more accessible" for me quite often. A different agenda than d3 tho

[soperj]

SVG is the best vector graphics format out there? Most other popular graphics formats are raster.

[untog]

One important reason I often use it: you can trivially bind click events and the like to SVG nodes. In Canvas you have to track x/y coordinates of a click and what it matches up to yourself.

[angersock]

People pick SVG because it looks sharp, has certain features that make development easier, and because they are hack developers who do not understand how performance graphics work.

[AntonBaranchuk]

Here is one more very important feature of GraphicsJS - Accessibility (508 Section) http://docs.anychart.com/7.11.1/Common_Settings/Accessibilit...

Disclaimer: I work at AnyChart.

[throwaway2016a]

I'm confused by "New" and 10,000+ customers. What part of it is new? Certainly getting 10k customers takes a lot of time.

[Roman_Lubushkin]

10,000+ customers is about AnyChart. GraphicsJS is a rendering engine of AnyChart library and now it become to open source.

[slake]

Pardon me if I'm wrong, but I don't see Free/Open-Source anywhere on the website. It seems paid, proprietary everywhere.

[grizzles]

This looks BSD-ish https://github.com/AnyChart/graphicsjs/blob/master/LICENSE

[AntonBaranchuk]

http://www.graphicsjs.org/eula/

[aaronhoffman]

it just changed from Apache yesterday https://github.com/AnyChart/graphicsjs/commit/ea38d3ac71a325...

[prashnts]

Honestly, did somebody had to code the Bender [1] illustration manually? The source code [2] does _not_ make me any excited about the library, since it's essentially SVG wrapped in a prettier(?) syntax.

I would love to have a library that can "import" an SVG generated from, say, inkscape or Sketch and then allows to animate just a few parts of that vector -- this would be useful in this context too -- draw Bender, and simply move the eyes from JS.

[1] http://playground.anychart.com/gallery/7.11.1/Graphics/Bende... [2] http://playground.anychart.com/gallery/7.11.1/Graphics/Bende...

[bastawhiz]

Looking at the source for the examples, I really can't see how that's practical to write. It may be fast but damn is that code gnarly.

[onion2k]

The documentation doesn't help either - it's nasty generated stuff that simply enumerates the API interfaces without adding very much useful information.

For example, https://api.anychart.com/7.11.1/anychart.palettes.DistinctCo... - why would you want to attach listeners to palette colors? There might be a great reason, or those methods might just have been inherited from the base class, but the documentation is no to your understanding help whatsoever. The example is for the base class rather than the palette object.

This is actually a good example of bad documentation.

[pawelkomarnicki]

Tried this library, it's... well, not that powerful, lacks documentation and is a cheap marketing grab for another, charting, library :/

[andreykh]

D3, AnyChart and so on are for charting. GraphicsJS is for drawing graphics, and charting is just one of possible use cases - check out the demos http://www.graphicsjs.org. Docs: http://docs.anychart.com/7.11.1/Graphics

[anc84]

The animated ones eat a whole CPU, not a good sign.

[cordite]

How are they making this compatible with IE6?

[Roman_Lubushkin]

IE 6-8 supports VML, so Graphics switch to VML if SVG is not available

[sintaxi]

more importantly, why?

[reitoei]

Awesome work.

[AntonBaranchuk]

Thank you!

[AntonBaranchuk]

nice!