
Show HN: GraphicsJS, New Powerful Free Open-Source JavaScript Graphics Library - andreykh
http://www.graphicsjs.org
======
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?

~~~
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.

~~~
RobertKerans
So the simpler and better solution for [eg] icons or graphs is for idiots, and
the Very Smart Developers are are all off building solutions that might, just
might have utterly trivial perfomance gains at the expense of easily writable
and modifiable code? Hmm.

~~~
angersock
Okay, so icons are a different use-case than "graphics" and in particular
_graphs_ , right? Font-awesome (as an example) and The Noun Project are
excellent packages and ones that use SVGs to good effect.

Graphs, though? _Graphs_?

The sweet spot for SVGs is when you have relatively small data set sizes, need
interactivity, and update the data very little. There's also the question of
how competently different browser vendors handle SVG and animation--if you're
on a nice desktop or laptop, it'll be great!

Once _any of those things change_ , you need to start looking at using raster
or GPU graphics. If your dataset updates frequently (say, faster than every
few hundred milliseconds) or is large (say, larger than a few thousand points)
or needs to reliably run on mobile devices or older workstations, the SVG
approach will show issues _pretty quickly_.

Oh, and it's not _trivial performance gains_ , unless you have your head so
far up your ass that you don't watch how balls _slow_ the average user's
device and browsing experience is. Nor is it at the expense of easily-writable
or modifiable code, _unless you 're a hack script-kiddie who cannot fathom how
to modularize their code and write clear solutions to problems_.

I'm not even going to apologize for this, because there is just so much
garbage advice and bad practices going on in the frontend right now because
some chucklefuck found D3 and has decided that it has solved all of their
charting and drawing problems forever--and never notices how badly their
cutesy demos perform in the wild.

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

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.

~~~
throwaway2016a
Thank you for clarifying.

------
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](https://github.com/AnyChart/graphicsjs/blob/master/LICENSE)

------
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...](http://playground.anychart.com/gallery/7.11.1/Graphics/Bender-
iframe) [2]
[http://playground.anychart.com/gallery/7.11.1/Graphics/Bende...](http://playground.anychart.com/gallery/7.11.1/Graphics/Bender-
plain)

------
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...](https://api.anychart.com/7.11.1/anychart.palettes.DistinctColors#listen)
\- 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.

~~~
Roman_Lubushkin
I might be confusing but palette can dispatch change event when you change
particular palette item or whole items set.

------
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](http://www.graphicsjs.org). Docs:
[http://docs.anychart.com/7.11.1/Graphics](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?

~~~
sintaxi
more importantly, why?

~~~
Roman_Lubushkin
China, India, Africa, Indonesia, Russia (regional government offices), for
this and for many other countries IE6-8 is common case. It's just a fact.

~~~
Retra
It's a fact that can change.

~~~
indexerror
Probably not going to happen anytime soon unless services stop working at all.

~~~
Retra
.. which will happen sooner if people stop supporting them.

------
reitoei
Awesome work.

~~~
AntonBaranchuk
Thank you!

------
AntonBaranchuk
nice!

