6 ms·

Show HN: Vizzu – Open-source charting library focused on animating charts

115 points by vidipeti 5y ago

jitl 5y ago
Looks like an interesting library. It’s cool to see practical examples of C++ drawing via WebAssembly. This is how Figma works and is fast, but Figma isn’t open source. I’m saving a link so I can go read the source later. My feedback: replace the gif on the front page with your library! I thought it was an actual example and thought “cool idea but the implementation is slow and blurry”. But it works much better in the JSFiddle! Why not have some real examples here? There should be three at least - with a button to toggle between states. Your example pages also aren’t very mobile-screen responsive, could use a bit more love. (Browsing on iPhone 12 Pro Max)
- gavinray 5y ago
  The best example of WASM being used to render to canvas (it's also visualizations) I've seen is "Perspective": https://perspective.finos.org/ https://perspective.finos.org/ "Perspective is an interactive analytics and data visualization component, which is especially well-suited for large and/or streaming datasets. Originally developed at J.P. Morgan and open-sourced through the Fintech Open Source Foundation (FINOS), Perspective makes it simple to build user-configurable analytics entirely in the browser, or in concert with Python and/or Jupyterlab. Use it to create reports, dashboards, notebooks and applications, with static data or streaming updates via Apache Arrow." "A fast, memory efficient streaming query engine, written in C++ and compiled for both WebAssembly and Python. read/write/streaming for Apache Arrow, and a high-performance columnar expression language based on ExprTK."
  - antman 5y ago
    Firefox on iphone, buttons on perspective are not clickable.
- vidipeti 5y ago
  Thanks! Really useful tips.
XCSme 5y ago
Congrats! Any reasons I would use Vizzu apart from the alternatives? I am currently using Chart.js and I am happy with it.
- vidipeti 5y ago
  Thanks! Chart.js is an excellent charting library and much more mature than Vizzu currently. The key advantage of Vizzu is the embedded animation capability. You set up two charts, and you can morph from one to the other and vice versa out-of-the-box. The automatic data aggregation & data filtering feature is pretty unique as well.
  - jamessb 5y ago
    Interesting - with the focus on animations, Vizzu seems most similar to Gemini/Gemini2 https://github.com/uwdata/gemini https://github.com/uwdata/gemini https://uwdata.github.io/gemini-editor/ https://uwdata.github.io/gemini-editor/ https://uwdata.github.io/gemini2-editor/ https://uwdata.github.io/gemini2-editor/
    - vidipeti 5y ago
      This looks neat! We love the work of UW Interactive Data Lab but did not know about this one. Thanks for the suggestion.
sigg3 5y ago
This reminds me of the late, great professor Hans Rosling.
- vidipeti 5y ago
  Thank you! Hans Rosling's work is an important source of inspiration for us. With Vizzu we hope to empower people to build engaging, animated data stories, just like Mr. Rosling did.
deleted 5y ago
[deleted]
triptych 5y ago
Seems pretty straightforward to use. I got it working in Observable here https://observablehq.com/@triptych/hello-vizzu https://observablehq.com/@triptych/hello-vizzu
- vidipeti 5y ago
  We have added a markdown file in the repo to list 3rd party projects: https://github.com/vizzuhq/vizzu-lib/blob/main/PROJECTS.md https://github.com/vizzuhq/vizzu-lib/blob/main/PROJECTS.md Feel free to add this there if you like.
- vidipeti 5y ago
  WOW! That is so awesome! Thanks!
wilsonfiifi 5y ago
Slightly off topic but does anyone work with server generated charts at all? Or is there not much demand for pdf reports? Last I checked, converting Javascript charts to PNG is still a hacky/convoluted process.
- brianshaler 5y ago
  If it's pure Javascript and canvas (2D or WebGL) and no HTML/CSS (often the first thing you'll reach for when drawing and styling text) then it's pretty straightforward to render to JPG/PNG using node-canvas. WebGL on the server is a bit more cumbersome with setting up an X virtual frame buffer (xvfb). SVG is a lot more finicky, but I've used React to generate SVG that imagemagick can then rasterize. If you limit yourself to primitives, you can have an interactive React UI and be able to render any state snapshot to .svg, .jpg, and/or .png. I think things just get tricky if you want to use a browser-only library or something that mixes canvas, svg, and/or html+css.
- mgkimsal 5y ago
  I have a need for this as well. Many of the go-to packages from years ago seem abandoned.
rlevy 5y ago
I would good money to have something like this in a PowerPoint extension.
- vidipeti 5y ago
  Thanks for the feedback. It's on the roadmap, but it'll take some time until we get there.
vidipeti 5y ago
I work in a small team in Budapest, Hungary, and this library is our first product, currently in public beta. It works similarly to other charting libs, but when users create a set of charts, Vizzu will automatically animate between them. Thus, we think it is suitable for storytelling and building interactive data explorers. The library is dependency-free, written in C++ and compiled to WebAssembly. It has automatic data aggregation and filtering capabilities, and we set the defaults used based on dataviz guidelines. A short summary of how we built Vizzu: First, we created an engine that provides a standard interface for several chart types. Then we looked at the parameter space of this engine and made each parameter interpolable, turning our engine into a generic chart morpher that can continuously interpolate between any charts that can be described on its interface. After that, we analyzed these transitions and came up with rules that make them self-explanatory and easy to follow for the viewers, and finally, we embedded these rules into the engine. We've been working on Vizzu for quite some time and decided to go open-source because we want to make it easy for others to try it and build whatever they want while helping us figure out how the animation capability can be put to good use. We created a step-by-step tutorial and examples that you can start playing with in JSFiddle by clicking on the "Edit" button on each example's page. Tutorial: https://lib.vizzuhq.com/0.3.0/ https://lib.vizzuhq.com/0.3.0/ Examples: https://lib.vizzuhq.com/0.3.0/#examples-1.1 https://lib.vizzuhq.com/0.3.0/#examples-1.1 All suggestions and criticism are very welcome.
- gavinray 5y ago
  Just went through the examples -- I thought it was really neat! Often times I want/need to display data in more than one format. Usually I just take up a bunch of page space by putting multiple charts. Here's an example showing what I mean from actual project: https://github.com/hasura/graphql-bench/raw/master/app/hasura-bench-report.gif https://github.com/hasura/graphql-bench/raw/master/app/hasur... If there was a solid and comprehensive charting library that could "tween" between the chart formats, only taking up the space of 1 chart, that would be a neat solution! Have you found certain pairs/combinations of charts that expose hidden relationships when you display them by animating the data points between them?
  - 5y ago

115 points by vidipeti 5y ago

jitl 5y ago

Looks like an interesting library. It’s cool to see practical examples of C++ drawing via WebAssembly. This is how Figma works and is fast, but Figma isn’t open source. I’m saving a link so I can go read the source later. My feedback: replace the gif on the front page with your library! I thought it was an actual example and thought “cool idea but the implementation is slow and blurry”. But it works much better in the JSFiddle! Why not have some real examples here? There should be three at least - with a button to toggle between states. Your example pages also aren’t very mobile-screen responsive, could use a bit more love. (Browsing on iPhone 12 Pro Max)

