5 ms·

Show HN: Graphic – A grammar of data visualization and Flutter charting library

91 points by entronad 4y ago

Graphic is a grammar of data visualization and Flutter charting library, with there features: - A Grammar of Graphics: Graphic derives from Leland Wilkinson's book The Grammar of Graphics, and tries to balance between theoretical beauty and practicability. It inherits most concepts, like the graphic algebra. - Declarative and Reactive: As is encouraged in Flutter, the chart widget of Graphic is declarative and reactive. The grammar of data visualization is implemented by a declarative specification and the chart will reevaluate automatically on widget update. - Interactive: With the signal and selection mechanism, the chart is highly interactive. It is easy to pop a tooltip or scale the coordinate. - Customizable: With the shape and figure classes, it's easy to custom your own element, tooltip, annotation, etc. - Dataflow Graph and Operators: Graphic has a internal structure of a dataflow graph and operators. That is how the reactive reevaluation and interaction is implemented.

loa_observer 4y ago
Glad to see that there are grammar of graphics based visualization lib in dart!
skybrian 4y ago
Neat! For comparison, Observable Plot [1] does this sort of thing in JavaScript. It seems a bit more high-level and opinionated, though, having extensive support for plotting data on maps, but intentionally no support for pie charts. It might be interesting to compare how to do things in each library. It’s not clear if Graphic supports map-drawing yet? Also, I wonder if you can do animations in Graphic? I’ve done it with Observable Plot, but it’s not designed for it (no incremental updates) and the frame rate can bog down. [1] https://observablehq.com/@observablehq/plot https://observablehq.com/@observablehq/plot
- misterdata 4y ago
  Also, Vega [0] and Vega Lite [1] [0] https://vega.github.io/vega/ https://vega.github.io/vega/ [1] https://vega.github.io/vega-lite/ https://vega.github.io/vega-lite/
- hummus_bae 4y ago
  [dead]
- entronad 4y ago
  The eco system of vis in JavaScript is prosperous, there are lots excellent libs such as vega, echarts. I got many ideas from them. Flutter lacks such charting libs, so Graphic is a good alternative I think. Animation is under construction, it will come soon. The map is not supported yet, maybe added in the feature .
joelalcedo 4y ago
This is awesome, didn't realize there was a dart implementation drawing from grammar of graphics philosophy. ggplot2 (in R) has followed me around in a lot of use cases and such an intuitive way to create complex/customizable graphics. Looking forward to playing around with this.
TheMagicHorsey 4y ago
This is really cool! I've been following this since you first posted on Medium about it. Unfortunately when we were making decisions about which charting library to use, you weren't very feature complete, so we went with a different package (fl_chart).
- entronad 4y ago
  I am glad you'v paid attention to it. Graphic did evolve a lot in the past years and is still evolving. Hope you could keep an eye on it, maybe one day it could meet your needs.
college_physics 4y ago
This is very neat. I suppose it doesnt use SVG at any level (either as internal representation of graphical elements or for the rendering) but is there some way to enable import/export to vectors? The d3/vega family of js libraries have really enriched SVG based web graphics but android has not been very SVG friendly.
- entronad 4y ago
  It is based on dart canvas graphical system, which makes it performs as good as native mobile (SVG is not natively supported in mobile or flutter). But the grammar of dart canvas is very like SVG. I am upgrade the graphical engine for animation. I believe any one who knows about SVG will find it very easy and familiar to use. The idea of import SVG strings/files is a good idea, I shall consider it.
kthejoker2 4y ago
Why is there still such a gap between the grammar of charting (low level) and visual vocabulary (high level)? https://ft-interactive.github.io/visual-vocabulary/ https://ft-interactive.github.io/visual-vocabulary/ Tools like Lux, Plotly, PowerBI, all seem to shy away from being way more prescriptive about thr kinds of visuals needed for a particular analysis. Everyone wants to unleash their inner data artist, but if you're looking for time series anonalies, you want a ARIMA style line chart with an uncertainty funnel and a big red dot where actuals exceed targets. Super frustrating having to map these over and over again in every new GoG library.
- ano88888 4y ago
  I checked out the link. The information is great but I have to wonder if the author of the website is color blind or not. The chosen combination of text color and background color is so difficult for the eyes. If they got something so obvious wrong, I can't help but question the quality of the visual vocabulary they are selling.
  - kthejoker2 4y ago
    This is some rando's interactive representation of the FT visual vocabulary, which itself is just a very simple poster, but the conceptualization of analytical purpose to visualization is straightforward and fits 99% of business intelligence dashboarding use cases. https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/FT4schools_RGS.pdf https://github.com/Financial-Times/chart-doctor/blob/main/vi...

