7 ms·

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

124 points by andreykh 10y ago

AntonBaranchuk 10y ago
nice!
rstuart 10y ago
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 10y ago
  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/954b31aa8b8beb91b30ccb0c9e57f6ce 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 https://github.com/d3/d3-force/#simulation_find
  - polskibus 10y ago
    Wow, I didn't know D3 v.4 is so much better for Canvas, thanks for the link. However, this simulation runs horribly slow in FF and IE - I wonder where the fault is.
- Roman_Lubushkin 10y ago
  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 https://www.w3.org/standards/webdesign/graphics.html
- soperj 10y ago
  SVG is the best vector graphics format out there? Most other popular graphics formats are raster.
- paperkettle 10y ago
  p5.js (https://p5js.org/ https://p5js.org/) meets the mark of "canvas but more accessible" for me quite often. A different agenda than d3 tho
- angersock 10y ago
  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.
  - coldtea 10y ago
    >and because they are hack developers who do not understand how performance graphics work. Nothing "hack" about vector graphics, and nothing about graphics that necessitates "performance" above all else. We're not all making AAA games.
    - angersock 10y ago
      nothing about graphics that necessitates "performance" above all else. Brzzt, wrong. Computers are, at the end of the day, meant for crunching numbers. Graphics is perhaps one of the last pure workloads that is about crunching numbers--it's probably the best match of the advances of the last 20 years to a problem domain we could hope for. If your code cannot quickly do graphics, you have failed to competently make use of the user's resources. You are bad and are wasting their time and power, and in the one place where that inefficiency isn't justifiable. > We're not all making AAA games. Sure but we're also not all running MacBook Pros or GTX1080 cards on Xeons, now are we? There's this mindset that high-performance graphics somehow only benefits gamers and games, and that's wrong. Especially in the (mostly single-threaded, highly-marshalled) graphics environment of the browser, it is really easy to write code that will choke older machines to death and murder mobile devices. This can be done with a large chart dataset, a quickly updating visualization, or any number of other reasonable and normal and non-game use cases.
      - coldtea 10y ago
        >If your code cannot quickly do graphics, you have failed to competently make use of the user's resources. You are bad and are wasting their time and power, and in the one place where that inefficiency isn't justifiable Bzzt wrong. Nobody cares much about efficiency above a certain level. If they did we wouldn't be using your "efficient" canvas, where 30% of calls is JS overhead, but native code. >Sure but we're also not all running MacBook Pros or GTX1080 cards on Xeons, now are we? No, but we almost all are running multi-core PCs, laptops and phones that are perfectly capable to run SVG for most things people use it for. Maybe not plots with 10.000 points, but then again those are just badly designed, the screen doesn't have 10.000 pixels horizontally or vertically to show them all at once anyway.
- HNSucksAss 10y ago
  What are D3 and Canvas and why are they being injected into this conversation?
- coldtea 10y ago
  >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.
- untog 10y ago
  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.
- tylerlarson 10y ago
  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/ https://github.com/mrdoob/three.js/ Which has been used for many examples like this http://armsglobe.chromeexperiments.com/ http://armsglobe.chromeexperiments.com/ But you could look at the libraries focused on 2d like these http://paperjs.org/ http://paperjs.org/ http://fabricjs.com/ http://fabricjs.com/ But the larger 2d canvas libraries also have much of the same abilities. http://createjs.com/ http://createjs.com/ - http://codepen.io/ianwhitfield/pen/BKOJmj http://codepen.io/ianwhitfield/pen/BKOJmj https://github.com/pixijs/pixi.js https://github.com/pixijs/pixi.js - http://anvaka.github.io/ngraph/examples/pixi.js/06%20-%20Packaging/ 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.
cordite 10y ago
How are they making this compatible with IE6?
- sintaxi 10y ago
  more importantly, why?
  - Roman_Lubushkin 10y ago
    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 10y ago
      It's a fact that can change.
      - indexerror 10y ago
        Probably not going to happen anytime soon unless services stop working at all.
        Retra 10y ago
        .. which will happen sooner if people stop supporting them.
      - Roman_Lubushkin 10y ago
        Course it can and I hope it will)) Imagine how we like to fix bugs in IE6 considering today is 2016
      - est 10y ago
        Nope. Most modern browsers stopped Windows XP support. Hell like that are able to run computers with 1G RAM.
