Data visualization is not just a graph or a chart, but the experimentation of different media to curate and display a collection of data. D3 is a powerful and flexible tool that allows you to create complex and imaginative representations. React, on the other hand, is a JavaScript library that helps you build user interfaces. D3 combined with React opens a lot of possibilities when creating an interactive web application, however, these two technologies are not easily combined as they both handle the DOM.

This repository supports a free, online workshop hosted by Imagine Dat on August 22nd, 2020.

Go to your terminal and use the following command to clone:

git clone [email protected]:milufranz08/d3-react-tutorial.git

A folder called d3-react-tutorial has been created.
Enter this directory with the following command:

cd d3-react-tutorial

This project was bootstrapped with Create React App so you will need to install some dependencies to run it:

npm install

Run the app in development mode:

npm start

Open https://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

This project has been structured with multiple branches so you are able to follow along during the workshop!

By default you are going to be in the master branch, which will contain the final product.

To start following along switch to the different branches by fetching them:

git fetch

and then using the git checkout command followed by the branch-name.

As an example, let's switch to 00-clean-start branch:

git checkout 00-clean-start

• 00-clean-start
• 01-generate-data-intro
• 02-bind-data-to-svg
• 03-add-animations-and-transitions
• 04-responsiveness
• 05-axes-and-scalability

This free, online workshop was hosted by Imagine Dat.

We are a group of creative visualizers of collected data! If you enjoy presenting data in a creative and impassioned way, you are in the right place. We host community events to share our work, discuss our ideas, teach others new skills, and network with other members of the tech community.

Subscribe to our mailing list to keep up with future events.

• Twitter: @imagine_dat_dyt
• IG: @imagine_dat_dyt