
Show HN: Victory – ReactJS library for building interactive data visualizations - thekenwheeler
https://github.com/FormidableLabs/victory
======
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

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

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

------
donjh
This looks pretty slick. Awesome to see that FiveThirtyEight is using it, too
([http://formidable.com/open-
source/victory/about/#showcase](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.

~~~
Brakenshire
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.

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

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

------
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?

~~~
Boygirl
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](https://github.com/FormidableLabs/victory-native)