- 10y ago
slake 10y ago
Pardon me if I'm wrong, but I don't see Free/Open-Source anywhere on the website. It seems paid, proprietary everywhere.
- grizzles 10y ago
  This looks BSD-ish https://github.com/AnyChart/graphicsjs/blob/master/LICENSE https://github.com/AnyChart/graphicsjs/blob/master/LICENSE
- AntonBaranchuk 10y ago
  http://www.graphicsjs.org/eula/ http://www.graphicsjs.org/eula/
- aaronhoffman 10y ago
  it just changed from Apache yesterday https://github.com/AnyChart/graphicsjs/commit/ea38d3ac71a325872a11f6b0a1d83a53b1c03ee0 https://github.com/AnyChart/graphicsjs/commit/ea38d3ac71a325...
bastawhiz 10y ago
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 10y ago
  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.DistinctColors#listen 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.
  - Roman_Lubushkin 10y ago
    I might be confusing but palette can dispatch change event when you change particular palette item or whole items set.
AntonBaranchuk 10y ago
Here is one more very important feature of GraphicsJS - Accessibility (508 Section) http://docs.anychart.com/7.11.1/Common_Settings/Accessibility_(508_section) http://docs.anychart.com/7.11.1/Common_Settings/Accessibilit... Disclaimer: I work at AnyChart.
reitoei 10y ago
Awesome work.
- AntonBaranchuk 10y ago
  Thank you!
anc84 10y ago
The animated ones eat a whole CPU, not a good sign.
pawelkomarnicki 10y ago
Tried this library, it's... well, not that powerful, lacks documentation and is a cheap marketing grab for another, charting, library :/
- andreykh 10y ago
  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
throwaway2016a 10y ago
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 10y ago
  10,000+ customers is about AnyChart. GraphicsJS is a rendering engine of AnyChart library and now it become to open source.
  - throwaway2016a 10y ago
    Thank you for clarifying.
prashnts 10y ago
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/Bender-iframe http://playground.anychart.com/gallery/7.11.1/Graphics/Bende... [2] http://playground.anychart.com/gallery/7.11.1/Graphics/Bender-plain http://playground.anychart.com/gallery/7.11.1/Graphics/Bende...

124 points by andreykh 10y ago

nice!

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 10y ago
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/954b31aa8b8beb91b30ccb0c9e57f6ce 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 https://github.com/d3/d3-force/#simulation_find
- polskibus 10y ago
  Wow, I didn't know D3 v.4 is so much better for Canvas, thanks for the link. However, this simulation runs horribly slow in FF and IE - I wonder where the fault is.
