chsk

Chsk is a library of React components for data visualization. It provides a toolkit for creating static charts for offline publications, dynamic components for dashboards, and animated stories for presentations.

• documentation
• gallery of examples

Features

The library provides React components for data visualization.

• Core components include axes, legends, tooltips, typography elements, and geometric shapes.
• Data-specific components include bar charts, line charts, scatter plots, density maps, pie/doughnut charts, strip charts, quantile/box plots, violin plots, histograms, heat maps, set (Venn) diagrams, upset diagrams, dendrograms, and schedule (Gantt) charts.

Advanced features enable creating dynamic and bespoke content.

• Milestone animations power step-by-step story-telling.
• Rich interactions allow data exploration through zooming, panning, and dragging.
• Customizable components combine in arbitrary ways to compose truly original designs.
• Annotation components add decorations to base charts.
• Hooks provide access to chart state and enable the implementation of custom components.
• Export utilities save charts into optimised svg files.

Example

The animation below shows a bar chart with custom spacing between groups of bars. The recording starts with an empty surface and parts of the chart enter into view in stages. Later, the bars readjust to display new data.

All data in the animation are synthetic. A live version of the chart is available here.

Install

Package @chsk/core with library infrastructure is available from npm.

npm install @chsk/core

Add-on packages provide data-specific components. For example, package @chsk/band supports bar charts.

npm install @chsk/band

Available packages are: @chsk/annotation, @chsk/band, @chsk/matrix, @chsk/polar, @chsk/set, @chsk/themes, @chsk/xy.

Credits

Thanks to all the maintainers and contributors of the packages listed in packages.json.

Key dependencies include react for managing state, d3 for data processing related to visualization, and framer-motion for managing animations.

Special thanks also to charting libraries recharts and nivo, which are important influences.

Contributing

Contributions are welcome. Please see CONTRIBUTING.md.