Build A Dashboard Application with React + D3

Build A Dashboard Application with React + D3

Resource: https://github.com/sdq/react-d3-dashboard

In this demo, we build a dashboard with React+D3 using a fake user dataset.

Image for postData to Dashboard

1. Build Dashboard Layout

It is easy to build a dashboard layout with Ant.Design Layout components. (https://ant.design/components/layout/)

Image for postTwo useful layouts with ant.design

We can just use Content and Sider to split out dashboard:

Image for postSplit dashboard with Content and Sider

Now we can use these two component to build our dashboard layout.

Image for postBuild dashboard layout using Ant Design

Write CSS to make the dashboard look decent.

Image for postDashboard layout with style CSS

2. D3 React Component

D3 is the standard framework to build a visualization chart. However, it is not really compatible with React because D3 operates DOM directly and React uses Virtual DOM. So we need use some methods to combine these two amazing frameworks.

In this tutorial, we package D3 into a React Component. Each chart component is consist of three files: index.js, vis.js, and style.css .

Image for post

index.js is a React container for D3 chart. The D3 only operate DOMs inside this container, so it will not affect other parts of the React project.

Image for postindex.js

vis.js is the part for D3 to draw the code using props. We can write D3 code inside the draw function.

Image for post

style.css is the file for chart style. In our dashboard demo, there are three chart examples (Bar Chart, Line Chart, and Pie Chart).

3. Interface and Interaction

After we finished our chart components, we can now add them to views.

Image for postAdd components to viewsImage for postDashboard with static components

Finally, we can add the interactions to the components. In our demo we store all the state in the Dashboard.js which is the top parent component.

Image for postInteractions in the dashboard.

Try yourself!

You can clone the code from https://github.com/sdq/react-d3-dashboard

No Responses

Write a response