Tuesday, May 9, 2017

charte.ca number formatting

Users want to have the ability to tweak number formatting. No, users need this feature. Just imagine having labels like "1382323332" and "1340152688" on a diagram comparing Chinese and Indian population. Or imagine a US GDP chart with a "$20000000000000" mark on the vertical axis. Or imagine that your audience wants to see negative amounts of some specific currency: "-£349.3300".

charte.ca supports number formatting for axis marks, data labels and callouts:



Since the rules of number formatting can be complicated, we decided not to invent our own mechanism for it. We just use the standard instead: ECMAScript Internationalization API Specification. It's a long specification, but the part that we are interested in boils down to this Mozilla document. This document defines how Javascript developers can specify the locale and formatting options when converting numbers to strings. For example, an object that enables Japanese yen formatting can be instantiated as follows:

new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });

and it can produce strings like "¥123,457". charte.ca does not provide any programming platform for chart creators, but it allows to pass the locale 'ja-JP' and the option object { style: 'currency', currency: 'JPY' } as additional parameters to the {value} keyword used in axis marks, data labels and callouts. The convention is to extend the "value" keyword with a semicolon followed by the number format specification:

NumberFormat:{locale:'<desired locale>', options:<desired options>}

For example:

{value;NumberFormat:{locale:'en', options:{useGrouping: true }}} will produce numbers with comma as a thousands separator

{value;NumberFormat:{locale:'en-US',options: style:'currency',currency:'GBP',minimumFractionDigits:4}}} will produce British pound amounts with 4 digits after decimal point.

In the example below, the callout format

{series}: {value;NumberFormat:{locale:'en', options:{useGrouping: true }}}

is specified, which makes the callout for the "0-4" age group with value 1453708 to be formatted as "0-4: 1,453,708":



Sunday, May 7, 2017

Comparative histogram charts: population by age group

Great news: charte.ca now supports comparative histograms. This kind of charts comes  handy when you want to compare two or more groups of series side-by-side. The following chart shows country population by age group, for multiple years, comparing male and female population.


This post discusses comparative histogram creation process step-by-step.

Friday, January 6, 2017

US and Canada demographics: immigration, temporary workers, refugees in 1935-2014

I was curious about the differences between American and Canadian immigration systems. After 2016 US elections, we hear a lot about those differences, but I could not find a good source with actual numbers compared. Let's do it here. As usual, here is the Google Docs spreadsheet with all relevant data. As usual, all charts below are interactive, just move your mouse over the line or the legend item.

Let's start with the simplest part - total population numbers provided by Wikipedia:


No surprises here - these countries are economically and culturally close, so population growth patterns are similar.

Let's have a look at natural population growth numbers pulled from UNDESA (UN Department of Economic and Social Affairs) and The World Bank: