Show HN: Victory – ReactJS library for building interactive data visualizations | Hacker News Reader

Show HN: Victory – ReactJS library for building interactive data visualizations

github.com

220 pointsthekenwheeler29 comments

The size of the React and Victory libraries in the demo is close to 800 KB. How can this be reduced? For instance, it took ~12 seconds to render the chart with network and CPU throttling.

Well, you could always take the Forbes approach and show a ten-second fullscreen ad. Then you've only got two seconds to cover for. :P

Oh, you mean their <fuck-visitors> custom element? Yeah, I’ve considered that.

I never could find a name for that, thank you for fixing that problem.

Would having them compressed not work?`

No, because there’s a limit on the amount of JavaScript code that low-end devices can process before the user experiences significant delays, and that limit is pretty low. Most of us westerners don’t own these low-end devices, so it’s not easy to test.

This looks pretty slick. Awesome to see that FiveThirtyEight is using it, too (http://formidable.com/open-source/victory/about/#showcase). I've always wrestled with D3 when doing charting, so I'll have to give this a try.

Formidible Labs is one a great shop with great engineers. Awesome seeing their work on HN.

I replaced ChartJS with Victory on a recent project for charting investment performance, and was generally very pleased with the experience.

The focus on composable components fits well with the React way of working, and enables easy customisation (which was one of the main reasons for moving away from ChartJS) - you can even directly add SVG elements inside your Victory chart components if you want custom graphical elements.

Another interesting result of the switch was that the rendering quality of the vector (SVG) charts rendered by Victory was a lot nicer than the raster (Canvas) ones rendered by ChartJS, and it particularly fared much better at rendering smooth interpolation curves for a chart with a fairly large amount of data which looked "bumpy" with ChartJS.

Overall I'd highly recommend giving Victory a go if you need charts which aren't too specialised but do require some customisation. It seems like some of the paid-for solutions such as Highcharts are probably still the best option if you require something more niche.

D3 plays really nicely with React already. I'll try this out, but not sure if I'd switch.

For basic charting I'd have to agree with you. D3 has some awesome utility functions (scales, SVG path generation, the entire geo side of things... ) but their method of binding to the DOM was always hard for folks to wrap their mind around. So replacing the confusing part with React/JSX has made a lot of visualization code MUCH cleaner.

Doing animations gets a little harder and I still haven't found a really nice way to do it. If anyone has any good suggestions I'm looking. I've done some stuff with React Motion but it was much harder than the equivalent d3.transition call.

Your comment perfectly matches my own experience. Animating charts is hard, however, data-binding is much simpler with JSX.

http://cx.codaxy.com/v/master/docs/charts/legend

This. I've been telling people that as soon as animations get improved in React, I'm switching the drawing layer over to React!

For me, the problem with D3 is how low level it is. It gives you the underlying structure and calculations to do visualization, and that means you can do incredible things with it, but it's a long process. I felt like I was building things from first principles.

There are solutions like NVD3,c3js, rickshaw that are higher level than d3js.

I've always thought about D3 as 'jQuery for SVG'.

I like the minimalism of the demo charts.

Most charting frameworks tend to have default configurations which demonstrate more features than necessary as an advertisement of their competence for potential users, who are likely to copy default configuration and also take demo charts as cues on what charts should look like. It isn't the only dynamic which causes charts to tend to have superfluous or untuned features but it has some effect.

the documentation isn't very beginner friendly, I found recharts much easier to get started with

I tried it. The documentation is not helpful at all. I couldn't manage to create a simple chart with basic features.

You should let them know specifically what problems you ran into! I'm sure they'd be willing to improve their documentation, they just need to be given constructive criticism :)

I've used Victory and didn't run into any issues, but then my usecase was very similar to their examples.

I found Victory really interesting, but:

"This project is in alpha release. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!

SEMVER Minor version bumps should be considered breaking changes until we hit v1.0.0. Patches can be considered safe."

Current version is v0.14.0.

Can you clarify what the issue is? That's how semver works and how most substantial software projects start – with an unstable API.

We take the idea of a beta release super seriously, and so we want to make sure Victory is rock solid before we put the beta label on it. That said, Victory is already being used in production apps.

awesome. gonna give this a whirl tonight!

well done

This is not cross framework compatible because of react. Unfortunately I can't use it :( Will stick to c3js.

I'm not sure I understand this comment. The title says "ReactJS" library. Do you mean it isn't compatible with React Native? Or did you really expect it to be compatible with Angular and other libraries?

There is a React Native version of Victory that reuses a lot of the same code base with different render targets (react-native-svg components). The api is identical. Check it out: https://github.com/FormidableLabs/victory-native

There are more and more components that are compatible with React, angular and Polymer.

Vaadin components come to mind.

Reply on news.ycombinator.com