Skip to content

Instantly share code, notes, and snippets.

@Pabloska

Pabloska/index.html

Last active August 29, 2015 14:19
Show Gist options
  • Save Pabloska/1372cf427851a8dc9f0c to your computer and use it in GitHub Desktop.
Save Pabloska/1372cf427851a8dc9f0c to your computer and use it in GitHub Desktop.
Download ZIP
Migrant crisis in the Mediterranean
Raw
index.html
<html>
<body>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['sankey']}]}">
</script>
<div>
<h2><b>
ARRIVALS BY SEA IN ITALY (JANUARY - MARCH 2015)
</b></h2>
<p1>Built with <a href="https://developers.google.com/chart/interactive/docs/gallery/sankey">Google sankey charts</a> by<a href="https://www.linkedin.com/profile/public-profile-settings?trk=prof-edit-edit-public_profile"> Pablo Gallego</a></p1>
<div>
<a href="http://mmp.iom.int/sites/default/files/documents/The-Migration-Newsdesk-issue01.pdf">Data source</a>
</div>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Migrants (thousands)');
data.addRows([
[ 'Syria', 'Men', 0.8 ],
[ 'Syria', 'Women', 0.1 ],
[ 'Syria', 'Minors', 0.18 ],
[ 'Eritrea', 'Men', 0.6 ],
[ 'Eritrea', 'Women', 0.2 ],
[ 'Eritrea', 'Minors', 0.13 ],
[ 'Mali', 'Men', 0.9 ],
[ 'Mali', 'Women', 0.003 ],
[ 'Mali', 'Minors', 0.06 ],
[ 'Nigeria', 'Men', 0.8 ],
[ 'Nigeria', 'Women', 0.08 ],
[ 'Nigeria', 'Minors', 0.024 ],
[ 'Gambia', 'Men', 1.3 ],
[ 'Gambia', 'Women', 0.008 ],
[ 'Gambia', 'Minors', 0.135 ],
[ 'Senegal', 'Men', 1.1 ],
[ 'Senegal', 'Women', 0.001 ],
[ 'Senegal', 'Minors', 0.043 ],
[ 'Africa', 'Deaths', 0.4 ],
[ 'Somalia', 'Men', 0.72 ],
[ 'Somalia', 'Women', 0.2 ],
[ 'Somalia', 'Minors', 0.18 ],
[ 'Minors', 'Accompanied', 0.24 ],
[ 'Minors', 'Unacompanied', 0.51 ],
[ 'Men', 'Italy', 6.2 ],
[ 'Women', 'Italy', 0.6],
[ 'Accompanied','Italy', 0.24 ],
[ 'Unacompanied','Italy', 0.51 ],
]);
// Set chart options
var options = {
width: 800,
sankey: {
link: { color: { fill: 'grey' } },
node: { color: { fill: '#a61d4c' },
label: { color: '#871b47' } },
node: { width: 6 },
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment