7 ms·

Unovis: Data visualization for React, Angular, Svelte, TypeScript, JavaScript

163 points by caxtine 4y ago

caxtine 4y ago
A modular and highly customizable data visualization framework for React, Angular, Svelte, and even TypeScript or JavaScript
useEffect 4y ago
How is this better than rechart?
michidk 4y ago
Seems like simple graph plotting is not interactive
ericand 4y ago
I'm a sveltekit user and the default SSR really complicated adding a chart library. Would Unovis work with SSR? Appreciate the Svelte support!
- ernaem 4y ago
  It should work well with SvelteKit out of the box — the compiler won't complain about SRR. However no charts will be rendered in the SSR html build.
  - ngalaiko 4y ago
    why not? it seem to be svg based
- imilk 4y ago
  Until a better library comes out, I'd highly recommend using Layercake with Sveltekit. It's a wrapper around D3 which allows you to build reusable components that are responsive and can load server side without JS on the client. It's not as plug and play as some libraries, but it's not too bad, and gives you a lot more customization options: https://layercake.graphics/ https://layercake.graphics/
popcorncowboy 4y ago
If you work in React and like this approach it's hard to go past Visx - https://airbnb.io/visx https://airbnb.io/visx
- kenfehling 4y ago
  Yeah I like Visx, also recently I've been using nivo - https://nivo.rocks https://nivo.rocks
- cfontes 4y ago
  Looks great thanks for this link, any good free gantts that you recommend?
eatonphil 4y ago
The thing I've wanted is a visualization library that also comes with the UI controls for configuring graphs: picking the graph type, picking the fields, picking the labels, picking the aggregation, axis settings, etc. Almost no one is implementing libraries that do this. Everyone just keeps building "low-level" graph libraries that leave application developers to build up (in my case) crappy and inflexible configuration UIs.
- noughtme 4y ago
  my experience has been that non of these solutions provide enough control granularity, and i keep coming back to d3.js (or other libraries like deck.gl) and building my own UI.
  - taeric 4y ago
    In a similar vein, my experience is that most visualizations that people are commonly making are reaching for what is available in R. https://r-graph-gallery.com/ggplot2-package.html https://r-graph-gallery.com/ggplot2-package.html
    - jeltz 4y ago
      In my case that is 100% true. What I actually want is R but for the web. All the JS libraries are either too simple and rigid or too low level like d3.
      - esperent 4y ago
        Has anyone done any work to compile R to wasm?
      - baandang 4y ago
        You can't have it both ways. You can't have a completely open data representation and an abstraction at a higher level than d3. What you are calling too low level is basically dealing with the fact the data can be anything. What we really need is a javascript dataframe that everyone uses by default but that is not going to happen. Javascript culture is practically all about reinventing and trying to improve the wheel so we can optimally go in circles. I think there is an emergent self interest at the group level to keep things complex and salaries growing on the front end too. The complexity and absurdity is hardly a bug at the individual level if getting paid.
Traubenfuchs 4y ago
Example links are all broken... https://unovis.dev/gallery/ https://unovis.dev/gallery/
- jd3 4y ago
  looks like a path issue https://unovis.dev/gallery https://unovis.dev/gallery works, while https://unovis.dev/gallery/ https://unovis.dev/gallery/ does not you need to navigate to https://unovis.dev/ https://unovis.dev/ and then click "Gallery" for it to segue you to the former
nawgz 4y ago
No zoom/pan baked in, not interesting to me
timetraveller26 4y ago
As a Vue developer I take the lack of support personal.
- HatchedLake721 4y ago
  Cries in Ember.js
  - spankalee 4y ago
    You all should ask for web components from libraries like this!
- no_wizard 4y ago
  At least you can just encapsulate it in a custom element. Vue has good support there and allows you to "componetize" it with little overhead or development time.
arooaroo 4y ago
I immediately like this project for being “framework independent” rather than agnostic. It’s odd how computing has fashioned a completely different sense for “agnostic” despite perfectly adequate and well understood words already existing.
- eyelidlessness 4y ago
  Is your objection to “agnostic” its religious implications in other contexts? It’s a perfectly cromulent synonym for independent in this context otherwise.
tunesmith 4y ago
It's using Dagre for its layered algorithm, which has been defunct for a while hasn't it? I think elkjs is usually the preferred alternative these days.
yrgulation 4y ago
I like the effort and thats it’s freeware, but that react code looks horrible.
- taeric 4y ago
  I'm curious what is bad about it? Not in an "I don't believe you" way, but in a "I would love to know what would improve it." Starting to push to clean up some web pages I've been close to at work, finally.
  - e1g 4y ago
    Not OP, but some patterns instantly stood out - * The use of `useCallback` is confusing in the demo code and is entirely unnecessary. * Inconsistent use of single/double quotes and {}'s for literal values. * Non-idiomatic combination of JSX elements + raw HTML in strings [1] [1] e.g. https://unovis.dev/gallery/view?collection=Lines%20and%20Areas&title=Basic%20Timeline https://unovis.dev/gallery/view?collection=Lines%20and%20Are...
    - taeric 4y ago
      I assumed the was just directionally wise? That is, it is clearly useless here, as there are no "dependencies" passed; but in a real app you almost certainly have something there. Still digesting the rest. I'm curious why the mix of raw HTML. (Not in why it is a bad idea, but why it was felt necessary.)
      - e1g 4y ago
        In this specific case, having useCallback makes the demo code more complex and is unrelated to the actual concept being demo'ed to the reader. It's unwise to add unnecessary complexity if it doesn't add clarity. More generally, adding useCallback is even directionally wrong unless you know _exactly_ why you need it ("for identity" is OK, "for performance" is almost always misguided because the cost of creating a closure is negligible).
orangehacker2 4y ago
I wish it had accessibility features like graphs on this dashboard: https://blog.cloudflare.com/project-a11y/ https://blog.cloudflare.com/project-a11y/
whoevercares 4y ago
I’ve heard Vega/Vega-lite is years ahead of other options, mostly because its expression power which is deeply rooted from years of research and success in industry (Trifacta/UW). Curious if anyone can share a more through analysis or opinions
- jhoechtl 4y ago
  you can use it from within Power BI
- V1ndaar 4y ago
  I would argue the reason it's powerful is that Vega embraces the Grammar of Graphics as first principles (think ggplot2). It's imo the way to think about graphics, but I may be biased.
btbuildem 4y ago
Data viz used to be my playground, I feel like I can comment on this with some confidence. It feels like the selling point / value prop here is that it supports multiple FE frameworks, but that's where its strengths end for me. It almost looks like a coding exercise more than a library that people would use - seems a great amount of effort went into boilerplate, configs, packaging, documentation etc, but not as much into the features themselves. The tell-tale brushes in some of the interactive graphs hint at d3 as the foundation layer, and poking through the configs confirms that. The real power of d3 lies in how it integrates data with the rendered elements - transitions, filters, being able to use one set of graphs to drive the parameters of another set, etc. With d3, you get interactivity for very very cheap, it's a missed opportunity here not to extend that (most graphs in the gallery seem static). Overall there is nothing that makes this stand out over other offerings. Other commenters provided some good examples. I'd mention Altair/Vega as an example of powerful / configurable library that can be driven from either FE or BE. D3 as the gold standard of a low-level visualization primitives library with unsurpassed flexibility. If you're after something more out of the box with a DS angle, Dash does a decent job (and plotly.js for an overwhelming viz feature set). For commercial solutions, HighCharts, as much of a drag as it can be, is still the reliable beige khaki offering. CanvasJS would be another one in that space. If you want to dabble in 3D visualization, three.js is by far both the best starting place and the most robust library you can ask for. Honorable mention for dc.js, as they make good use of the crossfilter approach (driving context/selection across multiple graphs) The js data viz space is quite full, with some heavy-duty, established players. To be a new entrant on this playing field, you'd have to bring something breakthrough to the table. Sorry.
- mbo 4y ago
  You've cited D3 but I notice that you haven't mentioned Observable's Plot[0], a Javascript GoG that wraps D3. They're both Mike Bostock libraries, so Plot is the pseudo-"blessed" D3 high-level abstraction layer. [0] https://observablehq.com/@observablehq/plot https://observablehq.com/@observablehq/plot
  - btbuildem 4y ago
    I'm not up to speed on the latest -- thanks for linking this, it looks great! I've shied away from Observable, I didn't quite like the lock-in to their notepad-like env, and all the examples following what to me felt like a backward style. It's great to see they've produced a higher-level complement to d3.
heresjohnny 4y ago
Looks interesting! I’ve been looking for a simple bar/line chart component that doesn’t add megatons of size to my build. How much would this add – ballpark estimate?

163 points by caxtine 4y ago

A modular and highly customizable data visualization framework for React, Angular, Svelte, and even TypeScript or JavaScript

useEffect 4y ago

How is this better than rechart?

michidk 4y ago

Seems like simple graph plotting is not interactive

ericand 4y ago

I'm a sveltekit user and the default SSR really complicated adding a chart library. Would Unovis work with SSR? Appreciate the Svelte support!

ernaem 4y ago
It should work well with SvelteKit out of the box — the compiler won't complain about SRR. However no charts will be rendered in the SSR html build.
- ngalaiko 4y ago
  why not? it seem to be svg based
imilk 4y ago
Until a better library comes out, I'd highly recommend using Layercake with Sveltekit. It's a wrapper around D3 which allows you to build reusable components that are responsive and can load server side without JS on the client. It's not as plug and play as some libraries, but it's not too bad, and gives you a lot more customization options: https://layercake.graphics/ https://layercake.graphics/

popcorncowboy 4y ago

If you work in React and like this approach it's hard to go past Visx - https://airbnb.io/visx https://airbnb.io/visx

kenfehling 4y ago
Yeah I like Visx, also recently I've been using nivo - https://nivo.rocks https://nivo.rocks
cfontes 4y ago
Looks great thanks for this link, any good free gantts that you recommend?

eatonphil 4y ago

The thing I've wanted is a visualization library that also comes with the UI controls for configuring graphs: picking the graph type, picking the fields, picking the labels, picking the aggregation, axis settings, etc. Almost no one is implementing libraries that do this. Everyone just keeps building "low-level" graph libraries that leave application developers to build up (in my case) crappy and inflexible configuration UIs.

noughtme 4y ago
my experience has been that non of these solutions provide enough control granularity, and i keep coming back to d3.js (or other libraries like deck.gl) and building my own UI.
- taeric 4y ago
  In a similar vein, my experience is that most visualizations that people are commonly making are reaching for what is available in R. https://r-graph-gallery.com/ggplot2-package.html https://r-graph-gallery.com/ggplot2-package.html
  - jeltz 4y ago
    In my case that is 100% true. What I actually want is R but for the web. All the JS libraries are either too simple and rigid or too low level like d3.
    - esperent 4y ago
      Has anyone done any work to compile R to wasm?
    - baandang 4y ago
      You can't have it both ways. You can't have a completely open data representation and an abstraction at a higher level than d3. What you are calling too low level is basically dealing with the fact the data can be anything. What we really need is a javascript dataframe that everyone uses by default but that is not going to happen. Javascript culture is practically all about reinventing and trying to improve the wheel so we can optimally go in circles. I think there is an emergent self interest at the group level to keep things complex and salaries growing on the front end too. The complexity and absurdity is hardly a bug at the individual level if getting paid.

Traubenfuchs 4y ago

Example links are all broken... https://unovis.dev/gallery/ https://unovis.dev/gallery/

jd3 4y ago
looks like a path issue https://unovis.dev/gallery https://unovis.dev/gallery works, while https://unovis.dev/gallery/ https://unovis.dev/gallery/ does not you need to navigate to https://unovis.dev/ https://unovis.dev/ and then click "Gallery" for it to segue you to the former

nawgz 4y ago

No zoom/pan baked in, not interesting to me

timetraveller26 4y ago

As a Vue developer I take the lack of support personal.

HatchedLake721 4y ago
Cries in Ember.js
- spankalee 4y ago
  You all should ask for web components from libraries like this!
no_wizard 4y ago
At least you can just encapsulate it in a custom element. Vue has good support there and allows you to "componetize" it with little overhead or development time.

arooaroo 4y ago

I immediately like this project for being “framework independent” rather than agnostic. It’s odd how computing has fashioned a completely different sense for “agnostic” despite perfectly adequate and well understood words already existing.

eyelidlessness 4y ago
Is your objection to “agnostic” its religious implications in other contexts? It’s a perfectly cromulent synonym for independent in this context otherwise.

tunesmith 4y ago

It's using Dagre for its layered algorithm, which has been defunct for a while hasn't it? I think elkjs is usually the preferred alternative these days.

yrgulation 4y ago

I like the effort and thats it’s freeware, but that react code looks horrible.

taeric 4y ago
I'm curious what is bad about it? Not in an "I don't believe you" way, but in a "I would love to know what would improve it." Starting to push to clean up some web pages I've been close to at work, finally.
- e1g 4y ago
  Not OP, but some patterns instantly stood out - * The use of `useCallback` is confusing in the demo code and is entirely unnecessary. * Inconsistent use of single/double quotes and {}'s for literal values. * Non-idiomatic combination of JSX elements + raw HTML in strings [1] [1] e.g. https://unovis.dev/gallery/view?collection=Lines%20and%20Areas&title=Basic%20Timeline https://unovis.dev/gallery/view?collection=Lines%20and%20Are...
  - taeric 4y ago
    I assumed the was just directionally wise? That is, it is clearly useless here, as there are no "dependencies" passed; but in a real app you almost certainly have something there. Still digesting the rest. I'm curious why the mix of raw HTML. (Not in why it is a bad idea, but why it was felt necessary.)
    - e1g 4y ago
      In this specific case, having useCallback makes the demo code more complex and is unrelated to the actual concept being demo'ed to the reader. It's unwise to add unnecessary complexity if it doesn't add clarity. More generally, adding useCallback is even directionally wrong unless you know _exactly_ why you need it ("for identity" is OK, "for performance" is almost always misguided because the cost of creating a closure is negligible).

orangehacker2 4y ago

I wish it had accessibility features like graphs on this dashboard: https://blog.cloudflare.com/project-a11y/ https://blog.cloudflare.com/project-a11y/

whoevercares 4y ago

I’ve heard Vega/Vega-lite is years ahead of other options, mostly because its expression power which is deeply rooted from years of research and success in industry (Trifacta/UW). Curious if anyone can share a more through analysis or opinions

jhoechtl 4y ago
you can use it from within Power BI
V1ndaar 4y ago
I would argue the reason it's powerful is that Vega embraces the Grammar of Graphics as first principles (think ggplot2). It's imo the way to think about graphics, but I may be biased.

btbuildem 4y ago

Data viz used to be my playground, I feel like I can comment on this with some confidence. It feels like the selling point / value prop here is that it supports multiple FE frameworks, but that's where its strengths end for me. It almost looks like a coding exercise more than a library that people would use - seems a great amount of effort went into boilerplate, configs, packaging, documentation etc, but not as much into the features themselves. The tell-tale brushes in some of the interactive graphs hint at d3 as the foundation layer, and poking through the configs confirms that. The real power of d3 lies in how it integrates data with the rendered elements - transitions, filters, being able to use one set of graphs to drive the parameters of another set, etc. With d3, you get interactivity for very very cheap, it's a missed opportunity here not to extend that (most graphs in the gallery seem static). Overall there is nothing that makes this stand out over other offerings. Other commenters provided some good examples. I'd mention Altair/Vega as an example of powerful / configurable library that can be driven from either FE or BE. D3 as the gold standard of a low-level visualization primitives library with unsurpassed flexibility. If you're after something more out of the box with a DS angle, Dash does a decent job (and plotly.js for an overwhelming viz feature set). For commercial solutions, HighCharts, as much of a drag as it can be, is still the reliable beige khaki offering. CanvasJS would be another one in that space. If you want to dabble in 3D visualization, three.js is by far both the best starting place and the most robust library you can ask for. Honorable mention for dc.js, as they make good use of the crossfilter approach (driving context/selection across multiple graphs) The js data viz space is quite full, with some heavy-duty, established players. To be a new entrant on this playing field, you'd have to bring something breakthrough to the table. Sorry.

mbo 4y ago
You've cited D3 but I notice that you haven't mentioned Observable's Plot[0], a Javascript GoG that wraps D3. They're both Mike Bostock libraries, so Plot is the pseudo-"blessed" D3 high-level abstraction layer. [0] https://observablehq.com/@observablehq/plot https://observablehq.com/@observablehq/plot
- btbuildem 4y ago
  I'm not up to speed on the latest -- thanks for linking this, it looks great! I've shied away from Observable, I didn't quite like the lock-in to their notepad-like env, and all the examples following what to me felt like a backward style. It's great to see they've produced a higher-level complement to d3.

heresjohnny 4y ago

Looks interesting! I’ve been looking for a simple bar/line chart component that doesn’t add megatons of size to my build. How much would this add – ballpark estimate?