Thursday, June 29, 2017

Happy Birthday, Canada: animated categories

While Canadians looking for the ultimate party to celebrate Canada's 150th birthday on July 1, we will have a quick look at their spending habits. And we will do that by using charte.ca new feature - animated categories.

Chart options panels went through some reorganization. Now we have "Current category label" panel:


and "Animation" panel:


For charts with multiple data rows that are considered categories (pie, regular bar and comparative histogram charts), charte.ca can walk through all categories and update the appearance, creating an animation effect - see chart below.


Try it for yourself - create a pie, regular bar or comparative histogram chart with multiple data rows and play with animation settings. The feature comes handy when you embed charte.ca visualization into a presentation and do not have a convenient way to click or hover over the chart to navigate between categories.

Posted by at No comments:
Labels:

Wednesday, June 14, 2017

The case for pie charts

Pie charts get a lot of criticism these days. I must agree that bar charts deliver the message better because:

  • bar charts can present data for multiple categories without user interaction;
  • human eye is much better at telling differences between lengths than it is at determining differences between areas.

The charts below visualize the same data, and they all have the same size of 640x640 pixels. Decide for yourself which one does it better.

Pie chart in question - move your mouse or tap over radio buttons to change category:




Read more »
Posted by at No comments:
Labels:

Thursday, June 1, 2017

Scalable charts

Great news: charte.ca charts are now fully scalable. Content editors and users can change the size of the container - the chart will scale accordingly, preserving the original aspect ratio, without losing any functionality or quality.



Source code for this test HTML file - pay attention to the 100% width style: 

<html>
  <body>
    <div>
      <embed src="example-drinking.svg"  type="image/svg+xml" style="width:100%;" />
    </div>
  <body>
<html>


To see this in action, open http://charte.ca and play with the browser window size - you will see sample charts shrinking and expanding as well.
Posted by at 1 comment:
Labels:
Subscribe to: Posts (Atom)