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

by caxtine • 4 years ago

163 53 4 years ago

caxtine• 4 years ago

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

useEffect• 4 years ago

How is this better than rechart?

michidk• 4 years ago

Seems like simple graph plotting is not interactive

popcorncowboy• 4 years ago

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

kenfehling• 4 years ago

Yeah I like Visx, also recently I've been using nivo - https://nivo.rocks

cfontes• 4 years ago

Looks great thanks for this link, any good free gantts that you recommend?

ericand• 4 years 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• 4 years 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• 4 years ago

why not? it seem to be svg based

imilk• 4 years 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/

eatonphil• 4 years 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• 4 years 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.

taeric5• 4 years 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

go_prodev• 4 years ago

Yes, same here. I'd love an open source Power BI alternative.

krebby• 4 years ago

Check out Apache Superset: https://superset.apache.org/

Originally from Airbnb. Very powerful and flexible OS frontend BI tool

texodus• 4 years ago

Ever try Perspective? https://github.com/finos/perspective

knutwannheden• 4 years ago

My personal favorites are Altair (Python/VegaLite) and Observable Plot. The latter just released a new version with GeoJSON support.

btbuildem3• 4 years ago

You don't want a visualization library, you want a full-featured BI toolset.

What OP posted isn't "low level", I'd describe it as low-feature, intermediate-level visualization library.

sails• 4 years ago

Cube has a nice set of React based examples, which helped highlight some of the better options along your thinking:

Dashboard - https://highcharts-demo.cube.dev/#/

Pivot - https://react-pivot-table-demo.cube.dev/#/

Query builder - https://react-dashboard-demo.cube.dev/#/explore

I personally would avoid BI in the stricter definition (Superset, PowerBI, Metabase etc) unless you are building internal tools, as they have significant baggage catering for their designed use case.

Traubenfuchs• 4 years ago

Example links are all broken...

https://unovis.dev/gallery/

jd3• 4 years ago

looks like a path issue

https://unovis.dev/gallery works, while

https://unovis.dev/gallery/ does not

you need to navigate to https://unovis.dev/ and then click "Gallery" for it to segue you to the former

nawgz• 4 years ago

No zoom/pan baked in, not interesting to me

timetraveller26• 4 years ago

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

HatchedLake721• 4 years ago

Cries in Ember.js

spankalee• 4 years ago

You all should ask for web components from libraries like this!

no_wizard• 4 years 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• 4 years 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.

eyelidlessness2• 4 years 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• 4 years 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• 4 years ago

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

taeric5• 4 years 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.

e1g2• 4 years 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%20Are...

orangehacker2• 4 years ago

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

whoevercares• 4 years 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• 4 years ago

you can use it from within Power BI

V1ndaar• 4 years 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.

btbuildem3• 4 years 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.

mbo2• 4 years 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

btbuildem3• 4 years 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.

porker• 4 years ago

Thanks for the great summary. It's been years since I was in this field so very helpful to hear what's now available.

What would you use to plot (or downsample and plot) data that updates every second or more frequently? E.g. IoT data streaming in?

I used dygraphs (I think) a decade ago and recently found Lightning JS and this comparison [1] to other libraries, but the LightningJS license costs are prohibitive outside of well-to-do project domains. And I don't have data that updates that fast - just don't want it badly sampled or drawn.

1. https://github.com/Arction/javascript-charts-performance-com...

baandang3• 4 years ago

We really just need generative prompts and AI to decimate the field of dataviz.

99.999% of anything ever done in D3 is 100% useless visualization. The whole field of dataviz is largely much ado about nothing.

I just can't imagine in the next 10 years we don't see a generative prompt that spits out something with D3 and we can move on to something more useful. The end goal is easily described in natural language. We shouldn't need Oppenheimer as the project manager to make some SVG boxes and lines.

heresjohnny• 4 years 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?

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

Related Stories