Sankey Diagram: gradient mode only for selected links

80 views

Skip to first unread message

Lovis Maria

unread,

Aug 23, 2017, 9:40:29 AM8/23/17

to Google Visualization API

Dear Google users,

I was searching for a good software to visualize sankey diagrams and did not find any, until I got to know the Google Web Designer. This is really a great tool to design sankey diagrams.

However, I encountered one problem and could not figure out a solution yet (e.g., by consulting this page https://developers.google.com/chart/interactive/docs/gallery/sankey#controlling-colors or browsing through the group here).

I have a sankey diagram with 10 nodes (5 on the right, 5 left) and various links between them; code provided below. However, I am only substantially interested in four of the flows/links:

[ 'Yes', 'Like', 273 ],

[ 'Yes', 'Dislike', 310 ],

[ 'Rather yes', 'Like', 306 ],

[ 'Rather yes', 'Dislike', 317 ]

All other flows are of secondary interest. Therefore, I would like to use the colorMode: 'gradient' only for these four links, while all the remaining links should be gray (or, alternatively, "transparent", if such an option exist, or just not as much in the foreground). The link weights should remain the same.

I would be extremely happy if anybody had a solution for me :-)

Best

Lovis

<html>

<head>

google.charts.load('current', {'packages':['sankey']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'From');

data.addColumn('string', 'To');

data.addColumn('number', 'Weight');

data.addRows([

[ 'Yes', 'Like', 273 ],

[ 'Yes', 'Dislike', 310 ],

[ 'Yes', 'Abstention', 38 ],

[ 'Yes', 'no answer', 4 ],

[ 'Yes', 'died', 75 ],

[ 'Rather yes', 'Like', 306 ],

[ 'Rather yes', 'Dislike', 317 ],

[ 'Rather yes', 'Abstention', 40 ],

[ 'Rather yes', 'no answer', 4 ],

[ 'Rather yes', 'died', 57 ],

[ 'Undecided', 'Like', 3 ],

[ 'Undecided', 'Dislike', 9 ],

[ 'Undecided', 'Abstention', 7 ],

[ 'Undecided', 'died', 12 ],

[ 'Rather no', 'Like', 13 ],

[ 'Rather no', 'Dislike', 171 ],

[ 'Rather no', 'Abstention', 24 ],

[ 'Rather no', 'no answer', 2 ],

[ 'Rather no', 'died', 28 ],

[ 'No', 'Like', 10 ],

[ 'No', 'Dislike', 153 ],

[ 'No', 'Abstention', 9 ],

[ 'No', 'no answer', 0 ],

[ 'No', 'died', 30 ],

]);

// Sets chart options.

var colors = ['#00c92c', '#00c92c', '#ff0000', '#28a9ff', '#f917c0','#3725d1', '#00ff37', '#f2ff00', '#ff6600', '#ff0000',

];

var options = {

height: 400,

width: 800,

sankey: {

iterations: 0,

node: { width: 30 ,

label: {

fontName: 'Calibri',

fontSize: 24,

color: '#000',

bold: true,

italic: false

colors: colors

link: {

colorMode: 'gradient',

colors: colors

}

};

// Instantiates and draws our chart, passing in some options.

var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Lovis Maria

unread,

Mar 5, 2018, 11:47:28 AM3/5/18

to Google Visualization API

Hello again,

does anyone have experience with Sankey diagrams / the Google Web Designer and has an answer to my question posted below?

Thanks a lot!

Best

lovis

Reply all

Reply to author

Forward

0 new messages