Image for post
Image for post

The Backstory

I’ve recently started working on refactoring a D3 project that I built earlier this year called Streetball Mecca. The project itself is a rebuild of a Tableau dashboard created by David Siegel but with a few small design changes. I’ve always struggled with dashboard design so I often seek out existing projects to rebuild.

My version of the project was done solely in D3 and, although I was quite proud of the original rebuild, I’ve come to the conclusion that React would have been a much better choice to organize the project, as well as, manage much of the business logic using the useReducer hook. …


Image for post
Image for post
Image by author

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. …


Image for post
Image for post
Image by author

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. …


Image for post
Image for post
Image by author

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. …


Image for post
Image for post
Image by author

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

One key requirement needed in any interactive D3 dashboard, is the implementation of logic to render the data based on the user’s choice of one or more applied filters. Its design should be flexible, and provide the ability to include additional filters based on user requirements.

Dashboard Design

The idea for this dashboard design was based on the discovery of this Tableau Project by David Siege, which I came across while helping a student find a dataset based on basketball courts in NYC. The dataset was limited to just Manhattan and Brooklyn. However, it was a good starting point and being that I’ve worked with Tableau in the past, I knew we would be able to access the existing data by downloading the project. …

About

Joe Keohan

Software Engineering Instructor at General Assembly. React and D3 evangelist and passionate about sharing all this knowledge with others.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store