Some problems (and some solutions) using Google Geocharts for maps of China

I was preparing some choropleths at province level for China and Geocharts wouldn't understand some names... here is what I had to do.

Posted by Dani Madrid-Morales on October 17, 2016

In a few days a new semester gets underway at Universitat Oberta de Catalunya. I will be teaching "Territori i poblaciĆ³ a la Xina i al JapĆ³" [Land and peoples of China and Japan]. I know the translation is quite awful but that's the best I could do. Anyway, every semester I update the maps that students use for their class exercises. I usually provide them cloropeths of Chinese provinces and Japanese prefectures to get them thinking about regional diversity. I like to use Google Geocharts for this because they offer a quick an easy way to add maps with some degree of interactivity. Google Geocharts allows for quite a lot of customisation and their examples are a fairly easy starting point for anybody with minimal HTML knowledge and some willingness to fight with JavaScript. What I like about Google Geocharts is how easy is to use ISO country codes in datasets to create cloropeths. It also works quite well with English names of cities and province-level administrative divisions. Creating a map like the one below which depicts net migration in Japanese prefectures is quick an easy (data is publicly available here).

Net migration by prefecture in Japan (2014)
Data from the Japan Statistical Yearbook 2015

                    
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {

var data = google.visualization.arrayToDataTable([
	['Prefecture', 'Net migration'],
	['Hokkaido',-8942],
//You can use ISO codes for provinces or the names of the provinces in English directly
	['JP-02',-6460],
	['Iwate',-3200],
	['Miyagi',2437],
	['Akita',-4423],
	['Yamagata',-3573],
	['Fukushima',-2211],
	['Ibaraki',-4849],
	['Tochigi',-1795],
	['Gunma',-2250],
	['JP-11',14909],
	['Chiba',8364],
	['Tokyo',73280],
	['Kanagawa',12855],
	['Niigata',-5518],
	['Toyama',-1091],
	['Ishikawa',-586],
	['Fukui',-2246],
	['Yamanashi',-2564],
	['Nagano',-3279],
	['Gifu',-4154],
	['Shizuoka',-7240],
	['Aichi',6190],
	['Mie',-2839],
	['Shiga',-889],
	['Kyoto',-1174],
	['Osaka',-391],
	['Hyogo',-7092],
	['Nara',-3065],
	['Wakayama',-2957],
	['Tottori',-1131],
	['Shimane',-1601],
	['Okayama',-382],
	['Hiroshima',-2639],
	['Yamaguchi',-3647],
	['Tokushima',-1495],
	['Kagawa',-1149],
	['Ehime',-3512],
	['Kochi',-2179],
	['Fukuoka',3900],
	['Saga',-2269],
	['Nagasaki',-5853],
	['Kumamoto',-2861],
	['Oita',-2648],
	['Miyazaki',-3185],
	['Kagoshima',-4559],
	['Okinawa',-37],
			]);	

var options = {
region: 'JP',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
enableRegionInteractivity: 'true',
legend: {textStyle: {color: 'black', fontSize: 14}},
width: 1000,
height: 624,
sizeAxis: {minSize:5,  maxSize: 5},
colorAxis: {colors: ['#000000', '#222222']},
backgroundColor: 'white',
datalessRegionColor: '#F2F2F2'
};

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
var chart_div = document.getElementById('chart_div');
chart.draw(data, options);
};
                    
                    

The great thing of Google Geocharts is that you can either use the names of the prefectures in English or the less user friendly two value ISO codes for Japan. If you go down on the list to Saitama, I have used 'JP-11' instead of 'Saitama' to show how you can call a prefecture in two ways. There are two issues with using the ISO codes: one they are impossible to remember and two, they will pop up just like that when you move your cursor around the map. That is why I always prefer to use province names... except that with some countries this just simply doesn't work. Names of Chinese provinces do not get along well with Google Geocharts. So to achieve the same map, but with Chinese provinces, some twitching is needed. Here is what I did:

                    					
var data2 = google.visualization.arrayToDataTable([
	['Province','Disposable Income by Household'],
//By adding a label to each value, we can still use ISO codes and avoid the troubles of Geocharts not understanding
//some of the English names of Chinese provinces.
	[{f:'Anhui ', v:'CN-34 '},15154],
	[{f:'Beijing ', v:'CN-11 '},40830],
	[{f:'Chongqing ', v:'CN-50 '},16569],
	[{f:'Fujian ', v:'CN-35 '},21218],
	[{f:'Gansu ', v:'CN-62 '},10954],
	[{f:'Guangdong ', v:'CN-44 '},23421],
	[{f:'Guangxi ', v:'CN-45 '},14082],
	[{f:'Guizhou ', v:'CN-52 '},11083],
	[{f:'Hainan ', v:'CN-46 '},15733],
	[{f:'Hebei ', v:'CN-13 '},15189],
	[{f:'Heilongjiang ', v:'CN-23 '},15903],
	[{f:'Henan ', v:'CN-41 '},14204],
	[{f:'Hubei ', v:'CN-42 '},16473],
	[{f:'Hunan ', v:'CN-43 '},16005],
	[{f:'Jiangsu ', v:'CN-32 '},24776],
	[{f:'Jiangxi ', v:'CN-36 '},15100],
	[{f:'Jilin ', v:'CN-22 '},15998],
	[{f:'Liaoning ', v:'CN-21 '},20818],
	[{f:'Mongolia Interior ', v:'CN-15 '},18693],
	[{f:'Ningxia ', v:'CN-64 '},14566],
	[{f:'Qinghai ', v:'CN-63 '},12947],
	[{f:'Shaanxi ', v:'CN-61 '},14372],
	[{f:'Shandong ', v:'CN-37 '},19008],
	[{f:'Shanghai ', v:'CN-31 '},42174],
	[{f:'Shanxi ', v:'CN-14 '},15119],
	[{f:'Sichuan ', v:'CN-51 '},14231],
	[{f:'Tianjin ', v:'CN-12 '},26359],
	[{f:'Xinjiang ', v:'CN-65 '},13670],
	[{f:'Tibet ', v:'CN-54 '},9740],
	[{f:'Yunnan ', v:'CN-53 '},12578],
	[{f:'Zhejiang ', v:'CN-33 '},29775],
        ]);										
					
					

By indicating both ISO code and label for each province, you solve the two issues raised above. You overcome Geocharts' problems with English names of Chinese provinces and municipalities, and you allow yourself to use the sometimes handy ISO province codes while still returning user friendly information on mouseover.

Disposable Income per Household (2014)
Data from the Chinese Statistical Yearbook