What is D3?

D3 stands for Data-Driven Documents. It is a JavaScript library for manipulating documents based on data. D3 is a dynamic, interactive, online data visualizations framework used in a large number of websites. The visualized data are called charts. Commonly, there are line charts, bar charts, pie charts, etc.

---

What is C3?

C3 stands for Comfortable, Customizable, and Controllable. C3 is a JavaScript library that builds on top of D3. C3 allows us to build charts quickly without knowing all the complexity of D3. C3 provides a variety of APIs and callbacks to access the state of the chart.

In this article, we are going to show how to build C3 charts using React functional components.

---

Static C3 Charts

We will use the Create React App as a starting point. Since C3 is a wrapper of D3, both [c3](https://github.com/c3js/c3) and [d3](https://github.com/d3/d3) packages are needed.

npm i c3
npm i d3

Then the following packages become part of dependencies in package.json.

"dependencies": {
  "c3": "^0.7.20",
  "d3": "^5.16.0",
}

#programming #d3js #react #c3 #charts #function