Data visualization is a vital a part of telling tales, however you may get misplaced within the weeds with D3.js for hours simply to make a number of easy charts. If charts are all you want, there are many libraries that wrap D3 and give you handy methods to construct easy visualizations. This week, we’ll begin to have a look at React-vis, a charting library that Uber created and open-sourced.
React and d3.js have an attention-grabbing relationship. React is all about declarative rendering of elements and D3.js is all about imperatively manipulating DOM components. Using them collectively is feasible utilizing refs, however it’s a lot nicer to encapsulate the entire manipulation code in a separate part so that you don’t have to change contexts as a lot. Luckily, the React-vis library already does that for us with a bunch of composable elements we are able to use to construct our visualizations.
The greatest solution to check out knowledge visualization libraries, or any library actually, is by constructing one thing with it. Let’s try this, utilizing the City of New York’s Popular Baby Names knowledge set.
Preparing the information for React-vis
To begin, I’ve bootstrapped a React mission with create-react-app and added a number of dependencies: react-vis, d3-fetch to assist pull within the CSV knowledge, and second to assist with date formatting. I additionally put collectively a little bit of boilerplate code to tug in and parse the CSV that features the favored names utilizing d3-fetch. In JSON format, the information set we’re pulling in has about 11,000 rows and every entry seems to be like this:
{
"Year of Birth": "2016",
"Gender": "FEMALE",
"Ethnicity": "ASIAN AND PACIFIC ISLANDER",
"Child's First Name": "Olivia",
"Count": "172",
"Rank": "1"
}
