So the last component to refactor in Streetball Mecca is the bar chart. In my last article, React & D3: Preparing The Data With D3.Nest, I discussed how the data for the chart was organized and formatted using d3.nest. This involved grouping the parks based on their neighborhood location and calculating the overall average of all parks associated with that neighborhood.

Here is the current working version used in this article and the CodeSandbox as well.

Thinking Outside The Box

As I started to contemplate how best to refactor the D3 bar chart code into the React ecosystem, I leveraged the lessons learned from all the previous refactoring. One of the most important changes was to allow React to manage state, render/update DOM elements, and then allow D3 to do what it does best, such as creating scales and nesting data. …

The last and final item to refactor for Streetball Mecca is the interactive bar chart. At this point, I have basically rewritten the entire codebase from D3 over to React. The initial migration over to React took the D3 within React approach where D3 was used for data binding, rendering, and updating the DOM elements. Once I got things to work within the React ecosystem, I then refactored for a more D3 for the math and React for everything else approach. …

During the refactor of Streetball Mecca from a version using only D3 to a version that leverages D3 for it’s helper functions and React for everything else, I replaced d3.transition with React-Spring in order to animate the fadein/fadeout of the circles on the map. You can read more about how I implemented that solution in this previous article: React & D3: Rendering Circles On A Map Using React-Spring Transitions.

While I was refactoring the park image into its own component, I once again found the need to replace d3.transition with an alternative solution and decided to give React-Spring another try.

The React-Spring Docs And More Research

The d3.transition used to fadein the park images felt somewhat choppy. The reason being is that it just replaced the previous background image first and then used opacity to create the fadein. …

In my last article React & D3: Rendering A Map I walked through the code to render a map using both the D3 within React and D3(math)/React(DOM) approaches. It’s a great entry point for anyone with D3 expertise but relatively new to the React.

In this article I will perform one last refactor to render the circles using the D3(math)/React(DOM) approach. This means I’ll be migrating as much of the code from D3 over to React, which in this case is almost all of it.

Existing Circle Codebase (D3v4)

Here is how I originally wrote the existing D3 specific code. It follows the older D3 (pre V5) Enter/Update/Exit pattern and includes the transitions to fade in/out the circles. …

As of late, all my attention has been focused on working through a full refactor of Streetball Mecca from the original D3 only version to the newer React & D3 version. In the process, I’ve come across quite a few articles that discuss how to incorporate D3 into React, one of which included a custom useD3 hook and so I decided to perform one last refactor to the map and add the new hook to the mix.

In my previous article, React & D3: Rendering A Map, I discussed two approaches for incorporating D3 code into React. The initial approach, D3 within React, provides D3 with as much control as possible in rendering the data, but still requires the help of React’s useRef and useEffect hooks. …

Ever since I discovered D3 I was immediately fascinated with all its capabilities. It was built as a low level JavaScript data visualization library which meant you were only limited by your imagination as to what you could build, render, and interact with on the screen. It’s also one of the most widely used JavaScript data viz libraries with over 95k stars on Github.

I studied it heavily for several years after graduating the WDI (Web Development Immersive) program at GA back in 2015 and even ran a weekly meetup at their NYC campus back in 2018.

In 2016 I was hired by GA to teach my very first WDI program and needed to learn React pronto as the team I was working with decided to incorporate it into our curriculum. The more I learned about React, the more intrigued I was and because the demand to master all the content, D3 was put on hold. …

Introduction

In my last article 3 Ways To Implement Responsive Design In Your React App I discussed several ways to implement responsive design in a React app. Inspiration for that app was mars.nasa.gov, and in this article I continue to rebuild additional portions of the site with the main focus on implementing the bottom slider functionality in the header section on the main page.

Here is a deployed version and the codesandbox:

App: https://02nz9.csb.app/

Codesandbox: https://codesandbox.io/s/mars-slider-demo-02nz9

The “BottomSlider” Component

Creating a Component to encompass all the elements and functionality for the slider seems the most practical approach, especially since I was considering including it other apps I’d like to build. …

React — The Game Changer

React has truly been a game changer in how we now approach developing front-end applications for the web. Components, right from their introduction, went against the “separation of concerns” rule of thumb, choosing to leverage JSX and bringing together HTML and JS in the same file. UI elements are now being rendered via their own Components with all the intent and purpose of reusability.

Responsive Done Many Ways

Responsive design was always a requirement and now that we’re building apps using the “mobile first” mindset, is even more important than ever.

Using the most basic approach, responsive design has been implemented using Media Queries, where a more experienced developer might opt to add event listeners that respond to the “resize” event and add/remove styles via JS. Even still, both novice and experienced developers alike might work with a front-end framework like Bootstrap or Materialize with predefined breakpoints and custom Components for making those changes. …