A component is a modular, reusable interface unit that encapsulates part of an application's structure or behavior. In a React visualization project, components divide the dashboard into focused units rather than one large file. section 8.2
A practical component structure separates responsibilities:
- ChartComponents contain singular chart elements, such as circles, rectangles, and axes. section 8.2
- Charts contain complete visualizations, such as scatterplots and bar charts. section 8.2
- Interactions hold interaction code, while UI contains unrelated elements such as buttons and cards. section 8.2
A reusable rectangle component
A bar chart can use a Rectangle component responsible only for drawing one rectangle, calling it once for each bar from BarChart. The same pattern applies to an Axis component, which can receive a type such as "band" and an array of labels. section 8.6.2
