JavaScript tutorial: Easy data visualizations with React-vis

The library of React components from Uber makes creating charts and other simple visualizations a snap

JavaScript tutorial: Easy data visualizations with React-vis

Data visualization is an important part of telling stories, but you can get lost in the weeds with D3.js for hours just to make a few simple charts. If charts are all you need, there are plenty of libraries that wrap D3 and provide you with convenient ways to build simple visualizations. This week, we’ll start to look at React-vis, a charting library that Uber created and open-sourced.

React and d3.js have an interesting relationship. React is all about declarative rendering of components and D3.js is all about imperatively manipulating DOM elements. Using them together is possible using refs, but it’s much nicer to encapsulate all of the manipulation code in a separate component so you don’t have to switch contexts as much. Luckily, the React-vis library already does that for us with a bunch of composable components we can use to build our visualizations.

The best way to test out data visualization libraries, or any library really, is by building something with it. Let’s do that, using the City of New York’s Popular Baby Names data set.

Preparing the data for React-vis

To start, I’ve bootstrapped a React project with create-react-app and added a few dependencies: react-vis, d3-fetch to help pull in the CSV data, and moment to help with date formatting. I also put together a bit of boilerplate code to pull in and parse the CSV that includes the popular names using d3-fetch. In JSON format, the data set we’re pulling in has about 11,000 rows and each entry looks like this:

  "Year of Birth": "2016",
  "Gender": "FEMALE",
  "Child's First Name": "Olivia",
  "Count": "172",
  "Rank": "1"

To continue reading this article register now

How to choose a low-code development platform