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.
1. Build Dashboard Layout
It is easy to build a dashboard layout with Ant.Design Layout components. (https://ant.design/components/layout/)
We can just use Content and Sider to split out dashboard:
Now we can use these two component to build our dashboard layout.
Write CSS to make the dashboard look decent.
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 .
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.
vis.js is the part for D3 to draw the code using props. We can write D3 code inside the draw function.
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.
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.
Try yourself!
You can clone the code from https://github.com/sdq/react-d3-dashboard
