Interactivity

Interactivity is a key feature of any chart displayed on the web. It includes tooltip, hover effect, cross-graph interaction, zooming, panning and more.

Interactivity is a big topic. This section aims at giving general tips and tricks on the topic together with applied examples ready to be used in your project.

Useful links

Work in Progress

This section is a work in progress. 🚧

For now, it just lists all the charts using Interactivity in the gallery.

But I plan to write some complete tutorials on this passionating and complicated topic. You can subscribe to the project to know when it's ready!

GIF of a scatterplot with hover effect — **Scatterplot Hover effect**
How to add a hover effect to highlight a group on a scatterplot

GIF of a bubble plot smoothly transitioning data — **Bubble plot data set transition**
How to smoothly animate the transition between dataset

gif of a violin plot smoothly transitioning to a boxplot using shape morphism — **Violin to Boxplot transition**
Using shape morphism to smoothly transition from a boxplot to a violin and reverse

GIF showing a violin plot with varying bucket size — **Bucket size effect**
Interactive example showing the bucket size effect on a violin chart

GIF showing a mirror transition between a boxplot and a violin plot — **Boxplot to Violin plot**
Interactive example showing the difference between a boxplot and a violin

GIF of a histogram with animated data transition — **Histogram dataset transition**
How to animate the transition between datasets

GIF of a data update on a React barplot — **Barplot dataset transition**
How to smoothly animate the transition between dataset

GIF of a line chart that animates between 2 dataset — **Line chart with dataset transition**
How to smoothly animate the transition between 2 dataset on a line chart

GIF of a streamgraph react component that supports hover effect — **Streamgraph with hover effect**
How to add a hover effect on a streamgraph to highlight a group

GIF of a streamgraph — **Offset and Smoothing transition**
An interactive streamgraph example showing how to animate transition between the chart stacking features.

GIF of a streamgraph with multiple interactive features — **Streamgraph application**
Streamgraph with a slider to zoom on a time stamp and with interactive inline legends

General Knowledge

All charts

Animation

Interactivity

Caveats

Contact

👋 Hey, I'm Yan and I'm currently working on this project!

Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting yan.holtz.data with gmail.com. You can also subscribe to the newsletter to know when I publish more content!

About | License