All examples By author By category About

yifancui

D3 Interactive Streamgraph

D3 Streamgraph Example

Series Hover

The series hover interactivity uses the technique from lgrammel seen here: /lgrammel/1963983

Data Tooltip

It isn't necessarily a tooltip, but data is displayed by inverting the x-axis value into a date, and mapping the date to the corresponding data value for the series.

If there is a simpler way to do this, I'd love to see an example, as I couldn't find any other examples of this out there.

Vertical Line Tooltip

I think the vertical line adds a little bit of visual orientation to the streamgraph.

Colors

I left a few alternate color ranges in the code (which are essentially taken straight from colorbrewer), in case orange doesn't sit well.

forked from WillTurman's block: D3 Interactive Streamgraph