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…


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…


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


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…


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…


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…


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…


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…


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…

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