Bar chart in D3.JS and React (Part I)

We are back with our video series with Stepwise developers and mentors! They are unique and talented people who have extensive knowledge in their fields and our areas of activity. From Custom Software Development, through Cloud, Security and Test Automation topics, to individual programming languages and frameworks! They decided to share this knowledge with you :)

Meet Maciej, Stepwise Senior Frontend Developer and get started with D3js in React with this quick tutorial. We will be building a Bar Chart and look at NX, Styled Components, useRef, useState and useEffect hooks and more.

If you want to check Maciej's files - feel free to visit his Gitlab:

0:00 Intro
0:22 React environment setup with NX
2:57 new React component
6:29 using refs to target DOM elements
7:17 creating Bar Chart component
7:46 measuring page size
11:10 d3 current ref selection
12:02 adding text layer to SVG elements
12:07 chaining text attributes
12:54 pushing data into chart
13:33 d3 enter function for styling individual bars
14:12 function for scaling x and y axis
15:36 appending bar rectangle element
16:57 color scheme function
17:44 append text value to the bar
18:45 adding x and y axis
19:23 final thoughts
20:03 next video

--------
If you are looking for a job as a Frontend Developer - write to us!
We'd love to hear from you.

Check our website - we are still looking for new talents!