Roman_Lubushkin 10y ago
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 https://www.w3.org/standards/webdesign/graphics.html
soperj 10y ago
SVG is the best vector graphics format out there? Most other popular graphics formats are raster.
paperkettle 10y ago
p5.js (https://p5js.org/ https://p5js.org/) meets the mark of "canvas but more accessible" for me quite often. A different agenda than d3 tho
angersock 10y ago
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.
- coldtea 10y ago
  >and because they are hack developers who do not understand how performance graphics work. Nothing "hack" about vector graphics, and nothing about graphics that necessitates "performance" above all else. We're not all making AAA games.
  - angersock 10y ago
    nothing about graphics that necessitates "performance" above all else. Brzzt, wrong. Computers are, at the end of the day, meant for crunching numbers. Graphics is perhaps one of the last pure workloads that is about crunching numbers--it's probably the best match of the advances of the last 20 years to a problem domain we could hope for. If your code cannot quickly do graphics, you have failed to competently make use of the user's resources. You are bad and are wasting their time and power, and in the one place where that inefficiency isn't justifiable. > We're not all making AAA games. Sure but we're also not all running MacBook Pros or GTX1080 cards on Xeons, now are we? There's this mindset that high-performance graphics somehow only benefits gamers and games, and that's wrong. Especially in the (mostly single-threaded, highly-marshalled) graphics environment of the browser, it is really easy to write code that will choke older machines to death and murder mobile devices. This can be done with a large chart dataset, a quickly updating visualization, or any number of other reasonable and normal and non-game use cases.
    - coldtea 10y ago
      >If your code cannot quickly do graphics, you have failed to competently make use of the user's resources. You are bad and are wasting their time and power, and in the one place where that inefficiency isn't justifiable Bzzt wrong. Nobody cares much about efficiency above a certain level. If they did we wouldn't be using your "efficient" canvas, where 30% of calls is JS overhead, but native code. >Sure but we're also not all running MacBook Pros or GTX1080 cards on Xeons, now are we? No, but we almost all are running multi-core PCs, laptops and phones that are perfectly capable to run SVG for most things people use it for. Maybe not plots with 10.000 points, but then again those are just badly designed, the screen doesn't have 10.000 pixels horizontally or vertically to show them all at once anyway.
HNSucksAss 10y ago
What are D3 and Canvas and why are they being injected into this conversation?
coldtea 10y ago
>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.
untog 10y ago
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.
tylerlarson 10y ago
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/ https://github.com/mrdoob/three.js/ Which has been used for many examples like this http://armsglobe.chromeexperiments.com/ http://armsglobe.chromeexperiments.com/ But you could look at the libraries focused on 2d like these http://paperjs.org/ http://paperjs.org/ http://fabricjs.com/ http://fabricjs.com/ But the larger 2d canvas libraries also have much of the same abilities. http://createjs.com/ http://createjs.com/ - http://codepen.io/ianwhitfield/pen/BKOJmj http://codepen.io/ianwhitfield/pen/BKOJmj https://github.com/pixijs/pixi.js https://github.com/pixijs/pixi.js - http://anvaka.github.io/ngraph/examples/pixi.js/06%20-%20Packaging/ 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.

cordite 10y ago

How are they making this compatible with IE6?

sintaxi 10y ago
more importantly, why?
- Roman_Lubushkin 10y ago
  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 10y ago
    It's a fact that can change.
    - indexerror 10y ago
      Probably not going to happen anytime soon unless services stop working at all.
      - Retra 10y ago
        .. which will happen sooner if people stop supporting them.
    - Roman_Lubushkin 10y ago
      Course it can and I hope it will)) Imagine how we like to fix bugs in IE6 considering today is 2016
    - est 10y ago
      Nope. Most modern browsers stopped Windows XP support. Hell like that are able to run computers with 1G RAM.
10y ago

slake 10y ago

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

grizzles 10y ago
This looks BSD-ish https://github.com/AnyChart/graphicsjs/blob/master/LICENSE https://github.com/AnyChart/graphicsjs/blob/master/LICENSE
AntonBaranchuk 10y ago
http://www.graphicsjs.org/eula/ http://www.graphicsjs.org/eula/
aaronhoffman 10y ago
it just changed from Apache yesterday https://github.com/AnyChart/graphicsjs/commit/ea38d3ac71a325872a11f6b0a1d83a53b1c03ee0 https://github.com/AnyChart/graphicsjs/commit/ea38d3ac71a325...

bastawhiz 10y ago

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 10y ago
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.DistinctColors#listen 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.
- Roman_Lubushkin 10y ago
  I might be confusing but palette can dispatch change event when you change particular palette item or whole items set.

AntonBaranchuk 10y ago

Here is one more very important feature of GraphicsJS - Accessibility (508 Section) http://docs.anychart.com/7.11.1/Common_Settings/Accessibility_(508_section) http://docs.anychart.com/7.11.1/Common_Settings/Accessibilit... Disclaimer: I work at AnyChart.

reitoei 10y ago

Awesome work.

AntonBaranchuk 10y ago
Thank you!

anc84 10y ago

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

pawelkomarnicki 10y ago

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

andreykh 10y ago
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

throwaway2016a 10y ago

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 10y ago
10,000+ customers is about AnyChart. GraphicsJS is a rendering engine of AnyChart library and now it become to open source.
- throwaway2016a 10y ago
  Thank you for clarifying.

prashnts 10y ago

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