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

[SimeVidas]

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.

[jeeeeefff]

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

[ludamad]

Would having them compressed not work?`

[donjh]

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.

[benbayard]

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

[tomduncalf]

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.

[nathancahill]

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

[schreiaj]

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.

[msane]

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.

[findjashua]

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

[fiatjaf]

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

[joshwcomeau]

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.

[caspg]

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.

[exogen]

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

[Boygirl]

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.

[toddmatthews]

awesome. gonna give this a whirl tonight!

[gabrielcsapo]

well done

[ergo14]

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

[pedalpete]

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?