gavinray 5y ago
The best example of WASM being used to render to canvas (it's also visualizations) I've seen is "Perspective": https://perspective.finos.org/ https://perspective.finos.org/ "Perspective is an interactive analytics and data visualization component, which is especially well-suited for large and/or streaming datasets. Originally developed at J.P. Morgan and open-sourced through the Fintech Open Source Foundation (FINOS), Perspective makes it simple to build user-configurable analytics entirely in the browser, or in concert with Python and/or Jupyterlab. Use it to create reports, dashboards, notebooks and applications, with static data or streaming updates via Apache Arrow." "A fast, memory efficient streaming query engine, written in C++ and compiled for both WebAssembly and Python. read/write/streaming for Apache Arrow, and a high-performance columnar expression language based on ExprTK."
- antman 5y ago
  Firefox on iphone, buttons on perspective are not clickable.
vidipeti 5y ago
Thanks! Really useful tips.

XCSme 5y ago

Congrats! Any reasons I would use Vizzu apart from the alternatives? I am currently using Chart.js and I am happy with it.

vidipeti 5y ago
Thanks! Chart.js is an excellent charting library and much more mature than Vizzu currently. The key advantage of Vizzu is the embedded animation capability. You set up two charts, and you can morph from one to the other and vice versa out-of-the-box. The automatic data aggregation & data filtering feature is pretty unique as well.
- jamessb 5y ago
  Interesting - with the focus on animations, Vizzu seems most similar to Gemini/Gemini2 https://github.com/uwdata/gemini https://github.com/uwdata/gemini https://uwdata.github.io/gemini-editor/ https://uwdata.github.io/gemini-editor/ https://uwdata.github.io/gemini2-editor/ https://uwdata.github.io/gemini2-editor/
  - vidipeti 5y ago
    This looks neat! We love the work of UW Interactive Data Lab but did not know about this one. Thanks for the suggestion.

sigg3 5y ago

This reminds me of the late, great professor Hans Rosling.

vidipeti 5y ago
Thank you! Hans Rosling's work is an important source of inspiration for us. With Vizzu we hope to empower people to build engaging, animated data stories, just like Mr. Rosling did.

deleted 5y ago

[deleted]

triptych 5y ago

Seems pretty straightforward to use. I got it working in Observable here https://observablehq.com/@triptych/hello-vizzu https://observablehq.com/@triptych/hello-vizzu

vidipeti 5y ago
We have added a markdown file in the repo to list 3rd party projects: https://github.com/vizzuhq/vizzu-lib/blob/main/PROJECTS.md https://github.com/vizzuhq/vizzu-lib/blob/main/PROJECTS.md Feel free to add this there if you like.
vidipeti 5y ago
WOW! That is so awesome! Thanks!

wilsonfiifi 5y ago

Slightly off topic but does anyone work with server generated charts at all? Or is there not much demand for pdf reports? Last I checked, converting Javascript charts to PNG is still a hacky/convoluted process.

brianshaler 5y ago
If it's pure Javascript and canvas (2D or WebGL) and no HTML/CSS (often the first thing you'll reach for when drawing and styling text) then it's pretty straightforward to render to JPG/PNG using node-canvas. WebGL on the server is a bit more cumbersome with setting up an X virtual frame buffer (xvfb). SVG is a lot more finicky, but I've used React to generate SVG that imagemagick can then rasterize. If you limit yourself to primitives, you can have an interactive React UI and be able to render any state snapshot to .svg, .jpg, and/or .png. I think things just get tricky if you want to use a browser-only library or something that mixes canvas, svg, and/or html+css.
mgkimsal 5y ago
I have a need for this as well. Many of the go-to packages from years ago seem abandoned.

rlevy 5y ago

I would good money to have something like this in a PowerPoint extension.

vidipeti 5y ago
Thanks for the feedback. It's on the roadmap, but it'll take some time until we get there.

vidipeti 5y ago

I work in a small team in Budapest, Hungary, and this library is our first product, currently in public beta. It works similarly to other charting libs, but when users create a set of charts, Vizzu will automatically animate between them. Thus, we think it is suitable for storytelling and building interactive data explorers. The library is dependency-free, written in C++ and compiled to WebAssembly. It has automatic data aggregation and filtering capabilities, and we set the defaults used based on dataviz guidelines. A short summary of how we built Vizzu: First, we created an engine that provides a standard interface for several chart types. Then we looked at the parameter space of this engine and made each parameter interpolable, turning our engine into a generic chart morpher that can continuously interpolate between any charts that can be described on its interface. After that, we analyzed these transitions and came up with rules that make them self-explanatory and easy to follow for the viewers, and finally, we embedded these rules into the engine. We've been working on Vizzu for quite some time and decided to go open-source because we want to make it easy for others to try it and build whatever they want while helping us figure out how the animation capability can be put to good use. We created a step-by-step tutorial and examples that you can start playing with in JSFiddle by clicking on the "Edit" button on each example's page. Tutorial: https://lib.vizzuhq.com/0.3.0/ https://lib.vizzuhq.com/0.3.0/ Examples: https://lib.vizzuhq.com/0.3.0/#examples-1.1 https://lib.vizzuhq.com/0.3.0/#examples-1.1 All suggestions and criticism are very welcome.

gavinray 5y ago
Just went through the examples -- I thought it was really neat! Often times I want/need to display data in more than one format. Usually I just take up a bunch of page space by putting multiple charts. Here's an example showing what I mean from actual project: https://github.com/hasura/graphql-bench/raw/master/app/hasura-bench-report.gif https://github.com/hasura/graphql-bench/raw/master/app/hasur... If there was a solid and comprehensive charting library that could "tween" between the chart formats, only taking up the space of 1 chart, that would be a neat solution! Have you found certain pairs/combinations of charts that expose hidden relationships when you display them by animating the data points between them?
- 5y ago