javascriptgoogle-visualizationsankey-diagram
Change link colors of Google Chart Sankey diagram
I have a list of lists with [from, to, value, color] entries. I want to create a Sankey diagram with it in google charts. Creating a basic Sankey diagram is not difficult, however, I would like to change the link colors based on the RGB values in the list. I read in the documentation that we can add an optional column role for style. So, I tried to add this in different ways:
data.addColumn({type: 'string',role: 'style'});
Or:
data.addColumn('string', 'style');
But none of them work. I also tried setting the color attribute to fill-color but to no avail. Lastly I also tried to edit the options variable at the bottom of the code, since the node and link colors are here also defined. But I'm not sure how to use the lists values here. Simply changing the colors list to a list of RGB values does not work, since the order is then not correct (wrong RGB values are assigned to the links). How do I make sure that the links are filled with the RGB value from the 4th element of the lists? The current output of the code can be found below.
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
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.addColumn({
type: 'string',
role: 'style'
});
data.addRows([
['C0_1', 'C0_2', 638, 'color: rgb(255, 207, 207)'],
['C0_1', 'C1_2', 164, 'color: rgb(255, 130, 130)'],
['C1_1', 'C0_2', 123, 'color: rgb(255, 207, 207)'],
['C1_1', 'C1_2', 1313, 'color: rgb(255, 130, 130)'],
['C0_2', 'C0_3', 555, 'color: rgb(255, 212, 212)'],
['C0_2', 'C1_3', 105, 'color: rgb(255, 127, 127)'],
['C1_2', 'C0_3', 111, 'color: rgb(255, 212, 212)'],
['C1_2', 'C1_3', 1320, 'color: rgb(255, 127, 127)'],
['C0_3', 'C0_4', 495, 'color: rgb(255, 217, 217)'],
['C0_3', 'C1_4', 80, 'color: rgb(255, 119, 119)'],
['C1_3', 'C0_4', 157, 'color: rgb(255, 217, 217)'],
['C1_3', 'C1_4', 1223, 'color: rgb(255, 119, 119)'],
['C0_4', 'C0_5', 374, 'color: rgb(255, 219, 219)'],
['C0_4', 'C1_5', 32, 'color: rgb(255, 66, 66)'],
['C0_4', 'C2_5', 157, 'color: rgb(255, 186, 186)'],
['C1_4', 'C0_5', 91, 'color: rgb(255, 219, 219)'],
['C1_4', 'C1_5', 623, 'color: rgb(255, 66, 66)'],
['C1_4', 'C2_5', 545, 'color: rgb(255, 186, 186)'],
['C0_5', 'C0_6', 299, 'color: rgb(255, 225, 225)'],
['C0_5', 'C1_6', 27, 'color: rgb(255, 63, 63)'],
['C0_5', 'C2_6', 59, 'color: rgb(255, 170, 170)'],
['C1_5', 'C0_6', 13, 'color: rgb(255, 225, 225)'],
['C1_5', 'C1_6', 425, 'color: rgb(255, 63, 63)'],
['C1_5', 'C2_6', 197, 'color: rgb(255, 170, 170)'],
['C2_5', 'C0_6', 136, 'color: rgb(255, 225, 225)'],
['C2_5', 'C1_6', 135, 'color: rgb(255, 63, 63)'],
['C2_5', 'C2_6', 409, 'color: rgb(255, 170, 170)'],
['C0_6', 'C0_7', 273, 'color: rgb(255, 219, 219)'],
['C0_6', 'C1_7', 29, 'color: rgb(255, 62, 62)'],
['C0_6', 'C2_7', 62, 'color: rgb(255, 199, 199)'],
['C1_6', 'C0_7', 12, 'color: rgb(255, 219, 219)'],
['C1_6', 'C1_7', 440, 'color: rgb(255, 62, 62)'],
['C1_6', 'C2_7', 116, 'color: rgb(255, 199, 199)'],
['C2_6', 'C0_7', 49, 'color: rgb(255, 219, 219)'],
['C2_6', 'C1_7', 211, 'color: rgb(255, 62, 62)'],
['C2_6', 'C2_7', 382, 'color: rgb(255, 199, 199)'],
['C0_7', 'C0_8', 239, 'color: rgb(255, 208, 208)'],
['C0_7', 'C1_8', 9, 'color: rgb(255, 40, 40)'],
['C0_7', 'C2_8', 31, 'color: rgb(255, 192, 192)'],
['C1_7', 'C0_8', 39, 'color: rgb(255, 208, 208)'],
['C1_7', 'C1_8', 403, 'color: rgb(255, 40, 40)'],
['C1_7', 'C2_8', 210, 'color: rgb(255, 192, 192)'],
['C2_7', 'C0_8', 77, 'color: rgb(255, 208, 208)'],
['C2_7', 'C1_8', 106, 'color: rgb(255, 40, 40)'],
['C2_7', 'C2_8', 344, 'color: rgb(255, 192, 192)'],
['C0_8', 'C0_9', 222, 'color: rgb(255, 227, 227)'],
['C0_8', 'C1_9', 24, 'color: rgb(255, 49, 49)'],
['C0_8', 'C2_9', 47, 'color: rgb(255, 191, 191)'],
['C1_8', 'C0_9', 6, 'color: rgb(255, 227, 227)'],
['C1_8', 'C1_9', 367, 'color: rgb(255, 49, 49)'],
['C1_8', 'C2_9', 110, 'color: rgb(255, 191, 191)'],
['C2_8', 'C0_9', 49, 'color: rgb(255, 227, 227)'],
['C2_8', 'C1_9', 147, 'color: rgb(255, 49, 49)'],
['C2_8', 'C2_9', 369, 'color: rgb(255, 191, 191)'],
['C0_9', 'C2_10', 24, 'color: rgb(255, 188, 188)'],
['C0_9', 'C1_10', 9, 'color: rgb(255, 26, 26)'],
['C0_9', 'C0_10', 192, 'color: rgb(255, 204, 204)'],
['C1_9', 'C2_10', 156, 'color: rgb(255, 188, 188)'],
['C1_9', 'C1_10', 332, 'color: rgb(255, 26, 26)'],
['C1_9', 'C0_10', 40, 'color: rgb(255, 204, 204)'],
['C2_9', 'C2_10', 340, 'color: rgb(255, 188, 188)'],
['C2_9', 'C1_10', 90, 'color: rgb(255, 26, 26)'],
['C2_9', 'C0_10', 67, 'color: rgb(255, 204, 204)'],
['C2_10', 'C2_11', 297, 'color: rgb(255, 198, 198)'],
['C2_10', 'C1_11', 137, 'color: rgb(255, 19, 19)'],
['C2_10', 'C0_11', 62, 'color: rgb(255, 237, 237)'],
['C1_10', 'C2_11', 75, 'color: rgb(255, 198, 198)'],
['C1_10', 'C1_11', 319, 'color: rgb(255, 19, 19)'],
['C1_10', 'C0_11', 13, 'color: rgb(255, 237, 237)'],
['C0_10', 'C2_11', 27, 'color: rgb(255, 198, 198)'],
['C0_10', 'C1_11', 23, 'color: rgb(255, 19, 19)'],
['C0_10', 'C0_11', 210, 'color: rgb(255, 237, 237)'],
['C2_11', 'C2_12', 247, 'color: rgb(255, 191, 191)'],
['C2_11', 'C1_12', 95, 'color: rgb(255, 0, 0)'],
['C2_11', 'C0_12', 43, 'color: rgb(255, 226, 226)'],
['C1_11', 'C2_12', 182, 'color: rgb(255, 191, 191)'],
['C1_11', 'C1_12', 267, 'color: rgb(255, 0, 0)'],
['C1_11', 'C0_12', 12, 'color: rgb(255, 226, 226)'],
['C0_11', 'C2_12', 60, 'color: rgb(255, 191, 191)'],
['C0_11', 'C1_12', 9, 'color: rgb(255, 0, 0)'],
['C0_11', 'C0_12', 180, 'color: rgb(255, 226, 226)'],
['C2_12', 'C2_13', 261, 'color: rgb(255, 183, 183)'],
['C2_12', 'C0_13', 98, 'color: rgb(255, 226, 226)'],
['C2_12', 'C1_13', 107, 'color: rgb(255, 20, 20)'],
['C1_12', 'C2_13', 86, 'color: rgb(255, 183, 183)'],
['C1_12', 'C0_13', 12, 'color: rgb(255, 226, 226)'],
['C1_12', 'C1_13', 243, 'color: rgb(255, 20, 20)'],
['C0_12', 'C2_13', 26, 'color: rgb(255, 183, 183)'],
['C0_12', 'C0_13', 166, 'color: rgb(255, 226, 226)'],
['C0_12', 'C1_13', 6, 'color: rgb(255, 20, 20)'],
['C2_13', 'C1_14', 69, 'color: rgb(255, 33, 33)'],
['C2_13', 'C0_14', 62, 'color: rgb(255, 245, 245)'],
['C2_13', 'C2_14', 219, 'color: rgb(255, 142, 142)'],
['C0_13', 'C1_14', 13, 'color: rgb(255, 33, 33)'],
['C0_13', 'C0_14', 185, 'color: rgb(255, 245, 245)'],
['C0_13', 'C2_14', 38, 'color: rgb(255, 142, 142)'],
['C1_13', 'C1_14', 201, 'color: rgb(255, 33, 33)'],
['C1_13', 'C0_14', 3, 'color: rgb(255, 245, 245)'],
['C1_13', 'C2_14', 134, 'color: rgb(255, 142, 142)'],
['C1_14', 'C1_15', 261, 'color: rgb(255, 75, 75)'],
['C1_14', 'C0_15', 12, 'color: rgb(255, 239, 239)'],
['C0_14', 'C1_15', 17, 'color: rgb(255, 75, 75)'],
['C0_14', 'C0_15', 196, 'color: rgb(255, 239, 239)'],
['C2_14', 'C1_15', 275, 'color: rgb(255, 75, 75)'],
['C2_14', 'C0_15', 104, 'color: rgb(255, 239, 239)'],
['C1_15', 'C0_16', 67, 'color: rgb(255, 241, 241)'],
['C1_15', 'C1_16', 464, 'color: rgb(255, 68, 68)'],
['C0_15', 'C0_16', 254, 'color: rgb(255, 241, 241)'],
['C0_15', 'C1_16', 26, 'color: rgb(255, 68, 68)'],
['C0_16', 'C1_17', 36, 'color: rgb(255, 59, 59)'],
['C0_16', 'C0_17', 251, 'color: rgb(255, 242, 242)'],
['C1_16', 'C1_17', 406, 'color: rgb(255, 59, 59)'],
['C1_16', 'C0_17', 61, 'color: rgb(255, 242, 242)'],
['C1_17', 'C1_18', 370, 'color: rgb(255, 64, 64)'],
['C1_17', 'C0_18', 48, 'color: rgb(255, 241, 241)'],
['C0_17', 'C1_18', 40, 'color: rgb(255, 64, 64)'],
['C0_17', 'C0_18', 245, 'color: rgb(255, 241, 241)'],
['C1_18', 'C1_19', 342, 'color: rgb(255, 73, 73)'],
['C1_18', 'C0_19', 41, 'color: rgb(255, 250, 250)'],
['C0_18', 'C1_19', 43, 'color: rgb(255, 73, 73)'],
['C0_18', 'C0_19', 224, 'color: rgb(255, 250, 250)'],
['C1_19', 'C0_20', 43, 'color: rgb(255, 255, 255)'],
['C1_19', 'C1_20', 323, 'color: rgb(255, 84, 84)'],
['C0_19', 'C0_20', 202, 'color: rgb(255, 255, 255)'],
['C0_19', 'C1_20', 41, 'color: rgb(255, 84, 84)'],
['C0_20', 'C1_21', 37, 'color: rgb(255, 97, 97)'],
['C0_20', 'C0_21', 188, 'color: rgb(255, 241, 241)'],
['C1_20', 'C1_21', 290, 'color: rgb(255, 97, 97)'],
['C1_20', 'C0_21', 55, 'color: rgb(255, 241, 241)']
]);
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'
];
// Set chart options
var options = {
height: 400,
sankey: {
node: {
colors: colors,
width: 5,
nodePadding: 1
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
// 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>
Current output:
Solution
I commented a few lines in your code to get the following result. (I also changed the colors of the first three data rows to red, green, and blue to make it clear the link colors are being read from the list. The other links should be colored as expected from the data rows):
I simply commented out part of your chart options that were overriding the styles defined in your rows:
// Set chart options
var options = {
height: 400,
sankey: {
node: {
colors: colors,
width: 5,
nodePadding: 1
},
link: {
// Uncommenting any of these lines overrides the link colors defined in the data above.
// colorMode: 'gradient',
// colors: colors
}
}
};
Full modified code:
<div id="sankey_multiple" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
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.addColumn({
type: 'string',
role: 'style'
});
data.addRows([
['C0_1', 'C0_2', 638, 'color: rgb(255, 0, 0)'], // Color changed to red.
['C0_1', 'C1_2', 164, 'color: rgb(0, 255, 0)'], // Color changed to green.
['C1_1', 'C0_2', 123, 'color: rgb(0, 0, 255)'], // Color changed to blue.
['C1_1', 'C1_2', 1313, 'color: rgb(255, 130, 130)'],
['C0_2', 'C0_3', 555, 'color: rgb(255, 212, 212)'],
['C0_2', 'C1_3', 105, 'color: rgb(255, 127, 127)'],
['C1_2', 'C0_3', 111, 'color: rgb(255, 212, 212)'],
['C1_2', 'C1_3', 1320, 'color: rgb(255, 127, 127)'],
['C0_3', 'C0_4', 495, 'color: rgb(255, 217, 217)'],
['C0_3', 'C1_4', 80, 'color: rgb(255, 119, 119)'],
['C1_3', 'C0_4', 157, 'color: rgb(255, 217, 217)'],
['C1_3', 'C1_4', 1223, 'color: rgb(255, 119, 119)'],
['C0_4', 'C0_5', 374, 'color: rgb(255, 219, 219)'],
['C0_4', 'C1_5', 32, 'color: rgb(255, 66, 66)'],
['C0_4', 'C2_5', 157, 'color: rgb(255, 186, 186)'],
['C1_4', 'C0_5', 91, 'color: rgb(255, 219, 219)'],
['C1_4', 'C1_5', 623, 'color: rgb(255, 66, 66)'],
['C1_4', 'C2_5', 545, 'color: rgb(255, 186, 186)'],
['C0_5', 'C0_6', 299, 'color: rgb(255, 225, 225)'],
['C0_5', 'C1_6', 27, 'color: rgb(255, 63, 63)'],
['C0_5', 'C2_6', 59, 'color: rgb(255, 170, 170)'],
['C1_5', 'C0_6', 13, 'color: rgb(255, 225, 225)'],
['C1_5', 'C1_6', 425, 'color: rgb(255, 63, 63)'],
['C1_5', 'C2_6', 197, 'color: rgb(255, 170, 170)'],
['C2_5', 'C0_6', 136, 'color: rgb(255, 225, 225)'],
['C2_5', 'C1_6', 135, 'color: rgb(255, 63, 63)'],
['C2_5', 'C2_6', 409, 'color: rgb(255, 170, 170)'],
['C0_6', 'C0_7', 273, 'color: rgb(255, 219, 219)'],
['C0_6', 'C1_7', 29, 'color: rgb(255, 62, 62)'],
['C0_6', 'C2_7', 62, 'color: rgb(255, 199, 199)'],
['C1_6', 'C0_7', 12, 'color: rgb(255, 219, 219)'],
['C1_6', 'C1_7', 440, 'color: rgb(255, 62, 62)'],
['C1_6', 'C2_7', 116, 'color: rgb(255, 199, 199)'],
['C2_6', 'C0_7', 49, 'color: rgb(255, 219, 219)'],
['C2_6', 'C1_7', 211, 'color: rgb(255, 62, 62)'],
['C2_6', 'C2_7', 382, 'color: rgb(255, 199, 199)'],
['C0_7', 'C0_8', 239, 'color: rgb(255, 208, 208)'],
['C0_7', 'C1_8', 9, 'color: rgb(255, 40, 40)'],
['C0_7', 'C2_8', 31, 'color: rgb(255, 192, 192)'],
['C1_7', 'C0_8', 39, 'color: rgb(255, 208, 208)'],
['C1_7', 'C1_8', 403, 'color: rgb(255, 40, 40)'],
['C1_7', 'C2_8', 210, 'color: rgb(255, 192, 192)'],
['C2_7', 'C0_8', 77, 'color: rgb(255, 208, 208)'],
['C2_7', 'C1_8', 106, 'color: rgb(255, 40, 40)'],
['C2_7', 'C2_8', 344, 'color: rgb(255, 192, 192)'],
['C0_8', 'C0_9', 222, 'color: rgb(255, 227, 227)'],
['C0_8', 'C1_9', 24, 'color: rgb(255, 49, 49)'],
['C0_8', 'C2_9', 47, 'color: rgb(255, 191, 191)'],
['C1_8', 'C0_9', 6, 'color: rgb(255, 227, 227)'],
['C1_8', 'C1_9', 367, 'color: rgb(255, 49, 49)'],
['C1_8', 'C2_9', 110, 'color: rgb(255, 191, 191)'],
['C2_8', 'C0_9', 49, 'color: rgb(255, 227, 227)'],
['C2_8', 'C1_9', 147, 'color: rgb(255, 49, 49)'],
['C2_8', 'C2_9', 369, 'color: rgb(255, 191, 191)'],
['C0_9', 'C2_10', 24, 'color: rgb(255, 188, 188)'],
['C0_9', 'C1_10', 9, 'color: rgb(255, 26, 26)'],
['C0_9', 'C0_10', 192, 'color: rgb(255, 204, 204)'],
['C1_9', 'C2_10', 156, 'color: rgb(255, 188, 188)'],
['C1_9', 'C1_10', 332, 'color: rgb(255, 26, 26)'],
['C1_9', 'C0_10', 40, 'color: rgb(255, 204, 204)'],
['C2_9', 'C2_10', 340, 'color: rgb(255, 188, 188)'],
['C2_9', 'C1_10', 90, 'color: rgb(255, 26, 26)'],
['C2_9', 'C0_10', 67, 'color: rgb(255, 204, 204)'],
['C2_10', 'C2_11', 297, 'color: rgb(255, 198, 198)'],
['C2_10', 'C1_11', 137, 'color: rgb(255, 19, 19)'],
['C2_10', 'C0_11', 62, 'color: rgb(255, 237, 237)'],
['C1_10', 'C2_11', 75, 'color: rgb(255, 198, 198)'],
['C1_10', 'C1_11', 319, 'color: rgb(255, 19, 19)'],
['C1_10', 'C0_11', 13, 'color: rgb(255, 237, 237)'],
['C0_10', 'C2_11', 27, 'color: rgb(255, 198, 198)'],
['C0_10', 'C1_11', 23, 'color: rgb(255, 19, 19)'],
['C0_10', 'C0_11', 210, 'color: rgb(255, 237, 237)'],
['C2_11', 'C2_12', 247, 'color: rgb(255, 191, 191)'],
['C2_11', 'C1_12', 95, 'color: rgb(255, 0, 0)'],
['C2_11', 'C0_12', 43, 'color: rgb(255, 226, 226)'],
['C1_11', 'C2_12', 182, 'color: rgb(255, 191, 191)'],
['C1_11', 'C1_12', 267, 'color: rgb(255, 0, 0)'],
['C1_11', 'C0_12', 12, 'color: rgb(255, 226, 226)'],
['C0_11', 'C2_12', 60, 'color: rgb(255, 191, 191)'],
['C0_11', 'C1_12', 9, 'color: rgb(255, 0, 0)'],
['C0_11', 'C0_12', 180, 'color: rgb(255, 226, 226)'],
['C2_12', 'C2_13', 261, 'color: rgb(255, 183, 183)'],
['C2_12', 'C0_13', 98, 'color: rgb(255, 226, 226)'],
['C2_12', 'C1_13', 107, 'color: rgb(255, 20, 20)'],
['C1_12', 'C2_13', 86, 'color: rgb(255, 183, 183)'],
['C1_12', 'C0_13', 12, 'color: rgb(255, 226, 226)'],
['C1_12', 'C1_13', 243, 'color: rgb(255, 20, 20)'],
['C0_12', 'C2_13', 26, 'color: rgb(255, 183, 183)'],
['C0_12', 'C0_13', 166, 'color: rgb(255, 226, 226)'],
['C0_12', 'C1_13', 6, 'color: rgb(255, 20, 20)'],
['C2_13', 'C1_14', 69, 'color: rgb(255, 33, 33)'],
['C2_13', 'C0_14', 62, 'color: rgb(255, 245, 245)'],
['C2_13', 'C2_14', 219, 'color: rgb(255, 142, 142)'],
['C0_13', 'C1_14', 13, 'color: rgb(255, 33, 33)'],
['C0_13', 'C0_14', 185, 'color: rgb(255, 245, 245)'],
['C0_13', 'C2_14', 38, 'color: rgb(255, 142, 142)'],
['C1_13', 'C1_14', 201, 'color: rgb(255, 33, 33)'],
['C1_13', 'C0_14', 3, 'color: rgb(255, 245, 245)'],
['C1_13', 'C2_14', 134, 'color: rgb(255, 142, 142)'],
['C1_14', 'C1_15', 261, 'color: rgb(255, 75, 75)'],
['C1_14', 'C0_15', 12, 'color: rgb(255, 239, 239)'],
['C0_14', 'C1_15', 17, 'color: rgb(255, 75, 75)'],
['C0_14', 'C0_15', 196, 'color: rgb(255, 239, 239)'],
['C2_14', 'C1_15', 275, 'color: rgb(255, 75, 75)'],
['C2_14', 'C0_15', 104, 'color: rgb(255, 239, 239)'],
['C1_15', 'C0_16', 67, 'color: rgb(255, 241, 241)'],
['C1_15', 'C1_16', 464, 'color: rgb(255, 68, 68)'],
['C0_15', 'C0_16', 254, 'color: rgb(255, 241, 241)'],
['C0_15', 'C1_16', 26, 'color: rgb(255, 68, 68)'],
['C0_16', 'C1_17', 36, 'color: rgb(255, 59, 59)'],
['C0_16', 'C0_17', 251, 'color: rgb(255, 242, 242)'],
['C1_16', 'C1_17', 406, 'color: rgb(255, 59, 59)'],
['C1_16', 'C0_17', 61, 'color: rgb(255, 242, 242)'],
['C1_17', 'C1_18', 370, 'color: rgb(255, 64, 64)'],
['C1_17', 'C0_18', 48, 'color: rgb(255, 241, 241)'],
['C0_17', 'C1_18', 40, 'color: rgb(255, 64, 64)'],
['C0_17', 'C0_18', 245, 'color: rgb(255, 241, 241)'],
['C1_18', 'C1_19', 342, 'color: rgb(255, 73, 73)'],
['C1_18', 'C0_19', 41, 'color: rgb(255, 250, 250)'],
['C0_18', 'C1_19', 43, 'color: rgb(255, 73, 73)'],
['C0_18', 'C0_19', 224, 'color: rgb(255, 250, 250)'],
['C1_19', 'C0_20', 43, 'color: rgb(255, 255, 255)'],
['C1_19', 'C1_20', 323, 'color: rgb(255, 84, 84)'],
['C0_19', 'C0_20', 202, 'color: rgb(255, 255, 255)'],
['C0_19', 'C1_20', 41, 'color: rgb(255, 84, 84)'],
['C0_20', 'C1_21', 37, 'color: rgb(255, 97, 97)'],
['C0_20', 'C0_21', 188, 'color: rgb(255, 241, 241)'],
['C1_20', 'C1_21', 290, 'color: rgb(255, 97, 97)'],
['C1_20', 'C0_21', 55, 'color: rgb(255, 241, 241)']
]);
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'
];
// Set chart options
var options = {
height: 400,
sankey: {
node: {
colors: colors,
width: 5,
nodePadding: 1
},
link: {
// Uncommenting these lines overrides the link colors defined in the data above.
// colorMode: 'gradient',
// colors: colors
}
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options);
}
</script>
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices