Victory – Modular data visualisation components using React

This June, myself alongside others from the Which? Digital team had the chance to attend ReactEurope 2016 in Paris. Two years strong, the conference invites members of the React community from across Europe to meet up, share knowledge, engage in workshops and listen to talks from a wide range of industry professionals. One of the stand out talks for me was on a data visualisation library called Victory by Formidable

If you’ve ever needed to work on a data visualisation project you have most likely used d3. d3 is an excellent library and many developers “goto” for such projects, however, when working with both d3 and React you can find yourself facing issues. The problem; React and d3 were not designed to work together, they have incompatible DOM models and methods for handling data and managing state. This means making them work together can be problematic.

In an effort to solve this issue, Formidable have created a library which utilises React, d3’s excellent math engine and also Radium; another library from Formidable, used to manage inline styles on React components.

Victory is an ecosystem of composable, modular React components for building interactive data visualisations. The team behind Victory have aimed to keep the library friendly, with a gentle learning curve and useful defaults, so you can get started quickly without having to configure basic settings. Flexibility is also a key attribute, developers are given full control of the svg allowing them to modify the charts in any way they see fit.

Getting started is as simple as importing Victory and rendering a component

import React from 'React';
import { VictoryPie } from 'victory';

class App extends React.Component {
  render () {
    return (
      <VictoryPie />;
    );
  }
}

 

That’s all it takes to render a pie chart, even without any configuration we already have some nice default settings in place, such as colours and label styles, and even some dummy data, all of which can be overridden. In order to override these settings we simply pass them in via props. So let’s override some of these by adding some custom data and some styles.

<VictoryPie
 style={{
   labels: {
     fill: "black",
     fontSize: 12,
     padding:200
   }
 }}
 data={[
   {x: "BT", y: 37},
   {x: "Virgin Media", y: 13},
   {x: "Others", y: 50}
 ]}
 endAngle={90}
 startAngle={-90}
 colorScale={[
   "#FFAF59 ",
   "#E28300 ",
   "#F6A57F "
 ]} />

In the example above, we are using the style prop and changing the style of the labels, and adding some custom data via an array of objects, where in the case of VictoryPie, the ‘x’ value relates to the label and the ‘y’ value is the corresponding number value represented by the slice.

We are also changing the start and end angles as well as the colours available in the chart by passing an array of values to the colourScale prop.

Having such a simple API makes it easy for teams to collaborate, designers when prototyping, can manipulate the props of data visualisations at the top level and then share these components with the development team, who can then work on the integration.

As mentioned previously, when designing Victory the team placed heavy emphasis on composability and flexibility. An example of the composable nature of Victory can be seen below. It is possible to compose components of different types and render them on the same chart, simply by nesting child components in a way that is familiar to anyone who has used React.

<VictoryChart height={450}>
 <VictoryScatter
   style={{data: {fill: "purple"}}}
   symbol="square"
   size={5}
   data={[
     {x:-4, y: -4},
     {x: 4, y: 2, fill: "red"},
     {x: 1.8, y: 3}
   ]}/>
 <VictoryLine
   y={(data) => data.x}/>
 <VictoryBar
   style={{data: {fill: "orange"}}}
   data={[
     {x: 2, y: -3},
     {x: -3, y: 4},
     {x: 1, y: 3}
   ]}/>
</VictoryChart>

The below is a simple example showing the flexibility of a component, by simply adding a `horizontal` attribute to the code below we can go from rendering a vertical bar chart to a horizontal one. Not only that, but we also see the chart changing based on its data, displaying different coloured bars depending on the value of the “y” property.

<VictoryBar
 horizontal
 labels={["BT", "Virgin Media", "Others"]}
 height={300}
 padding={75}
 style={{
   data: {
     width: 30,
     fill: (data) => data.y > 30 ?
       "gold" : "tomato"
   }
 }}
 data={[
   {x: 1, y: 37},
   {x: 2, y: 13},
   {x: 3, y: 50}
 ]}
/>

Is Victory a replacement for d3? Well that depends on your needs. Whereas d3 can (with a little patience) handle a multitude of data visualisations, Victory is quite specific in its aims, giving you a handful of components which will handle most use cases, coupled with an intuitive and flexible api which is both easy to use and simple to tweak.

Currently Victory is in alpha release, in time Formidable will be adding to the library of existing components and I’m excited to see what improvements will be made.

I’ve barely managed to touch the surface of what is possible using Victory, there are many more components available, all of which can be combined and even animated, allowing for a great deal of flexibility and expressiveness when visualising data. If you’d like to learn more, checkout their interactive docs, also checkout the video below, for a nice over view of Victory and what the team set out to achieve in its creation.