Building and Rendering charts with Nivo in React

0
32
Building and Rendering charts with Nivo in React


Data visualization is an essential tool when building web applications as it seeks to grab viewers’ interest and keep their eyes on the message. This is one of the things developers endeavor to develop and use in their web applications. This tutorial will discuss Nivo as a solution to data visualization in React applications by building charts and knowing how to implement them in your React application. Nivo is open source with more than 9.1k stars on Github.

What is Nivo

According to its official documentation,

Nivo provides supercharged React components to easily build Dataviz apps; it’s built on top of d3. Several libraries already exist for React d3 integration, but only a few provide server-side rendering ability and fully declarative charts.

Nivo is a robust and well-documented data visualization library built with d3. It is a package that leverages d3 to make beautiful, responsive data visualizations in React applications. It has helpful documentation, interactive widgets, and lots of examples of how to solve complex problems.

Concept of Nivo

Nivo aims to provide beautiful and eye-catching graphs and charts that are easy to use and incorporate into your next react application. Its server rendering ability is top-notch, and it’s a solution to your data visualization needs.

Problems with using D3 in React

D3 is one of the top libraries for creating, manipulating, and visualizing data. There are still some problems associated with using it, and one of them is that it has a steep learning curve and requires learning many concepts about D3. It may take days to learn how to create a chart instead of being easy to use.

Another issue is that React and D3 both manipulate the DOM, and it is advisable (when using React) to not mess around with the DOM. So when using D3 in React and you change or influence its DOM manipulating function, you are changing the real DOM, which means that you are sacrificing most of what React has to offer in terms of efficiency and performance.

Yet another issue is that you will be importing quite a large bundle size when using D3, which negatively impacts page load. When building with D3, you tend to write lots of code for rendering a basic line chart. If you want to build something like a stream or calendar chart, it becomes bulky, making the code more complex and challenging to maintain and debug.

Why use Nivo instead of other data visualization libraries

Nivo has a dedicated interactive documentation site and includes lots of examples. It also customizes attributes and shows a live simulation of each chart directly in the site’s UI.

Nivo also has a code splitting feature. It is put into smaller packages that allow individual charts component loading instead of parsing through the entire library, which ultimately results in a better performance.

Nivo also gives you different options for server-side rendering. If you have lots of data, you can render it in isomorphic rendering, and there is also the option of rendering in canvas or SVGs.

Installing Nivo

Before we install Nivo in our application, we will create a new React application using the command below:

1npx create-react-app Nivo-app

Next, we will install Nivo into our React application using the yarn package manager in the code block below:

1yarn add @nivo/core

The code above will only install the core package without the entire library component. As we said earlier, Nivo has code-splitting features that allow for the movement of small packages instead of the whole library, which means that we can add a specific package when we need to use a particular component.

Let’s go ahead and add the first Nivo component to our application.

Building Stream Chart with Nivo

Stream charts are ideal for displaying high-volume datasets to discover trends and patterns over time across a wide range of categories. To build a stream chart with Nivo in our React application, we first install the stream package from Nivo to enable us to build our stream chart. Let’s do this below:

1yarn add @nivo/stream

In the source folder of our app, we will create a streamData.js file and populate the file with the data which will be used in our Stream chart, as shown below:

1

2

3export const streamData = [

4 {

5 Ronaldo: 116,

6 Neymar: 17,

7 Messi: 37,

8 },

9 {

10 Ronaldo: 101,

11 Neymar: 11,

12 Messi: 54,

13 },

14 {

15 Ronaldo: 156,

16 Neymar: 166,

17 Messi: 141,

18 },

19 {

20 Ronaldo: 196,

21 Neymar: 160,

22 Messi: 63,

23 },

24 {

25 Ronaldo: 173,

26 Neymar: 167,

27 Messi: 94,

28 },

29 {

30 Ronaldo: 103,

31 Neymar: 194,

32 Messi: 188,

33 },

34 {

35 Ronaldo: 114,

36 Neymar: 105,

37 Messi: 40,

38 },

39 {

40 Ronaldo: 55,

41 Neymar: 12,

42 Messi: 49,

43 },

44 {

45 Ronaldo: 78,

46 Neymar: 29,

47 Messi: 90,

48 },

49];

Next, we create a Stream.jsx file, and inside we will import the stream component and then kick off the creation of our stream chart.

1

2

3import { ResponsiveStream } from "@nivo/stream";

4import { streamData } from "../streamData";

5const Stream = () => {

6 return (

7 <div style={{ height: "400px" }}>

8 <h2>My Awesome Stream</h2>

9 <ResponsiveStream

10 data={streamData}

11 keys={["Ronaldo", "Neymar", "Messi"]}

12 margin={{

13 top: 50,

14 right: 180,

15 bottom: 50,

16 left: 100,

17 }}

18 axisTop={null}

19 axisRight={null}

20 axisBottom={{

21 orient: "bottom",

22 tickSize: 5,

23 tickPadding: 5,

24 tickRotation: 0,

25 legend: "Number of Years Playing",

26 legendOffset: 36,

27 }}

28 axisLeft={{

29 orient: "left",

30 tickSize: 5,

31 tickPadding: 5,

32 tickRotation: 0,

33 legend: "Number of Goals",

34 legendOffset: -40,

35 }}

36 offsetType="silhouette"

37 colors={{ scheme: "accent" }}

38 fillOpacity={0.85}

39 borderColor={{ theme: "background" }}

40 dotBorderColor={{

41 from: "color",

42 modifiers: [["darker", 0.7]],

43 }}

44 legends={[

45 {

46 anchor: "bottom-right",

47 direction: "column",

48 translateX: 100,

49 itemWidth: 80,

50 itemHeight: 20,

51 itemTextColor: "#999999",

52 symbolSize: 12,

53 symbolShape: "circle",

54 effects: [

55 {

56 on: "hover",

57 style: {

58 itemTextColor: "#000000",

59 },

60 },

61 ],

62 },

63 ]}

64 />

65 <footer>

66 <p>

67 Representing football goals stats with Nivo stream

68 </p>

69 <p

70 style={{

71 fontStyle: "oblique",

72 marginTop: "0.5rem",

73 }}

74 >

75 PS: Not real stats

76 </p>

77 </footer>

78 </div>

79 );

80};

81

82export default Stream;

In the code block above, we imported the streamData to populate our stream chart and the ResponsiveStream from nivo. We also defined some properties for our stream component and passed our data to the stream chart.

1

2

3import Stream from "./components/stream";

4const App = () => {

5 return (

6 <div>

7 <Stream />

8 </div>

9 );

10};

11

12export default App;

In our App.js file, we import the stream component and then run the command below to start the development server on localhost:3000.

The results should look like the image below:

Stream chart with responsivestream component

Note: Look out for the peaks and the shallow periods for the total values over time. Look at the overall shape of the stream to see if there are seasonal patterns. Pick the colors and look for peaks and troughs to identify patterns or outliers. There are no negative goals; we are showing the goals using a stream chart, and we want to make clearly visible the goals scored by each person. Here is a link to learn more about reading Stream charts.

Open Source Session Replay

Debugging a web application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder. OpenReplay is the only open-source alternative currently available.

replayer.png

Happy debugging, for modern frontend teams – Start monitoring your web app for free.

Building a Calendar with responsiveCalendar component

A calendar chart is a visualization tool that shows activity over a long period, such as months or years. To build a calendar chart with Nivo in our React application, we will install the calendar package from Nivo to build our calendar chart. Let’s do this below:

1yarn add @nivo/calendar

Next, we create a calendarData.js file which will contain all the data for the population of the calendar chart.

1

2

3export const calendarData = [

4 {

5 value: 290,

6 day: "2021-03-03",

7 },

8 {

9 value: 289,

10 day: "2021-03-14",

11 },

12 {

13 value: 316,

14 day: "2021-04-08",

15 },

16 {

17 value: 297,

18 day: "2021-02-10",

19 },

20 {

21 value: 256,

22 day: "2021-04-02",

23 },

24 {

25 value: 49,

26 day: "2021-07-15",

27 },

28 {

29 value: 374,

30 day: "2021-05-11",

31 },

32 {

33 value: 55,

34 day: "2021-08-09",

35 },

36 {

37 value: 274,

38 day: "2021-05-19",

39 },

40 {

41 value: 20,

42 day: "2021-03-28",

43 },

44 {

45 value: 29,

46 day: "2021-07-04",

47 },

48 {

49 value: 374,

50 day: "2021-01-11",

51 },

52 {

53 value: 377,

54 day: "2021-03-27",

55 },

56 {

57 value: 371,

58 day: "2021-02-15",

59 },

60 {

61 value: 327,

62 day: "2021-05-28",

63 },

64 {

65 value: 289,

66 day: "2021-03-12",

67 },

68 {

69 value: 335,

70 day: "2021-03-21",

71 },

72 {

73 value: 119,

74 day: "2021-06-14",

75 },

76 {

77 value: 369,

78 day: "2021-08-04",

79 },

80 {

81 value: 116,

82 day: "2021-06-11",

83 },

84 {

85 value: 294,

86 day: "2021-04-29",

87 },

88 {

89 value: 381,

90 day: "2021-01-23",

91 },

92 {

93 value: 223,

94 day: "2021-05-24",

95 },

96

97];

Next, we will create a Calendar.jsx file and then import the ResponsiveCalendar component from Nivo and our created data.

1

2

3import { ResponsiveCalendar } from "@nivo/calendar";

4import { calendarData } from "../calendarData";

5const Calendar = () => {

6 return (

7 <div style={{ height: 400 }}>

8 <h2>Nivo Calendar</h2>

9 <ResponsiveCalendar

10 data={calendarData}

11 from="2021-01-08"

12 to="2021-08-09"

13 emptyColor="#eeeeee"

14 colors={[

15 "#61cdbb",

16 "#97e3d5",

17 "#e8c1a0",

18 "#f47560",

19 ]}

20 margin={{

21 top: 40,

22 right: 40,

23 bottom: 40,

24 left: 40,

25 }}

26 yearSpacing={40}

27 monthBorderColor="#ffffff"

28 dayBorderWidth={2}

29 dayBorderColor="#ffffff"

30 legends={[

31 {

32 anchor: "bottom-right",

33 direction: "row",

34 translateY: 36,

35 itemCount: 4,

36 itemWidth: 42,

37 itemHeight: 36,

38 itemsSpacing: 14,

39 itemDirection: "right-to-left",

40 },

41 ]}

42 />

43 </div>

44 );

45};

46

47export default Calendar;

In the code block above, we imported the calendarData and the ResponsiveCalendar from Nivo. Then we defined properties for our data from the margin to the colors and passed the calendarData to the chart.

Finally, we import the calendar component into our App.js file. We also added some routing to make everything look good.

1

2

3import {

4 BrowserRouter,

5 Route,

6 Switch,

7 NavLink,

8} from "react-router-dom";

9import Calendar from "./components/calendar";

10import Stream from "./components/stream";

11const App = () => {

12 return (

13 <BrowserRouter>

14 <nav>

15 <NavLink

16 exact

17 activeStyle={{ textDecoration: "underline" }}

18 to="/"

19 >

20 Stream

21 </NavLink>

22 <NavLink

23 exact

24 activeStyle={{ textDecoration: "underline" }}

25 to="/calendar"

26 >

27 Calendar

28 </NavLink>

29 </nav>

30 <Switch>

31 <Route exact path="/" component={Stream} />

32 <Route

33 exact

34 path="/calendar"

35 component={Calendar}

36 />

37 </Switch>

38 </BrowserRouter>

39 );

40};

41

42export default App;

Our final results should look like the image below:

Calendar chart with responsiveCalendar component

Here is a link to the code on Github, and a live version of the app can be found here.

Conclusion

This article taught us about Nivo, a robust and well-documented data visualization library that provides a better experience through beautiful charts. We had a glimpse of what we could achieve with Nivo. Have fun using Nivo and its various components for your next React application.

Resources

1- [Nivo docs](https://nivo.rocks/)

2- [Nivo GitHub page](https://github.com/plouc/nivo)



Source link

Leave a reply

Please enter your comment!
Please enter your name here