Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Show HN: Graphic – A grammar of data visualization and Flutter charting library (github.com/entronad)
91 points by entronad on Feb 22, 2023 | hide | past | favorite | 12 comments
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.



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


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 .


Also, Vega [0] and Vega Lite [1]

[0] https://vega.github.io/vega/ [1] https://vega.github.io/vega-lite/


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/

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.


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.


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/vi...


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.


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.


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.


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


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.


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: