React Data Visualization Project with JSON Data Fetched from a Server
Summary
This project began as a coding challenge for a front-end developer job. This was my first React project. I was primarily a UX/UI Designer with a growing curiosity for development, when a friend referred me to a front-end developer job. In 6 weeks I built a solid foundation in vanilla javascript and learned how to create a React app (with hooks).
The Project Challenge — Data Visualization
Given a JSON file with 500 records of cyber security vulnerabilities (CVE’s) found in a system, my challenge was to create a functioning and aesthetically pleasing webpage to display all the data and help a user easily navigate and understand the data.
My Process
My UX Design skills were a huge benefit in the beginning. I knew how to consider the end users (IT professionals) and I worked to understand the data and create a hierarchy of which data points were most important, second, and third to the users.
Next, I sketched wireframes for different possible and appropriate data visualizations.
Instead of trying to solve the challenge, learn javascript, AND learn React all at once, I decided to focus on creating a prototype in vanilla javascript first, using a small sample of the data.
Github Repo for vanilla JS prototypes
Prototype Challenges: It took me a while to figure out how to turn the CVE records object into an array of objects, then loop through them with the array.ForEach( ) method to create DOM elements for each record. Also, figuring out how to monitor which button was active, to fill the details panel with the correct CVE data was a challenge. I solved that part by query selecting all CVE buttons, then using the ternary operator to check for a match with the newly clicked button, then add/remove the active class.
With a javascript prototype complete, I began learning how to create a React app and translate my prototype into the React world.
First, I had to use the useState and useEffect hooks right away to fetch the JSON data from my local server.
Creating Static Components
Then, I created the static components, such as the CVE button rows, details panel, and other UI elements. To create the 500 instances of the CVE container/button, I first turned the data object into an array of objects using the Object.entries() method. I knew I wanted the final visualization to display records from highest security risk to lowest, helping the users prioritize the data. So I created a sorting function for the array. Then, using the array.map() method, I created an instance of my clickable button row for every record, creating access to the record data as a prop.
Creating Dynamic Components
I used the useState() hook to monitor which CVE record was active, passing the setCVE function up through components using props, until it reached the nearest common ancestor for all components needing to access the activeCVE state.
With the activeCVE record managed at the top with useState, my detailsPanel component could read the data from the activeCVE and send it down through its props to the appropriate data fields.
With the activeCVE record managed at the top with useState, I implemented a useEffect hook to remove the active class from the previously active CVE button, so that only one row would be active at a time, allowing for CSS to indicate the one active CVE button.
Github repo for final React product
Product demo at top of article.
Summary
In the end, I can’t believe how much I learned in 6 weeks! This project — and the pace at which I had to learn — stretched my brain in ways I haven’t felt for many years. I appreciate React’s functional way of computing and managing state. I believe my React app took up less lines of code then my vanilla js prototype and is easier to read if you’re familiar with JSX. Those are huge benefits! Looking forward to continuing my React journey.
