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

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…

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…

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…

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

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

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

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…

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…