Show all posts
2 years ago

Layers and Dual axis

You can combine different chart types with Taucharts now:

layers-sample

Let’s consider this in details.

As I said before, chart is a visual model of data. Quite often format of data is a sequence of data points consisting of measurements (e.g. Y1 .. Yn) made over a time interval (e.g. X).

It’s natural to desire seeing the whole picture and putting all measures on a single chart. This allows us keep an eye on particular measures in parallel as well as compare its behavior across general dynamics.

This task becomes more complex when a measures belong to significantly different scale ranges and should be plotted as different chart types.

Sample data format

Actually Taucharts has a documented workaround to handle simple cases for such data format which allows you to “unpack fields meta-data” and use simple chart types (e.g “line”) with color-coding for each measure. More advanced usage requires sophisticated customization of chart DSL.

At this stage, let me introduce a Layers plugin which simplifies such tasks in Taucharts. The plugin considers each metric provided as a composable layer which shares its X axis with the main chart. The current version allows you to make layers only with different Y axes. Categorical Y axes are not allowed – they don’t make much sense in this context.

The plugin works in 2 modes:

Well, a jsfiddle is worth a thousand words. Here some examples:

Caveat emptor with dock mode: dual axis charts is a “holy war” topic among the visualization community. There are 2 simple rules you should to consider when choosing a dual axis chart:
1) A measure belongs to significantly different ranges, so you want to keep a context of quantity for each one
2) There is a requirement to display 2 groups of measures in 2 contrasting or complementary chart types.

Please, remember that dual axis chart can accidentally hurt someone’s feelings :). Personally I always remember how Hadley Wickham reacted to a dual axis chart sample:

Hadley Wickham vs dual axis chart

Take care, Hadley’s eyes, share your feedback and have fun!

  • RedScourge

    Is there a way to force my Y-axis text labels to be rotated vertically besides enabling the layers plugin? Unfortunately adding the layers plugin adds a Layer Type attribute to the tooltips which I can’t figure out how to remove.

    • Vladimir Petriko

      > Is there a way to force my Y-axis text labels to be rotated vertically
      At the moment we guaranty good look&feel + adaptive behavior for charts with default layout settings and you can’t customize axes rotation in this mode.

      > layers plugin adds a Layer Type attribute to the tooltips which I can’t figure out how to remove.
      See documentation on tooltip plugin
      https://api.taucharts.com/plugins/tooltip.html
      and I’ve made an example for you
      https://jsfiddle.net/a8b7mtpr/ (line 65)

      • RedScourge

        In my case, the problem was that I was using date values for the X-axis, and I had chosen tickFormat: ‘%x %X’. I ended up opting for nvd3 instead, as I was able to just tack on a “.rotateLabels(-50)” call with their initialization methodology. Ultimately I like the look of charts in Taucharts a lot more, but nvd3 has focus brush interfaces, and I don’t know how to control Taucharts anywhere near as much as I figured out how to do with nvd3, despite their total lack of documentation.