Data visualization using React and Tremor - With Sample

Read Time:6 Minute, 38 Second

Hello Coders!

Coding dashboards and data visualization layers might be a tedious activity for React developers (and not only). In order to simplify this task and focus more on the application logic and data processing, Tremor Library comes to the rescue. This article is an introduction to this open-source library using a coding-sample approach. During the article, we will code together a sample that uses GitHub API as a source of information and Tremor Charts for the presentation layer.

Thank You!


Copyright Note: Project adapted for React & Tremor from Svelte Version crafted by Robert Soriano.

In the end, the product is able to accept any GitHub (valid) Username as input, pull the data from GitHub public API, and render a few charts as shown below:


In order to understand better the options we have using Tremor, let’s take look at this free product crafted by TremorLabs.


Tremor is an open-source UI component library that enables React developers to create dashboards with speed. Its components are beautifully styled to provide a fully interactive user interface and a great user experience.

Developed by data scientists and software engineers with an eye for design and aesthetics, Tremor is loved by React developers worldwide.

In this tutorial, I’ll walk you through how to add Tremor and visualize data with Tremor in a React application. Before then, let’s learn why you should use Tremor.

React & Tremor Charts - Tremor Cover


Why should you use Tremor?

✅ Beautifully styled UI components
Tremor provides various UI components which have been beautifully designed to enable you to build multiple UI layouts within a few minutes. It is built on top of the popular Tailwind CSS library to provide fully responsive and easily customizable UI components. With Tremor, you don’t need to worry about aesthetics and responsiveness; the UI components have been professionally designed to respond to different screen sizes.

✅ Fast and easiest data visualization library

Tremor is a fast and easy data visualization library for React developers. Within a few minutes of going through the documentation, you can create stunning dashboards and UI components with Tremor.

To create charts with Tremor, you just need to feed your data into the chart component, state your x and y-axes, and Tremor takes care of the rest.

✅ Excellent documentation

Another reason why Tremor stands out is its documentation. Tremor has excellent documentation that is easy to use and navigate with detailed code samples.

The documentation describes each UI component, how to use them, and the various props required by the UI component; thus making it easy for new and existing users to explore and use the components easily.

✅ Open-source

Tremor is constantly growing to provide more UI components such as charts, input, and other layout elements. It has a community of developers, data scientists, and talented contributors constantly maintaining and improving the library. As a developer or user, you are more than welcome to contribute to the growth of the library.


✨ Getting Started

A good way to fully understand concepts is to code something from scratch without reusing boilerplates or pre-coded layers. Just to follow up on this principle, our sample will be created via create-react-app and all configurations are manually done. Let’s go!

👉 Create React codebase and integrate Tremor

Enter fullscreen mode Exit fullscreen mode

Copy the code below to install Tremor.

Enter fullscreen mode Exit fullscreen mode

Import the Tremor stylesheet into your App.js file as done below:

Enter fullscreen mode Exit fullscreen mode

Once you’ve completed the steps above, you can start using Tremor. In the upcoming sections, I’ll guide you through building a GitHub application that analyses and visualizes users’ data via Tremor. The UI contains three pages: HOMEpage (expects input), charts page, and a simple error page.

React & Tremor Charts - HOMEpage


React & Tremor Charts - Charts


React & Tremor Charts - Error Page


Navigate into the client/src folder and create a components folder containing the Home.js, UserProfile.js, and GitHubError.js components.

The Home component is the application’s homepage containing an input field that accepts the username from the user, the UserProfile component displays the user information, and the GitHubError component represents the error page.

Enter fullscreen mode Exit fullscreen mode

Install React Router – a JavaScript library that enables us to navigate between pages in a React application and React Icons.

Enter fullscreen mode Exit fullscreen mode

Copy the CSS styling for the application here.

Copy the code below into the App.js file. The code snippet below uses React Router for navigating between the web pages.

Enter fullscreen mode Exit fullscreen mode

👉 The Home Component

Update the Home.js file to render an input field that accepts the users’ GitHub username.

Enter fullscreen mode Exit fullscreen mode

React & Tremor Charts - Input Component


👉 The GitHubError Component

This component is displayed when the username provided by the user does not exist on GitHub.

Enter fullscreen mode Exit fullscreen mode

React & Tremor Charts - Error Component


👉 The UserProfile component

The user’s GitHub details are displayed within this component. Copy the code below into the UserProfile.js file:

Enter fullscreen mode Exit fullscreen mode

In case the API call returns an error, this case is managed by this code snippet:

Enter fullscreen mode Exit fullscreen mode

From the code snippet, I imported three components – the Header, Charts, and Section components. Create the sub-components by running the code below:

Enter fullscreen mode Exit fullscreen mode

👉 Coding the Header component

Enter fullscreen mode Exit fullscreen mode

The Header component also contains a Bio component, create the component and copy the code below into the Bio.js file.

Enter fullscreen mode Exit fullscreen mode

From the code snippet above, we imported a splitDate function from a utils folder. Create a requests.js file within the utils folder and copy the code below into the file. It converts the date retrieved from GitHub to a readable format.

React & Tremor Charts - Profile Header for Facebook


👉 Coding the INFO Component

In this section, we’ll display the user’s top nine repositories, as shown in the image below:

React & Tremor Charts - Information Component

Within the utils folder, create a langColors.js file – containing an object containing different color tags for various programming languages.

Enter fullscreen mode Exit fullscreen mode

The code snippet above fetches the user’s GitHub repositories, sorts the result according to the number of stars, and returns the top nine.

Import the fetchRepos function into the UserProfile.js file and display the list of repositories.

Enter fullscreen mode Exit fullscreen mode

👉 Visualizing data with the Tremor UI library

Here, I will walk you through visualizing data with the Tremor library. We’ll display the top languages used by the user, the most starred languages, and the stars per language.

React & Tremor Charts - Tremor Charts

Update the requests.js file to contain the following functions that fetch the top languages, most starred languages, and the stars per language.

The information is pulled via 4 helpers (code not shown) that provide the information to be used by Charts.

Enter fullscreen mode Exit fullscreen mode

In order to use the helper, we need to update UserProfile.js:

Enter fullscreen mode Exit fullscreen mode

To visualize the data as done in the image above, update the Charts.js file to contain the code below:

Enter fullscreen mode Exit fullscreen mode

According to the code snippet, I imported two types of charts provided by Tremor and passed the data into the UI components.


✨ Conclusion

So far, you’ve learned how to use Tremor, the various features provided by Tremor, and how to visualize data via the Tremor library.

This tutorial walks you through a demo of what you can build with the Tremor UI library and GitHub API. Feel free to explore Tremor’s documentation, contribute and join its community of developers.

If you are looking for a React library that can help you visualize data with ease and as fast as possible, Tremor is an excellent choice. Thanks for reading!

Source: https://dev.to/sm0ke/data-visualization-using-react-and-tremor-with-sample-546a

WP Ad Inserter plugin for WordPress