Using React-Vis for Data Visualization in React

4 min readJan 27, 2019

If you’re reading this, you’ve probably run a specific data visualization in React Google Search, been suggested this via Medium, one of my friends at Fullstack Academy or my mom (thanks, Mom).

This article is intended for beginner and intermediate web developers who are looking for an easy way to start creating data visualizations.

Why use React-Vis?

React-Vis is not an alternative to D3. It’s built using D3 and React, and it’s made for programmers who aren’t too familiar with data visualization, but want to be able to make their first chart quickly and while using React.

There’s also a second problem that might stop someone from jumping directly into D3. But, first, a quick background on D3 and React.

D3.js is the standard for creating complex data visualization on the web. The problem is that both D3 and React take control of the user’s interface.

And they both do it in different ways, React uses a virtual DOM that represents the browser’s current state and uses a “reconciliation algorithm” to understand which parts of the application need to re-render when conditions change.

D3, on the other hand, loads data and attaches it directly to the DOM. It then binds that data to the DOM and transforms those elements.

D3 is made up of 30 libraries and 22 of them don’t access or mutate the DOM. Which leaves only 8 libraries that you’re restricted on using.

So, now based on what you need to do you find work arounds and libraries to help you.

Why use React-Vis? If you’re just getting started with data visualization and you want to start building your first chart without having a deep understanding of data visualization.

D3.js is a low-level library that provides the building blocks necessary to create interactive visualizations. Low-level means that there’s only a slight abstraction from machine code and faster for the computer to process. High-level languages/libraries are much easier for humans to read. React-Vis is very easy to read and beginner-friendly.

Here are some chart types you can make using React-Vis

Scatterplot

ArcSeries

Cool, now let’s do a practical example together. We’re going to make a chart tracking stock prices of publicly-traded companies using the IEX API.

What type of chart and tools should we use from React-Vis?

We’re going to make a comparison chart that we’d normally see in Yahoo! Finance. It’s a line chart with two lines.

We’ll be using the following from React-Vis:

DiscreteColorLegend
HorizontalGridLines
VerticalGridLines
XAxis
XYPlot
YAxis
LineMarkSeries

Next up: Data Structures

We’re going to be using XYPlot for charting. XYPlot takes an array in for data and reads the data either by setting objects with key value pairs labelled x and y or using an array you’ll have to tell XYPlot which element in the nested array is X and which is Y. Final thing to keep in mind is that both x and y must numbers for this chart type.

const dataUsingObjects = [
  {x: 1, y: 10},
  {x: 2, y: 0},
  {x: 3, y: 15}
];

const dataUsingArrays = [
  [0, 5],
  [1, 7],
  [2, 12]
];

Using a reducer to get your data into proper format

Our data is going to be coming from the IEX API. And it’s going to look a little something like this:

Note here, that we have an array that is made up of objects. We’re going to need that to be an array with just an x and y that can be read.

Reducer time

const pgChartData = pgPrices.reduce((accum, val, idx) => {
  accum.push([idx, val.close])
  return accum
}, [])const nkeChartData = nkePrices.reduce((accum, val, idx) => {
  accum.push([idx, val.close])
  return accum
}, [])const finalDataSet = nkeChartData.map((val, idx) => {
  val.push(pgChartData[idx][1])
})

We’re going to return an array that is going to be more similar to dataUsingArrays from the example above. So, we’re going to use the Array.reduce method to help us turn our data that we’re getting from the IEX API to look like that. Then, you’ll notice there’s a third function using Array.map (my buddy, Joe, wrote a piece on Array methods if you’re still not 100% clear). We’re going to need that when it’s time create a line chart that measures the performance of two companies.

Scott Galloway says 2019 will be year of “Woke as a business strategy” citing moves by company like Procter & Gamble and Nike. I highly recommend subscribing to his weekly newsletter No Mercy / No Malice.

We’re going to make a chart that doesn’t mean very much because we’ll just be charting their stock performance over the last 3 months in dollar value, which doesn’t tell much of a story, but it’s a good exercise for making your first graph using React-Vis.

<DiscreteColorLegend 
  items={['Procter & Gamble - $PG', 'Nike - $NKE']}
  orientation='horizontal'
/>
<XYPlot 
  width={700} 
  height={300}
  yDomain={[60, 100]}>
    <VerticalGridLines />
    <HorizontalGridLines />
    <XAxis {...axisProps}
      tickFormat={String}
    />
   <YAxis {...axisProps} tickFormat={(d) => '$' + d}/>
{series.map((d, i) => <LineMarkSeries key={i} size={3} data={d} />)}
</XYPlot>

Now, we can render a simple chart like this:

Hopefully, this article can help you get started with React-Vis and give you something you can tinker with to speed up your learning curve.