91 points by entronad 4y ago

loa_observer 4y ago

Glad to see that there are grammar of graphics based visualization lib in dart!

skybrian 4y ago

Neat! For comparison, Observable Plot [1] does this sort of thing in JavaScript. It seems a bit more high-level and opinionated, though, having extensive support for plotting data on maps, but intentionally no support for pie charts. It might be interesting to compare how to do things in each library. It’s not clear if Graphic supports map-drawing yet? Also, I wonder if you can do animations in Graphic? I’ve done it with Observable Plot, but it’s not designed for it (no incremental updates) and the frame rate can bog down. [1] https://observablehq.com/@observablehq/plot https://observablehq.com/@observablehq/plot

misterdata 4y ago
Also, Vega [0] and Vega Lite [1] [0] https://vega.github.io/vega/ https://vega.github.io/vega/ [1] https://vega.github.io/vega-lite/ https://vega.github.io/vega-lite/
hummus_bae 4y ago
[dead]
entronad 4y ago
The eco system of vis in JavaScript is prosperous, there are lots excellent libs such as vega, echarts. I got many ideas from them. Flutter lacks such charting libs, so Graphic is a good alternative I think. Animation is under construction, it will come soon. The map is not supported yet, maybe added in the feature .

joelalcedo 4y ago

This is awesome, didn't realize there was a dart implementation drawing from grammar of graphics philosophy. ggplot2 (in R) has followed me around in a lot of use cases and such an intuitive way to create complex/customizable graphics. Looking forward to playing around with this.

TheMagicHorsey 4y ago

This is really cool! I've been following this since you first posted on Medium about it. Unfortunately when we were making decisions about which charting library to use, you weren't very feature complete, so we went with a different package (fl_chart).

entronad 4y ago
I am glad you'v paid attention to it. Graphic did evolve a lot in the past years and is still evolving. Hope you could keep an eye on it, maybe one day it could meet your needs.

college_physics 4y ago

This is very neat. I suppose it doesnt use SVG at any level (either as internal representation of graphical elements or for the rendering) but is there some way to enable import/export to vectors? The d3/vega family of js libraries have really enriched SVG based web graphics but android has not been very SVG friendly.

entronad 4y ago
It is based on dart canvas graphical system, which makes it performs as good as native mobile (SVG is not natively supported in mobile or flutter). But the grammar of dart canvas is very like SVG. I am upgrade the graphical engine for animation. I believe any one who knows about SVG will find it very easy and familiar to use. The idea of import SVG strings/files is a good idea, I shall consider it.

kthejoker2 4y ago

Why is there still such a gap between the grammar of charting (low level) and visual vocabulary (high level)? https://ft-interactive.github.io/visual-vocabulary/ https://ft-interactive.github.io/visual-vocabulary/ Tools like Lux, Plotly, PowerBI, all seem to shy away from being way more prescriptive about thr kinds of visuals needed for a particular analysis. Everyone wants to unleash their inner data artist, but if you're looking for time series anonalies, you want a ARIMA style line chart with an uncertainty funnel and a big red dot where actuals exceed targets. Super frustrating having to map these over and over again in every new GoG library.

ano88888 4y ago
I checked out the link. The information is great but I have to wonder if the author of the website is color blind or not. The chosen combination of text color and background color is so difficult for the eyes. If they got something so obvious wrong, I can't help but question the quality of the visual vocabulary they are selling.
- kthejoker2 4y ago
  This is some rando's interactive representation of the FT visual vocabulary, which itself is just a very simple poster, but the conceptualization of analytical purpose to visualization is straightforward and fits 99% of business intelligence dashboarding use cases. https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/FT4schools_RGS.pdf https://github.com/Financial-Times/chart-doctor/blob/main/vi...