Skip to content

Instantly share code, notes, and snippets.

@1Cr18Ni9

1Cr18Ni9/.block

Last active February 5, 2018 07:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 1Cr18Ni9/7da21701b5dcfce6ec03d0797ac770ee to your computer and use it in GitHub Desktop.
Save 1Cr18Ni9/7da21701b5dcfce6ec03d0797ac770ee to your computer and use it in GitHub Desktop.
Download ZIP
contribution analysis
Raw
.block
license: mit
Raw
README.md

Demo for capability showcase.

Raw
contribute1.json
{
"noteLegendName": "Function",
"color": [
"#1f77b4",
"#ff7f0e",
"#ffbb78",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5",
"#8c564b",
"#c49c94",
"#e377c2",
"#f7b6d2",
"#7f7f7f",
"#c7c7c7",
"#bcbd22",
"#dbdb8d",
"#17becf",
"#9edae5"
],
"isLegendInView": true,
"xLabel": "Samples",
"yLabel": "Relative contribution",
"layerName": [
"norank",
"Sphaerochaeta_pleomorpha",
"Paenirhodobacter_sp._MME-103",
"Pseudomonas_stutzeri",
"Arcobacter_sp._L",
"Subdoligranulum_sp._4_3_54A2FAA",
"Thioclava_indica",
"Clostridium_paraputrificum",
"Brevundimonas_diminuta",
"Sporosarcina_koreensis",
"others"
],
"size": [
500,
500
],
"group": [
{
"layer": [
{
"name": "MP_R2",
"value": [
24842,
0,
10,
6470,
0,
4,
2,
8,
2,
2114,
49080
]
},
{
"name": "MP_TR2",
"value": [
9954,
12,
4,
7258,
2,
0,
0,
5472,
5966,
3954,
59454
]
},
{
"name": "AP_R",
"value": [
964,
1308,
580,
0,
13406,
3274,
250,
202,
484,
0,
54900
]
},
{
"name": "AP_TR",
"value": [
948,
7484,
1440,
0,
110,
3800,
890,
120,
516,
2,
54274
]
},
{
"name": "ACP_R",
"value": [
628,
1944,
6734,
0,
2,
2822,
3848,
608,
12,
2,
55100
]
},
{
"name": "ACP_TR",
"value": [
814,
5908,
7524,
0,
0,
180,
4290,
1530,
12,
0,
47606
]
}
],
"title": "COG0642"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
25574,
18,
6600,
22,
2,
2,
0,
18,
266,
2490,
25078
]
},
{
"name": "MP_TR2",
"value": [
12746,
16,
9574,
46,
6,
4,
0,
10,
2126,
4398,
50032
]
},
{
"name": "AP_R",
"value": [
4036,
3218,
8,
3774,
12496,
384,
248,
3680,
1674,
2,
52944
]
},
{
"name": "AP_TR",
"value": [
3178,
12740,
2,
5642,
46,
896,
770,
2370,
2110,
0,
51038
]
},
{
"name": "ACP_R",
"value": [
2038,
3156,
2,
3560,
4,
4142,
3972,
1446,
1334,
2,
46500
]
},
{
"name": "ACP_TR",
"value": [
2092,
9100,
2,
220,
6,
5102,
4454,
1022,
522,
2,
46254
]
}
],
"title": "COG0745"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
20424,
32,
4,
90,
30,
5536,
5728,
28,
0,
2758,
52030
]
},
{
"name": "MP_TR2",
"value": [
19812,
24,
10,
10356,
58,
1226,
2912,
90,
2,
4578,
87058
]
},
{
"name": "AP_R",
"value": [
16,
5974,
18820,
2,
2068,
168,
10,
2454,
2856,
0,
46158
]
},
{
"name": "AP_TR",
"value": [
10,
8336,
80,
0,
5124,
596,
0,
2936,
3658,
4,
46342
]
},
{
"name": "ACP_R",
"value": [
2,
5410,
2,
12,
1778,
594,
4,
1990,
1012,
106,
55366
]
},
{
"name": "ACP_TR",
"value": [
6,
374,
6,
4,
302,
608,
0,
150,
120,
72,
41318
]
}
],
"title": "COG0840"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
2,
2,
24184,
2,
4,
4,
6914,
6284,
6718,
2,
47008
]
},
{
"name": "MP_TR2",
"value": [
14,
8,
6434,
6,
28,
10,
5764,
1686,
4,
2,
46342
]
},
{
"name": "AP_R",
"value": [
1640,
1568,
998,
682,
2456,
3102,
6,
12,
148,
770,
49504
]
},
{
"name": "AP_TR",
"value": [
3942,
3736,
938,
1556,
8960,
8158,
2,
8,
326,
3334,
39758
]
},
{
"name": "ACP_R",
"value": [
18758,
16972,
686,
10370,
3152,
1960,
0,
0,
62,
0,
23340
]
},
{
"name": "ACP_TR",
"value": [
21408,
20258,
680,
11962,
7062,
1612,
4,
2,
366,
2924,
33792
]
}
],
"title": "COG0841"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
2,
18598,
12144,
12,
7142,
4094,
6004,
2,
2846,
0,
51528
]
},
{
"name": "MP_TR2",
"value": [
8,
8560,
11604,
20,
4314,
6608,
2766,
10,
4324,
4,
57350
]
},
{
"name": "AP_R",
"value": [
1324,
1236,
10,
338,
14,
2,
6,
2310,
2,
2306,
34104
]
},
{
"name": "AP_TR",
"value": [
3368,
1158,
4,
6484,
4,
2,
0,
3256,
6,
2546,
35082
]
},
{
"name": "ACP_R",
"value": [
15180,
1376,
6,
2016,
2,
2,
6,
1704,
48,
2092,
41500
]
},
{
"name": "ACP_TR",
"value": [
16582,
1284,
4,
4956,
2,
2,
2,
112,
16,
274,
38680
]
}
],
"title": "COG1012"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
4,
7580,
2,
0,
4,
4860,
26,
2490,
2,
68,
19754
]
},
{
"name": "MP_TR2",
"value": [
12,
4756,
16,
2,
6,
2354,
30,
4486,
8,
1678,
59672
]
},
{
"name": "AP_R",
"value": [
914,
4336,
2450,
622,
2066,
0,
2076,
2,
2354,
1200,
58918
]
},
{
"name": "AP_TR",
"value": [
2528,
5478,
7462,
1462,
4554,
2,
3440,
0,
2458,
1486,
59090
]
},
{
"name": "ACP_R",
"value": [
11262,
2326,
2066,
6662,
2026,
2,
1364,
0,
2028,
1388,
48672
]
},
{
"name": "ACP_TR",
"value": [
14298,
1926,
5412,
7740,
1106,
0,
102,
4,
90,
704,
39584
]
}
],
"title": "COG1131"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
4,
8,
0,
9712,
4568,
0,
0,
2,
26,
2626,
47116
]
},
{
"name": "MP_TR2",
"value": [
6,
12,
2,
4186,
7694,
2,
0,
0,
4,
6010,
33552
]
},
{
"name": "AP_R",
"value": [
1392,
3954,
944,
1814,
0,
282,
2366,
3084,
4516,
2,
24726
]
},
{
"name": "AP_TR",
"value": [
3392,
12486,
2750,
1474,
4,
5650,
434,
4244,
2670,
2,
35788
]
},
{
"name": "ACP_R",
"value": [
17644,
3078,
12606,
234,
2,
1650,
3648,
2898,
1504,
882,
50826
]
},
{
"name": "ACP_TR",
"value": [
19576,
9276,
5522,
628,
2,
4118,
4030,
190,
1220,
412,
48452
]
}
],
"title": "COG1132"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
2,
280,
9264,
0,
2,
5440,
10,
2,
2210,
4,
57062
]
},
{
"name": "MP_TR2",
"value": [
0,
392,
4910,
0,
0,
2284,
10,
2,
3910,
5038,
54222
]
},
{
"name": "AP_R",
"value": [
780,
2772,
1970,
2948,
288,
8,
2976,
256,
4,
32,
49210
]
},
{
"name": "AP_TR",
"value": [
1814,
8240,
962,
3396,
832,
0,
1380,
572,
2,
10,
44852
]
},
{
"name": "ACP_R",
"value": [
9644,
2420,
752,
2232,
3394,
0,
956,
2574,
20,
0,
52858
]
},
{
"name": "ACP_TR",
"value": [
11576,
8806,
1562,
188,
3872,
0,
836,
2758,
2,
0,
71126
]
}
],
"title": "COG2217"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
230,
73188,
6,
37478,
10,
6,
338,
4,
7534,
12,
157816
]
},
{
"name": "MP_TR2",
"value": [
346,
48320,
16,
25874,
26,
6,
34060,
22110,
13972,
10,
210136
]
},
{
"name": "AP_R",
"value": [
13782,
32,
3206,
4132,
43854,
1454,
16,
1858,
4,
8914,
206140
]
},
{
"name": "AP_TR",
"value": [
55030,
12,
7490,
3274,
318,
3448,
8,
1986,
4,
7490,
232988
]
},
{
"name": "ACP_R",
"value": [
13714,
14,
36048,
2080,
12,
15160,
26,
84,
4,
102,
176342
]
},
{
"name": "ACP_TR",
"value": [
41572,
12,
42108,
2226,
6,
18880,
26,
114,
4,
4558,
171060
]
}
],
"title": "ENOG410XNMH"
},
{
"layer": [
{
"name": "MP_R2",
"value": [
30,
4,
126,
2204,
28,
4,
4,
66,
0,
86,
5332
]
},
{
"name": "MP_TR2",
"value": [
64,
10,
346,
4750,
174,
34,
4,
152,
22,
176,
11266
]
},
{
"name": "AP_R",
"value": [
9704,
6672,
7344,
4848,
2324,
1890,
4220,
5882,
472,
1860,
67672
]
},
{
"name": "AP_TR",
"value": [
9822,
14392,
9160,
5020,
6656,
6590,
4136,
2476,
4794,
2906,
85516
]
},
{
"name": "ACP_R",
"value": [
970,
1718,
126,
1676,
246,
1502,
248,
200,
3186,
918,
25216
]
},
{
"name": "ACP_TR",
"value": [
8126,
992,
4264,
2436,
3038,
1404,
2658,
1026,
950,
2280,
43090
]
}
],
"title": "ENOG410XNNV"
}
],
"title": "Species and functional contribution analysis",
"layerLegendName": "Taxon",
"barOrient": "horizontal",
"innerTitlePrefix": "Function"
}
Raw
contribute2.json
{"noteLegendName":"Function","color":["#1f77b4","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],"isLegendInView":true,"xLabel":"Samples","yLabel":"Relative contribution","layerName":["g__Parabacteroides","g__Veillonella","g__Clostridium","g__Megamonas","g__Bacteroides","g__Ruminococcus","g__unclassified_p__Firmicutes","g__Faecalibacterium","g__Acetobacter","g__Phascolarctobacterium","others"],"size":[500,500],"group":[{"layer":[{"name":"LD27","value":[0,0,0,34,10,0,2,16,0,4,0]},{"name":"HD57","value":[786,870,842,58,544,590,540,346,468,80,24]},{"name":"LD47","value":[18,0,0,54,18,0,20,44,0,58,4]},{"name":"HD59","value":[6,2,2,98,2,0,20,4,0,2,58]},{"name":"HD55","value":[0,0,10,108,22,0,0,12,0,0,42]},{"name":"LD40","value":[0,0,2,0,0,0,0,20,0,0,0]},{"name":"HD6","value":[0,0,0,374,2,0,0,40,0,72,12]},{"name":"HD47","value":[94,0,2,0,8,0,0,26,0,56,18]}],"title":"COG0793"},{"layer":[{"name":"LD27","value":[4,0,10,2,0,2,0,2,110,742,786]},{"name":"HD57","value":[110,786,544,540,24,26,258,82,786,1062,842]},{"name":"LD47","value":[0,18,18,20,4,0,0,0,544,786,58]},{"name":"HD59","value":[14,6,2,20,58,152,6,2,24,544,544]},{"name":"HD55","value":[424,0,22,0,42,12,0,0,192,312,590]},{"name":"LD40","value":[1026,0,0,0,0,2,4,0,258,24,540]},{"name":"HD6","value":[2,0,2,0,12,32,0,20,128,250,346]},{"name":"HD47","value":[10,94,8,0,18,4,0,0,166,232,464]}],"title":"COG1506"},{"layer":[{"name":"LD27","value":[82,0,0,34,10,0,2,16,2,86,8]},{"name":"HD57","value":[798,786,842,58,544,590,540,346,464,270,362]},{"name":"LD47","value":[24,18,0,54,18,0,20,44,8,0,14]},{"name":"HD59","value":[58,6,2,98,2,0,20,4,2,22,16]},{"name":"HD55","value":[2,0,10,108,22,0,0,12,0,14,6]},{"name":"LD40","value":[0,0,2,0,0,0,0,20,0,14,0]},{"name":"HD6","value":[4,0,0,374,2,0,0,40,0,4,10]},{"name":"HD47","value":[16,94,2,0,8,0,0,26,2,2,8]}],"title":"COG2207"},{"layer":[{"name":"LD27","value":[4,0,10,0,0,0,0,0,4,2,22]},{"name":"HD57","value":[110,786,544,24,192,258,128,166,178,76,16]},{"name":"LD47","value":[0,18,18,4,0,0,20,32,10,6,14]},{"name":"HD59","value":[14,6,2,58,14,6,10,4,2,12,6]},{"name":"HD55","value":[424,0,22,42,0,0,10,4,2,22,2]},{"name":"LD40","value":[1026,0,0,0,0,4,10,4,0,0,58]},{"name":"HD6","value":[2,0,2,12,70,0,32,4,2,2,14]},{"name":"HD47","value":[10,94,8,18,0,0,28,0,6,8,6]}],"title":"COG3039"},{"layer":[{"name":"LD27","value":[4,16,0,0,10,0,0,2,6,0,0]},{"name":"HD57","value":[110,742,1062,786,544,312,24,250,232,192,258]},{"name":"LD47","value":[0,124,0,18,18,0,4,0,12,0,0]},{"name":"HD59","value":[14,44,0,6,2,14,58,26,14,14,6]},{"name":"HD55","value":[424,76,0,0,22,0,42,0,8,0,0]},{"name":"LD40","value":[1026,16,0,0,0,0,0,0,0,0,4]},{"name":"HD6","value":[2,0,0,0,2,0,12,0,0,70,0]},{"name":"HD47","value":[10,32,0,94,8,24,18,0,0,0,0]}],"title":"COG3385"},{"layer":[{"name":"LD27","value":[4,0,10,0,8,0,0,0,92,42,2]},{"name":"HD57","value":[110,786,544,258,396,120,0,12,8,4,82]},{"name":"LD47","value":[0,18,18,0,102,38,0,14,54,12,0]},{"name":"HD59","value":[14,6,2,6,40,26,14,14,8,0,2]},{"name":"HD55","value":[424,0,22,0,76,84,6,8,396,120,0]},{"name":"LD40","value":[1026,0,0,4,124,384,188,84,8,76,6]},{"name":"HD6","value":[2,0,2,0,112,38,8,4,84,124,188]},{"name":"HD47","value":[10,94,8,0,74,42,28,26,4,112,8]}],"title":"COG3696"},{"layer":[{"name":"LD27","value":[0,10,0,0,10,10,10,0,0,0,0]},{"name":"HD57","value":[786,544,24,258,544,544,544,4,0,0,2]},{"name":"LD47","value":[18,18,4,0,18,18,18,2,0,2,0]},{"name":"HD59","value":[6,2,58,6,2,2,2,544,420,232,1358]},{"name":"HD55","value":[0,22,42,0,22,22,22,18,0,12,10]},{"name":"LD40","value":[0,0,0,4,0,0,0,2,4,14,0]},{"name":"HD6","value":[0,2,12,0,2,2,2,22,0,8,2]},{"name":"HD47","value":[94,8,18,0,8,8,8,10,18,0,10]}],"title":"ENOG410XQAX"}],"title":"Species and functional contribution analysis","layerLegendName":"Taxon","barOrient":"horizontal","innerTitlePrefix":"Function"}
Raw
contribute3.json
{"noteLegendName":"Function","color":["#1f77b4","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],"isLegendInView":true,"xLabel":"Samples","yLabel":"Relative contribution","layerName":["g__unclassified_o__Bacteroidales","g__Coprococcus","g__Parabacteroides","g__Veillonella","g__Clostridium","others"],"size":[500,500],"group":[{"layer":[{"name":"LD27","value":[34,82,0,0,0,146]},{"name":"HD54","value":[0,28,28,0,0,2]},{"name":"LD87","value":[0,6,76,4,0,120]},{"name":"LD65","value":[0,14,16,0,0,14]},{"name":"LD31","value":[0,0,2,0,0,6]},{"name":"HD57","value":[58,798,786,870,842,188]},{"name":"LD47","value":[54,24,18,0,0,8]},{"name":"HD59","value":[98,58,6,2,2,28]}],"title":"C"},{"layer":[{"name":"LD27","value":[4,16,12,0,0,764]},{"name":"HD54","value":[72,22,4,28,0,996]},{"name":"LD87","value":[150,82,0,76,4,924]},{"name":"LD65","value":[30,12,240,16,0,248]},{"name":"LD31","value":[28,138,0,2,0,1388]},{"name":"HD57","value":[110,742,0,786,870,706]},{"name":"LD47","value":[0,124,326,18,0,260]},{"name":"HD59","value":[14,44,0,6,2,212]}],"title":"G"},{"layer":[{"name":"LD27","value":[4,0,66,0,0,138]},{"name":"HD54","value":[72,0,356,28,0,298]},{"name":"LD87","value":[150,0,486,76,4,2]},{"name":"LD65","value":[30,0,146,16,0,2]},{"name":"LD31","value":[28,0,170,2,0,6]},{"name":"HD57","value":[110,1062,132,786,870,30]},{"name":"LD47","value":[0,0,420,18,0,2124]},{"name":"HD59","value":[14,0,198,6,2,2]}],"title":"J"},{"layer":[{"name":"LD27","value":[16,0,82,0,0,10]},{"name":"HD54","value":[22,0,28,28,0,162]},{"name":"LD87","value":[82,0,6,76,4,16]},{"name":"LD65","value":[12,0,14,16,0,4]},{"name":"LD31","value":[138,0,0,2,0,0]},{"name":"HD57","value":[742,1062,798,786,870,8]},{"name":"LD47","value":[124,0,24,18,0,134]},{"name":"HD59","value":[44,0,58,6,2,526]}],"title":"K"},{"layer":[{"name":"LD27","value":[56,4,16,0,82,0]},{"name":"HD54","value":[4,72,22,0,28,28]},{"name":"LD87","value":[0,150,82,0,6,76]},{"name":"LD65","value":[12,30,12,0,14,16]},{"name":"LD31","value":[14,28,138,0,0,2]},{"name":"HD57","value":[14,110,742,1062,798,786]},{"name":"LD47","value":[8,0,124,0,24,18]},{"name":"HD59","value":[84,14,44,0,58,6]}],"title":"L"},{"layer":[{"name":"LD27","value":[764,4,16,0,82,0]},{"name":"HD54","value":[996,72,22,0,28,28]},{"name":"LD87","value":[924,150,82,0,6,76]},{"name":"LD65","value":[248,30,12,0,14,16]},{"name":"LD31","value":[1388,28,138,0,0,2]},{"name":"HD57","value":[706,110,742,1062,798,786]},{"name":"LD47","value":[260,0,124,0,24,18]},{"name":"HD59","value":[212,14,44,0,58,6]}],"title":"O"},{"layer":[{"name":"LD27","value":[4,16,12,0,82,0]},{"name":"HD54","value":[72,22,4,0,28,28]},{"name":"LD87","value":[150,82,0,0,6,76]},{"name":"LD65","value":[30,12,240,0,14,16]},{"name":"LD31","value":[28,138,0,0,0,2]},{"name":"HD57","value":[110,742,0,1062,798,786]},{"name":"LD47","value":[0,124,326,0,24,18]},{"name":"HD59","value":[14,44,0,0,58,6]}],"title":"V"}],"title":"Species and functional contribution analysis","layerLegendName":"Taxon","barOrient":"horizontal","innerTitlePrefix":"Function"}
Raw
contribute4.json
{"noteLegendName":"Function","color":["#1f77b4","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],"isLegendInView":true,"xLabel":"Samples","yLabel":"Relative contribution","layerName":["g__unclassified_p__Bacteroidetes","g__Tannerella","g__unclassified_o__Bacteroidales","g__Runella","g__Chlamydia","g__Coprococcus","g__Parabacteroides","g__Veillonella","g__Clostridium","g__Sinorhizobium","others"],"size":[500,500],"group":[{"layer":[{"name":"LD27","value":[764,4,16,12,0,82,0,0,0,286,34]},{"name":"HD54","value":[996,72,22,4,0,28,28,0,0,2,0]},{"name":"LD87","value":[924,150,82,0,0,6,76,4,0,8,0]},{"name":"LD65","value":[248,30,12,240,0,14,16,0,0,436,0]},{"name":"LD31","value":[1388,28,138,0,0,0,2,0,0,0,0]},{"name":"HD57","value":[706,110,742,0,1062,798,786,870,842,0,58]},{"name":"LD47","value":[260,0,124,326,0,24,18,0,0,8,54]},{"name":"HD59","value":[212,14,44,0,0,58,6,2,2,0,98]},{"name":"HD55","value":[1322,424,76,0,0,2,0,0,10,0,108]},{"name":"LD40","value":[938,1026,16,0,0,0,0,0,2,4,0]},{"name":"HD6","value":[280,2,0,590,0,4,0,0,0,0,374]},{"name":"HD47","value":[862,10,32,0,0,16,94,0,2,0,0]}],"title":"CELLULAR PROCESSES AND SIGNALING"},{"layer":[{"name":"LD27","value":[764,4,16,0,82,0,0,0,0,286,34]},{"name":"HD54","value":[996,72,22,0,28,28,0,0,0,2,0]},{"name":"LD87","value":[924,150,82,0,6,76,4,0,0,8,0]},{"name":"LD65","value":[248,30,12,0,14,16,0,0,0,436,0]},{"name":"LD31","value":[1388,28,138,0,0,2,0,0,0,0,0]},{"name":"HD57","value":[706,110,742,1062,798,786,870,842,0,0,58]},{"name":"LD47","value":[260,0,124,0,24,18,0,0,0,8,54]},{"name":"HD59","value":[212,14,44,0,58,6,2,2,0,0,98]},{"name":"HD55","value":[1322,424,76,0,2,0,0,10,0,0,108]},{"name":"LD40","value":[938,1026,16,0,0,0,0,2,0,4,0]},{"name":"HD6","value":[280,2,0,0,4,0,0,0,0,0,374]},{"name":"HD47","value":[862,10,32,0,16,94,0,2,828,0,0]}],"title":"INFORMATION STORAGE AND PROCESSING"},{"layer":[{"name":"LD27","value":[4,16,12,0,82,0,0,0,34,10,0]},{"name":"HD54","value":[72,22,4,0,28,28,0,0,0,48,0]},{"name":"LD87","value":[150,82,0,0,6,76,4,0,0,0,0]},{"name":"LD65","value":[30,12,240,0,14,16,0,0,0,4,0]},{"name":"LD31","value":[28,138,0,0,0,2,0,0,0,2,0]},{"name":"HD57","value":[110,742,0,1062,798,786,870,842,58,544,646]},{"name":"LD47","value":[0,124,326,0,24,18,0,0,54,18,0]},{"name":"HD59","value":[14,44,0,0,58,6,2,2,98,2,0]},{"name":"HD55","value":[424,76,0,0,2,0,0,10,108,22,0]},{"name":"LD40","value":[1026,16,0,0,0,0,0,2,0,0,0]},{"name":"HD6","value":[2,0,590,0,4,0,0,0,374,2,0]},{"name":"HD47","value":[10,32,0,0,16,94,0,2,0,8,0]}],"title":"METABOLISM"},{"layer":[{"name":"LD27","value":[4,16,12,0,82,0,0,0,0,34,0]},{"name":"HD54","value":[72,22,4,0,28,28,0,0,0,0,60]},{"name":"LD87","value":[150,82,0,0,6,76,4,0,0,0,0]},{"name":"LD65","value":[30,12,240,0,14,16,0,0,0,0,134]},{"name":"LD31","value":[28,138,0,0,0,2,0,0,0,0,0]},{"name":"HD57","value":[110,742,0,1062,798,786,870,842,0,58,218]},{"name":"LD47","value":[0,124,326,0,24,18,0,0,0,54,0]},{"name":"HD59","value":[14,44,0,0,58,6,2,2,0,98,0]},{"name":"HD55","value":[424,76,0,0,2,0,0,10,0,108,0]},{"name":"LD40","value":[1026,16,0,0,0,0,0,2,0,0,0]},{"name":"HD6","value":[2,0,590,0,4,0,0,0,0,374,0]},{"name":"HD47","value":[10,32,0,0,16,94,0,2,828,0,258]}],"title":"POORLY CHARACTERIZED"}],"title":"Species and functional contribution analysis","layerLegendName":"Taxon","barOrient":"horizontal","innerTitlePrefix":"Function"}
Raw
contribute5.json
{"noteLegendName":"Function","color":["#1f77b4","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],"isLegendInView":true,"xLabel":"Samples","yLabel":"Relative contribution","layerName":["p__Bacteroidetes","p__Proteobacteria","p__Firmicutes","p__Actinobacteria","p__Aquificae","p__Candidatus_Berkelbacteria","p__Candidatus_Giovannonibacteria","p__Chlamydiae","p__Deinococcus-Thermus","others"],"size":[500,500],"group":[{"layer":[{"name":"HP","value":[544,420,544,1358,544,1358,544,544,420,1358]},{"name":"AP","value":[64,90,26,10,8,42,10,22,58,52]}],"title":"K00029"},{"layer":[{"name":"HP","value":[544,420,1358,544,420,1358,544,420,232,544]},{"name":"AP","value":[0,0,4,74,4,16,40,2,16,0]}],"title":"K00525"},{"layer":[{"name":"HP","value":[1358,544,1358,544,544,1358,544,1358,544,420]},{"name":"AP","value":[114,0,10,12,0,0,0,0,2,4]}],"title":"K00986"},{"layer":[{"name":"HP","value":[250,1358,544,420,1358,544,420,232,1358,544]},{"name":"AP","value":[0,50,78,8,20,196,478,514,556,396]}],"title":"K01811"},{"layer":[{"name":"HP","value":[420,1358,544,420,368,204,1358,544,420,1358]},{"name":"AP","value":[318,338,444,302,344,112,372,380,60,322]}],"title":"K02005"},{"layer":[{"name":"HP","value":[544,422,420,204,1358,544,422,420,204,130]},{"name":"AP","value":[46,324,66,302,266,368,308,214,126,158]}],"title":"K03043"},{"layer":[{"name":"HP","value":[1358,544,420,1358,544,1358,544,420,544,1358]},{"name":"AP","value":[298,282,294,204,42,250,362,266,286,206]}],"title":"K03296"},{"layer":[{"name":"HP","value":[544,420,1358,544,420,1358,544,420,1358,544]},{"name":"AP","value":[252,326,184,66,260,248,162,104,316,242]}],"title":"K03526"},{"layer":[{"name":"HP","value":[422,420,232,204,1358,544,420,1358,544,422]},{"name":"AP","value":[120,250,264,250,228,14,0,0,0,2]}],"title":"K03590"},{"layer":[{"name":"HP","value":[420,1358,544,420,204,1358,544,420,1358,544]},{"name":"AP","value":[124,90,128,122,54,44,136,42,56,0]}],"title":"K03696"},{"layer":[{"name":"HP","value":[420,1358,544,420,544,420,1358,544,420,1358]},{"name":"AP","value":[0,74,16,52,20,10,10,10,0,0]}],"title":"K06177"},{"layer":[{"name":"HP","value":[544,420,544,420,1358,544,544,544,1358,544]},{"name":"AP","value":[0,62,26,26,0,0,2,0,0,0]}],"title":"K07277"},{"layer":[{"name":"HP","value":[204,544,420,1358,544,420,544,1358,544,420]},{"name":"AP","value":[44,0,0,14,58,52,10,14,2,244]}],"title":"K12308"}],"title":"Species and functional contribution analysis","layerLegendName":"Taxon","barOrient":"horizontal","innerTitlePrefix":"Function"}
Raw
contribute6.json
{"noteLegendName":"Function","color":["#1f77b4","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],"isLegendInView":true,"xLabel":"Samples","yLabel":"Relative contribution","layerName":["p__Firmicutes","p__Chlamydiae","p__Bacteroidetes","others"],"size":[500,500],"group":[{"layer":[{"name":"LD27","value":[686,374,448,368]},{"name":"HD54","value":[686,374,448,362]},{"name":"HD57","value":[1358,1062,544,422]},{"name":"LD47","value":[10,0,18,30]},{"name":"HD59","value":[0,0,2,20]},{"name":"HD55","value":[34,32,52,40]},{"name":"HD6","value":[20,0,2,0]},{"name":"HD47","value":[120,250,264,250]}],"title":"Cellular Processes"},{"layer":[{"name":"LD27","value":[362,238,292,1030]},{"name":"HD54","value":[368,238,1030,234]},{"name":"HD57","value":[1358,544,422,420]},{"name":"LD47","value":[10,18,30,0]},{"name":"HD59","value":[0,2,20,4]},{"name":"HD55","value":[58,34,62,36]},{"name":"HD6","value":[20,2,0,0]},{"name":"HD47","value":[228,234,324,240]}],"title":"Environmental Information Processing"},{"layer":[{"name":"LD27","value":[234,296,100,312]},{"name":"HD54","value":[296,100,334,230]},{"name":"HD57","value":[1358,1062,544,422]},{"name":"LD47","value":[10,0,18,30]},{"name":"HD59","value":[0,0,2,20]},{"name":"HD55","value":[16,18,42,38]},{"name":"HD6","value":[20,0,2,0]},{"name":"HD47","value":[188,292,234,318]}],"title":"Genetic Information Processing"},{"layer":[{"name":"LD27","value":[334,230,356,126]},{"name":"HD54","value":[356,126,302,244]},{"name":"HD57","value":[1358,544,422,420]},{"name":"LD47","value":[10,18,30,0]},{"name":"HD59","value":[0,2,20,4]},{"name":"HD55","value":[24,50,24,6]},{"name":"HD6","value":[20,2,0,0]},{"name":"HD47","value":[222,198,276,280]}],"title":"Human Diseases"},{"layer":[{"name":"LD27","value":[302,328,272,244]},{"name":"HD54","value":[322,226,414,124]},{"name":"HD57","value":[1358,1062,544,422]},{"name":"LD47","value":[10,0,18,30]},{"name":"HD59","value":[0,0,2,20]},{"name":"HD55","value":[10,0,32,0]},{"name":"HD6","value":[20,0,2,0]},{"name":"HD47","value":[234,288,240,514]}],"title":"Metabolism"},{"layer":[{"name":"LD27","value":[322,226,192,124]},{"name":"HD54","value":[118,314,214,246]},{"name":"HD57","value":[1358,544,422,420]},{"name":"LD47","value":[10,18,30,0]},{"name":"HD59","value":[0,2,20,4]},{"name":"HD55","value":[44,32,18,20]},{"name":"HD6","value":[20,2,0,0]},{"name":"HD47","value":[322,126,158,326]}],"title":"Organismal Systems"}],"title":"Species and functional contribution analysis","layerLegendName":"Taxon","barOrient":"horizontal","innerTitlePrefix":"Function"}
Raw
contribute7.json
{"noteLegendName":"Function","color":["#1f77b4","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],"isLegendInView":true,"xLabel":"Samples","yLabel":"Relativecontribution","layerName":["p__Firmicutes","p__Bacteroidetes","p__Proteobacteria","others"],"size":[500,500],"group":[{"layer":[{"name":"LD27","value":[2,10,0,6]},{"name":"HD54","value":[0,48,0,2]},{"name":"LD65","value":[2,4,0,0]},{"name":"HD57","value":[1358,544,420,232]},{"name":"LD47","value":[10,18,0,12]},{"name":"HD59","value":[0,2,4,14]},{"name":"HD55","value":[2,22,0,8]},{"name":"HD6","value":[20,2,0,0]}],"title":"M00009"},{"layer":[{"name":"LD27","value":[2,10,0,6]},{"name":"HD54","value":[0,48,0,2]},{"name":"LD65","value":[2,4,0,0]},{"name":"HD57","value":[1358,544,420,232]},{"name":"LD47","value":[10,18,0,12]},{"name":"HD59","value":[0,2,4,14]},{"name":"HD55","value":[2,22,0,8]},{"name":"HD6","value":[20,2,0,0]}],"title":"M00015"},{"layer":[{"name":"LD27","value":[2,10,0,2]},{"name":"HD54","value":[0,48,0,2]},{"name":"LD65","value":[2,4,0,0]},{"name":"HD57","value":[1358,544,420,250]},{"name":"LD47","value":[10,18,0,0]},{"name":"HD59","value":[0,2,4,26]},{"name":"HD55","value":[2,22,0,0]},{"name":"HD6","value":[20,2,0,0]}],"title":"M00029"},{"layer":[{"name":"LD27","value":[2,10,2,10]},{"name":"HD54","value":[0,48,0,48]},{"name":"LD65","value":[2,4,2,4]},{"name":"HD57","value":[1358,544,1358,544]},{"name":"LD47","value":[10,18,10,18]},{"name":"HD59","value":[0,2,0,2]},{"name":"HD55","value":[2,22,2,22]},{"name":"HD6","value":[20,2,20,2]}],"title":"M00030"},{"layer":[{"name":"LD27","value":[2,10,0,6]},{"name":"HD54","value":[0,48,0,2]},{"name":"LD65","value":[2,4,0,0]},{"name":"HD57","value":[1358,544,420,232]},{"name":"LD47","value":[10,18,0,12]},{"name":"HD59","value":[0,2,4,14]},{"name":"HD55","value":[2,22,0,8]},{"name":"HD6","value":[20,2,0,0]}],"title":"M00050"},{"layer":[{"name":"LD27","value":[2,10,0,6]},{"name":"HD54","value":[0,48,0,2]},{"name":"LD65","value":[2,4,0,0]},{"name":"HD57","value":[1358,544,420,232]},{"name":"LD47","value":[10,18,0,12]},{"name":"HD59","value":[0,2,4,14]},{"name":"HD55","value":[2,22,0,8]},{"name":"HD6","value":[20,2,0,0]}],"title":"M00060"},{"layer":[{"name":"LD27","value":[2,10,0,2]},{"name":"HD54","value":[0,48,0,0]},{"name":"LD65","value":[2,4,0,2]},{"name":"HD57","value":[1358,544,420,1358]},{"name":"LD47","value":[10,18,0,10]},{"name":"HD59","value":[0,2,4,0]},{"name":"HD55","value":[2,22,0,2]},{"name":"HD6","value":[20,2,0,20]}],"title":"M00080"},{"layer":[{"name":"LD27","value":[0,2,10,0]},{"name":"HD54","value":[0,0,48,0]},{"name":"LD65","value":[0,2,4,0]},{"name":"HD57","value":[420,1358,544,420]},{"name":"LD47","value":[0,10,18,0]},{"name":"HD59","value":[4,0,2,4]},{"name":"HD55","value":[0,2,22,0]},{"name":"HD6","value":[0,20,2,0]}],"title":"M00114"},{"layer":[{"name":"LD27","value":[2,10,0,2]},{"name":"HD54","value":[0,48,0,0]},{"name":"LD65","value":[2,4,0,2]},{"name":"HD57","value":[1358,544,420,1358]},{"name":"LD47","value":[10,18,0,10]},{"name":"HD59","value":[0,2,4,0]},{"name":"HD55","value":[2,22,0,2]},{"name":"HD6","value":[20,2,0,20]}],"title":"M00118"},{"layer":[{"name":"LD27","value":[10,0,2,10]},{"name":"HD54","value":[48,0,0,48]},{"name":"LD65","value":[4,0,2,4]},{"name":"HD57","value":[544,420,1358,544]},{"name":"LD47","value":[18,0,10,18]},{"name":"HD59","value":[2,4,0,2]},{"name":"HD55","value":[22,0,2,22]},{"name":"HD6","value":[2,0,20,2]}],"title":"M00124"},{"layer":[{"name":"LD27","value":[2,10,0,0]},{"name":"HD54","value":[0,48,0,0]},{"name":"LD65","value":[2,4,0,0]},{"name":"HD57","value":[1358,544,420,204]},{"name":"LD47","value":[10,18,0,0]},{"name":"HD59","value":[0,2,4,0]},{"name":"HD55","value":[2,22,0,0]},{"name":"HD6","value":[20,2,0,0]}],"title":"M00144"},{"layer":[{"name":"LD27","value":[0,2,0,2]},{"name":"HD54","value":[0,2,0,0]},{"name":"LD65","value":[0,0,0,2]},{"name":"HD57","value":[420,250,204,1358]},{"name":"LD47","value":[0,0,0,10]},{"name":"HD59","value":[4,26,0,0]},{"name":"HD55","value":[0,0,0,2]},{"name":"HD6","value":[0,0,0,20]}],"title":"M00125"},{"layer":[{"name":"LD27","value":[10,0,2,10]},{"name":"HD54","value":[48,0,0,48]},{"name":"LD65","value":[4,0,2,4]},{"name":"HD57","value":[544,420,1358,544]},{"name":"LD47","value":[18,0,10,18]},{"name":"HD59","value":[2,4,0,2]},{"name":"HD55","value":[22,0,2,22]},{"name":"HD6","value":[2,0,20,2]}],"title":"M00153"},{"layer":[{"name":"LD27","value":[2,0,0,0]},{"name":"HD54","value":[0,0,0,0]},{"name":"LD65","value":[0,0,0,0]},{"name":"HD57","value":[422,420,204,130]},{"name":"LD47","value":[30,0,0,0]},{"name":"HD59","value":[20,4,0,42]},{"name":"HD55","value":[0,0,0,0]},{"name":"HD6","value":[0,0,0,0]}],"title":"M00183"},{"layer":[{"name":"LD27","value":[2,10,0,2]},{"name":"HD54","value":[0,48,0,0]},{"name":"LD65","value":[2,4,0,2]},{"name":"HD57","value":[1358,544,420,1358]},{"name":"LD47","value":[10,18,0,10]},{"name":"HD59","value":[0,2,4,0]},{"name":"HD55","value":[2,22,0,2]},{"name":"HD6","value":[20,2,0,20]}],"title":"M00210"},{"layer":[{"name":"LD27","value":[2,10,0,0]},{"name":"HD54","value":[0,48,0,2]},{"name":"LD65","value":[2,4,0,0]},{"name":"HD57","value":[1358,544,420,368]},{"name":"LD47","value":[10,18,0,0]},{"name":"HD59","value":[0,2,4,0]},{"name":"HD55","value":[2,22,0,0]},{"name":"HD6","value":[20,2,0,0]}],"title":"M00260"},{"layer":[{"name":"LD27","value":[0,2,10,2]},{"name":"HD54","value":[0,0,48,0]},{"name":"LD65","value":[0,2,4,2]},{"name":"HD57","value":[204,1358,544,1358]},{"name":"LD47","value":[0,10,18,10]},{"name":"HD59","value":[0,0,2,0]},{"name":"HD55","value":[0,2,22,2]},{"name":"HD6","value":[0,20,2,20]}],"title":"M00279"},{"layer":[{"name":"LD27","value":[0,2,10,0]},{"name":"HD54","value":[0,0,48,0]},{"name":"LD65","value":[0,2,4,0]},{"name":"HD57","value":[420,1358,544,204]},{"name":"LD47","value":[0,10,18,0]},{"name":"HD59","value":[4,0,2,0]},{"name":"HD55","value":[0,2,22,0]},{"name":"HD6","value":[0,20,2,0]}],"title":"M00356"},{"layer":[{"name":"LD27","value":[2,10,0,2]},{"name":"HD54","value":[0,48,0,0]},{"name":"LD65","value":[2,4,0,2]},{"name":"HD57","value":[1358,544,420,1358]},{"name":"LD47","value":[10,18,0,10]},{"name":"HD59","value":[0,2,4,0]},{"name":"HD55","value":[2,22,0,2]},{"name":"HD6","value":[20,2,0,20]}],"title":"M00364"},{"layer":[{"name":"LD27","value":[10,10,2,10]},{"name":"HD54","value":[48,48,0,48]},{"name":"LD65","value":[4,4,2,4]},{"name":"HD57","value":[544,544,1358,544]},{"name":"LD47","value":[18,18,10,18]},{"name":"HD59","value":[2,2,0,2]},{"name":"HD55","value":[22,22,2,22]},{"name":"HD6","value":[2,2,20,2]}],"title":"M00526"},{"layer":[{"name":"LD27","value":[0,2,10,0]},{"name":"HD54","value":[0,0,48,0]},{"name":"LD65","value":[0,2,4,0]},{"name":"HD57","value":[420,1358,544,420]},{"name":"LD47","value":[0,10,18,0]},{"name":"HD59","value":[4,0,2,4]},{"name":"HD55","value":[0,2,22,0]},{"name":"HD6","value":[0,20,2,0]}],"title":"M00549"},{"layer":[{"name":"LD27","value":[2,6,0,2]},{"name":"HD54","value":[2,2,0,0]},{"name":"LD65","value":[0,0,0,2]},{"name":"HD57","value":[250,232,152,1358]},{"name":"LD47","value":[0,12,0,10]},{"name":"HD59","value":[26,14,0,0]},{"name":"HD55","value":[0,8,0,2]},{"name":"HD6","value":[0,0,0,20]}],"title":"M00627"},{"layer":[{"name":"LD27","value":[10,0,2,10]},{"name":"HD54","value":[48,0,0,48]},{"name":"LD65","value":[4,0,2,4]},{"name":"HD57","value":[544,420,1358,544]},{"name":"LD47","value":[18,0,10,18]},{"name":"HD59","value":[2,4,0,2]},{"name":"HD55","value":[22,0,2,22]},{"name":"HD6","value":[2,0,20,2]}],"title":"M00631"},{"layer":[{"name":"LD27","value":[0,2,10,0]},{"name":"HD54","value":[0,0,48,0]},{"name":"LD65","value":[0,2,4,0]},{"name":"HD57","value":[420,1358,544,420]},{"name":"LD47","value":[0,10,18,0]},{"name":"HD59","value":[4,0,2,4]},{"name":"HD55","value":[0,2,22,0]},{"name":"HD6","value":[0,20,2,0]}],"title":"M00646"}],"title":"Speciesandfunctionalcontributionanalysis","layerLegendName":"Taxon","barOrient":"horizontal","innerTitlePrefix":"Function"}
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="myJS.js"></script>
<style>
*{margin: 0; padding: 0}
svg{ border: 1px solid gray; }
#abc{ margin-top: 50px; }
#abc span{
display: inline-block;
width: 35px;
background-color: steelblue;
margin: auto 5px;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
#abc span.selected{
background-color: green;
color: white;
}
.container{
overflow: auto;
}
.extra-tip{
position: fixed;
max-width: 200px;
left: -9999px;
background-color: white;
border: 1px solid gray;
border-radius: 5px;
font: 12px;
overflow-wrap: break-word;
word-wrap: break-word;
}
.extra-tip > .extra-tip-content{
padding: 5px;
}
.extra-tip .extra-tip-content a{
text-decoration: none;
}
.extra-tip > .extra-tip-arrow{
position: absolute;
height: 10px;
width: 100%;
top: 100%;
/* indicate area when needed */
background-color: rgba(200,100,0,0);
}
.extra-tip .extra-tip-wrapper{
position: absolute;
left: 50%;
}
.extra-tip .extra-tip-wrapper:before,
.extra-tip .extra-tip-wrapper:after{
content: " ";
width: 0;
height: 0;
top: 100%;
position: absolute;
border: solid transparent;
pointer-events: none;
}
.extra-tip .extra-tip-wrapper:before{
border-width: 10px;
border-top-color: gray;
left: -8px;
}
.extra-tip .extra-tip-wrapper:after{
border-width: 8px;
border-top-color: white;
left: -6px;
}
</style>
</head>
<body>
<div id="abc"></div>
<form action="." name="choose">
<p><label><input type="radio" name="orient" value="horizontal" checked>horizontal</label></p>
<p><label><input type="radio" name="orient" value="vertical">vertical</label></p>
</form>
<div id="container"></div>
<script>
var form = d3.select("form[name=choose]");
d3.select("#abc")
.selectAll("span")
.data(d3.range(1, 8))
.enter()
.append("span")
.each(function(d){
var self = d3.select(this);
self.text(d);
self.on("click", function(e){
if(!this.classList.contains("selected")){
d3.json("contribute" + e + ".json", function(err, data){
if(err){ return console.log(err); }
var orientation = form.node().elements.orient.value;
data.barOrient = orientation;
d3.svg.contributeBar("container", data);
});
d3.selectAll("#abc span").classed("selected", false);
this.classList.add("selected");
}
});
});
form.selectAll("input[name=orient]").on("change", function(){
//console.log(this.value);
var e = d3.select("#abc span.selected").datum(),
orientation = this.value;
d3.json("contribute" + e + ".json", function(err, data){
if(err){ return console.log(err); }
data.barOrient = orientation;
d3.svg.contributeBar("container", data);
});
});
d3.select("#abc span").node().click();
d3.select(self.frameElement)
.style({
width: 950 + "px",
height: 750 + "px",
overflow: "auto"
});
</script>
</body>
Raw
myJS.js
d3.svg.contributeBar = function(id, options){
var opt = {
title : "",
xLabel : "",
yLabel : "",
isLegendInView : true,
color : d3.scale.category20().range(),
size : [500, 500],
layerName : [],
layerLegendName : "Layer",
noteLegendName : "Note",
barOrient : "horizontal",
innerTitlePrefix : "Function",
group : []
};
// Make a brand-new "options" in case of contamination
_.extend(opt, JSON.parse(JSON.stringify(options)));
// If colors is not satisfy that we need brighten them and added to that color array
(function(){
function brighter(n, colorArray){
var colors = colorArray.slice(), nArray = colorArray.slice(), i = 0;
for(i; i < n; i++){
colors = colors.map(function(color){
return d3.hcl(color).brighter().toString();
});
nArray = nArray.concat(colors);
}
return nArray;
}
if(opt.color.length < 1){
opt.color = d3.scale.category20().range();
}
if(opt.color.length < opt.layerName.length){
opt.color = brighter(Math.ceil(opt.layerName.length / opt.color.length) - 1, opt.color);
}
})();
var margin = { top: 60, right: 30, bottom: 30, left: 30 },
// chart related variant
svg, svgWidth, svgHeight, gMain, gLegend, gNote,
// Normal gadget
stack = d3.layout.stack().offset("expand"),
barExtendScale = d3.scale.linear().domain([0,1]),
barGroupScale = d3.scale.ordinal(),
barInnerScale = d3.scale.ordinal(),
barExtendAxis = d3.svg.axis().ticks(5),
barInnerAxis = d3.svg.axis(),
f1 = d3.format("002d"), // 1 >> "01", 9 >> "09", 12 >> "12"
f2 = d3.format(".2%"), // 0.12356254 >> "12.36%"
// legend realted variant
layerLegendWidth = 0, layerLegendHeight = 0,
noteLegendWidth = 0, noteLegendHeight = 0,
noteData = opt.group.map(function(d, i){
return opt.innerTitlePrefix + f1(i + 1) + ": " + d.title;
}),
lgdRectSize = 10, lgdRowHeight = lgdRectSize + 5, lgdGap = 10,
// <SVG> is rendered or not
isVisible = false,
mainTitleWidth, tooltip,
// descending sort function for array that containing strings
descending = function(a, b){ return b.length - a.length; },
barTickBox,
barTickName = opt.group[0].layer.map(function(d){ return d.name; }),
barInnerPadding = 5, barTitleHeight = 25,
minBarWidth = 20, minBarGroupWidth, minBarGroupHeight = 250;
tooltip = document.getElementById("extra-tip");
if(!tooltip){
tooltip = d3.select("body")
.append("div")
.attr({id: "extra-tip", class: "extra-tip"})
.html('<div class="extra-tip-content"></div><div class="extra-tip-arrow"><div class="extra-tip-wrapper"></div></div>')
.node();
}
// Anonymous function for data processing
(function(){
/*
------------------------------- Methodology Illustration -------------------------------
opt.layerName:
["Apple", "Bananer", "Juice", "others"]
simplified opt.group:
[
{
layer:[ { value: [75, 63, 54, 46] }, { value: [65, 44, 35, 54] }, { value: [98, 23, 57, 43] } ]
},
{
layer: [ { value: [98, 43, 55, 74] }, { value: [43, 57, 45, 79] }, { value: [78, 34, 55, 49] } ]
},
{
layer: [ { value: [29, 34, 85, 87] }, { value: [83, 45, 77, 82] }, { value: [35, 34, 54, 43] } ]
}
]
Turned into "layer" variant(sort according to total value):
[
{"layer":"Apple", "value":[[75,65,98],[98,43,78],[29,83,35]], "total":604},
{"layer":"others", "value":[[46,54,43],[74,79,49],[87,82,43]], "total":557},
{"layer":"Juice", "value":[[54,35,57],[55,45,55],[85,77,54]], "total":517},
{"layer":"Bananer", "value":[[63,44,23],[43,57,34],[34,45,34]], "total":377}
]
If there is a layer called "others" move it to up most position.
[
{"layer":"Apple", "value":[[75,65,98],[98,43,78],[29,83,35]],"total":604},
{"layer":"Juice", "value":[[54,35,57],[55,45,55],[85,77,54]],"total":517},
{"layer":"Bananer", "value":[[63,44,23],[43,57,34],[34,45,34]],"total":377},
{"layer":"others", "value":[[46,54,43],[74,79,49],[87,82,43]],"total":557}
]
Then reassign "opt.group.layer.value" and "opt.layerName" with the sorted layer variant.
*/
var layer, otherIndex, values;
values = opt.group.map(function (d) {
return d.layer.map(function (e) {
return e.value;
});
});
layer = _.unzip(values.map(function(d){ return _.unzip(d); }))
.map(function(d, i){
return {
layer: opt.layerName[i],
value: d,
total: _.reduce(_.flatten(d), function(memo, num){ return memo + num; }, 0)
};
})
.sort(function(a, b){ return b.total - a.total; });
otherIndex = _.findIndex(layer, function(d){ return d.layer.toLowerCase() === "others"; });
if( (otherIndex !== -1) && (otherIndex < (layer.length - 1)) ){
layer.push(layer.splice(otherIndex, 1)[0]);
}
// Re-assignment of "otp.layerName" and "opt.group[n].layer[n].value"
opt.layerName = layer.map(function(d){ return d.layer; });
opt.group.forEach(function(D, I){
var temp = _.unzip(layer.map(function(d){ return d.value[I]; }));
D.layer.forEach(function(d, i){
d.value = temp[i];
d.total = _.reduce(temp[i], function(memo, num){ return memo + num; }, 0);
});
});
})(); // Anonymous function END
// Initial SVG
svg = d3.select("#" + id)
.html("")
.append("svg")
.attr({
width : 50,
height : 50,
version : 1.1,
"shape-rendering" :"crispEdges",
xmlns : "http://www.w3.org/2000/svg"
})
.style("font", "12px arial, sans-serif");
// Detecting if present <SVG> is rendered or not
if(fetchLength("ABCDEFG") && fetchLength("ABCDEFG").width){ isVisible = true; }
if(isVisible){
minBarGroupWidth = Math.ceil(fetchLength(opt.innerTitlePrefix + "00").width) + 10;
barTickBox = fetchLength(barTickName.slice().sort(descending)[0]);
mainTitleWidth = fetchLength(opt.title, {"font": "15px arial, sans-serif"}).width;
}else{
minBarGroupWidth = (opt.innerTitlePrefix + "00").length * 8.2;
barTickBox = { width: barTickName.slice().sort(descending)[0].length * 8.2, height: 15 };
mainTitleWidth = opt.title.length * 9;
}
if(minBarGroupWidth < minBarWidth * opt.group[0].layer.length){
minBarGroupWidth = minBarWidth * opt.group[0].layer.length;
}
// legends size calculation
(function(){
if(!opt.isLegendInView){ return; }
// First item will be prefix title
noteData.unshift(opt.noteLegendName + ":");
var longestLayerName = opt.layerName.slice().sort(descending)[0],
longestNoteName = noteData.slice().sort(descending)[0];
if(isVisible){
layerLegendWidth = fetchLength(longestLayerName).width;
noteLegendWidth = fetchLength(longestNoteName).width;
}else{
layerLegendWidth = longestLayerName.length * 8.2;
noteLegendWidth = longestNoteName.length * 8.2;
}
layerLegendWidth = Math.ceil(layerLegendWidth) + 5 + lgdRectSize + lgdGap;
noteLegendWidth = Math.ceil(noteLegendWidth) + 5;
layerLegendHeight = (opt.layerName.length + 1) * lgdRowHeight;
noteLegendHeight = (opt.group.length + 1) * lgdRowHeight;
})();
// Different orientation with different layout
if(opt.barOrient === "horizontal"){
horizontal();
}else if(opt.barOrient === "vertical"){
vertical();
}else{
return alert("Invalid orientation key word: " + opt.barOrient);
}
function horizontal(){
var yAxisCompensateWidth = 50, xAxisCompensateHeight = 30,
plotWidth = Math.max(opt.group.length * minBarGroupWidth, mainTitleWidth),
plotHeight = minBarGroupHeight,
legendsWidth = 0,
isLegendsVerticalLayoutPossible = false;
// @ Calculate svgHeight
svgHeight = margin.top + margin.bottom +
Math.max(layerLegendHeight,
noteLegendHeight,
minBarGroupHeight + barTickBox.width + xAxisCompensateHeight);
if( (minBarGroupHeight + barTickBox.width + xAxisCompensateHeight) < Math.max(layerLegendHeight, noteLegendHeight) ){
plotHeight = Math.max(layerLegendHeight, noteLegendHeight) -
(barTickBox.width + xAxisCompensateHeight);
}
if(svgHeight < opt.size[1]){
svgHeight = opt.size[1];
plotHeight = svgHeight -
(margin.top + margin.bottom + barTickBox.width + xAxisCompensateHeight);
}
if((plotHeight + barTickBox.width + xAxisCompensateHeight) >= (layerLegendHeight + noteLegendHeight + 10)){
isLegendsVerticalLayoutPossible = true;
}
// @ Calculate legends width
if(opt.isLegendInView){
if(isLegendsVerticalLayoutPossible){
// portrait layout
legendsWidth = Math.max(layerLegendWidth, noteLegendWidth) + lgdGap;
}else{
// landscape layout
legendsWidth = lgdGap * 2 + layerLegendWidth + noteLegendWidth;
}
}
// @ Calculate svgWidth
svgWidth = margin.left + margin.right + yAxisCompensateWidth + plotWidth + legendsWidth;
if(svgWidth < opt.size[0]){
svgWidth = opt.size[0];
plotWidth = svgWidth - (margin.left + margin.right + yAxisCompensateWidth + legendsWidth);
}
// UPDATE
svg.attr({ width: svgWidth, height: svgHeight });
barExtendScale.range([0, plotHeight - barInnerPadding * 2 - barTitleHeight]);
barExtendAxis.orient("left").scale(barExtendScale.copy().domain([1, 0]));
barGroupScale.rangeBands([0, plotWidth], 0.05, 0).domain(d3.range(opt.group.length));
barInnerScale.rangeBands([0, barGroupScale.rangeBand()], 0.2, 0.2).domain(barTickName);
barInnerAxis.orient("bottom").scale(barInnerScale);
//var gAxis;
gMain = svg.append("g").attr({
class : "gMain",
transform : "translate(" + [margin.left + yAxisCompensateWidth, margin.top] + ")"
});
gMain.append("g")
.attr("class", "gBlock")
.selectAll("gUnit")
.data(opt.group)
.enter()
.append("g")
.attr("class", "gUnit")
.each(function(d, i){
var self = d3.select(this), stackData;
self.attr("transform", "translate(" + barGroupScale.range()[i] + ",0)");
self.append("rect").attr({
class : "bigRect",
width : barGroupScale.rangeBand(),
height : plotHeight,
stroke : "gray",
"stroke-width": 1,
fill : "transparent"
});
self.append("rect").attr({
class : "innerRect",
width : barGroupScale.rangeBand(),
height : barTitleHeight,
stroke : "gray",
fill : "#adadad",
"stroke-width": 1
});
self.append("text").attr({
class : "group-title",
x : barGroupScale.rangeBand() * 0.5,
y : barTitleHeight * 0.5 + 3,
fill : "black",
"text-anchor" : "middle"
})
.text(opt.innerTitlePrefix + f1(i + 1))
.append("title")
.text(d.title);
stackData = d.layer.map(function(e){
return e.value.map(function(j, i){
return { x: e.name, y: j, _y: j, _t: e.total, color: opt.color[i], layer: opt.layerName[i] };
});
});
stackData = _.unzip(stackData);
self.append("g")
.attr({
class: "inner-group",
transform: "translate(0," + (plotHeight - barInnerPadding) + ")"
})
.selectAll(".gLayer")
.data(stack(stackData))
.enter()
.append("g")
.attr("class", "gLayer")
.selectAll("rect")
.data(function(d){ return d; })
.enter()
.append("rect")
.on("mouseenter", onMouseEnter)
.on("mouseleave", onMouseLeave)
.style("display", visible)
.attr({
width : barInnerScale.rangeBand(),
height : function(e){ return barExtendScale(e.y); },
fill : function(e){ return e.color; },
stroke : "transparent",
"stroke-width": 1,
transform: function(e){ return "translate(" +
[barInnerScale(e.x), -barExtendScale(e.y0 + e.y)] + ")"; },
});
self.select("g.inner-group")
.append("g")
.attr("class", "innerAxis")
.call(barInnerAxis)
.call(function(axis){
axis.select("path").attr("fill", "transparent");
axis.selectAll(".tick text")
.style("text-anchor","end")
.attr({ transform: "rotate(-45)", x: -5, y: 8 });
});
}); // each END
// Y axis and X label
gMain.select(".gBlock")
.append("g")
.attr({
class: "axis gYAxis",
transform: "translate(0," + (barInnerPadding + barTitleHeight) + ")"
})
.call(barExtendAxis)
.call(function(axis){
axis.select("path").attr("fill", "transparent");
axis.selectAll(".tick line").attr("stroke", "black");
axis.append("text")
.text(opt.yLabel)
.attr({
transform: "rotate(-90)translate(" +
[-barExtendScale.range()[1] * 0.5, -40] + ")",
"text-anchor": "middle"
});
});
gMain.select(".gBlock")
.append("g")
.attr({
class: "axis gXAxis",
transform: "translate(" +
[plotWidth * 0.5, plotHeight + barTickBox.width + xAxisCompensateHeight * 0.6] + ")"
})
.append("text")
.attr("text-anchor", "middle")
.text(opt.xLabel);
// Main title
gMain.select(".gBlock")
.append("text")
.attr({
class: "main-title",
x: plotWidth * 0.5,
y: -25,
"text-anchor": "middle"
})
.style("font", "15px arial, sans-serif")
.text(opt.title);
// Legend layout
if(isLegendsVerticalLayoutPossible){
gLegend = gMain.append("g").attr({
class: "gLegend",
transform: "translate(" + (plotWidth + lgdGap) + ",0)"
});
gNote = gMain.append("g").attr({
class: "gNote",
transform: "translate(" + [plotWidth + lgdGap, layerLegendHeight + 10] + ")"
});
}else{
gLegend = gMain.append("g").attr({
class: "gLegend",
transform: "translate(" + (plotWidth + lgdGap) + ",0)"
});
gNote = gMain.append("g").attr({
class: "gNote",
transform: "translate(" + (plotWidth + lgdGap + layerLegendWidth + lgdGap) + ",0)"
});
}
} // horizontal END
function vertical(){
var yAxisCompensateWidth = barTickBox.width + 30, xAxisCompensateHeight = 50,
plotWidth = Math.max(minBarGroupHeight, mainTitleWidth),
plotHeight = opt.group.length * minBarGroupWidth,
legendsWidth = 0,
isLegendsVerticalLayoutPossible = false;
// @ Calculate svgHeight
svgHeight = margin.top + margin.bottom +
Math.max(layerLegendHeight,
noteLegendHeight,
plotHeight + xAxisCompensateHeight);
if( (plotHeight + xAxisCompensateHeight) < Math.max(layerLegendHeight, noteLegendHeight) ){
plotHeight = Math.max(layerLegendHeight, noteLegendHeight) - xAxisCompensateHeight;
}
if(svgHeight < opt.size[1]){
svgHeight = opt.size[1];
plotHeight = svgHeight -
(margin.top + margin.bottom + xAxisCompensateHeight);
}
if((plotHeight + xAxisCompensateHeight) >= (layerLegendHeight + noteLegendHeight + 10)){
isLegendsVerticalLayoutPossible = true;
}
// @ Calculate legends width
if(opt.isLegendInView){
if(isLegendsVerticalLayoutPossible){
// portrait layout
legendsWidth = Math.max(layerLegendWidth, noteLegendWidth) + lgdGap;
}else{
// landscape layout
legendsWidth = lgdGap * 2 + layerLegendWidth + noteLegendWidth;
}
}
// @ Calculate svgWidth
svgWidth = margin.left + margin.right + yAxisCompensateWidth + plotWidth + legendsWidth;
if(svgWidth < opt.size[0]){
svgWidth = opt.size[0];
plotWidth = svgWidth - (margin.left + margin.right + yAxisCompensateWidth + legendsWidth);
}
// UPDATE
svg.attr({ width: svgWidth, height: svgHeight });
barExtendScale.range([0, plotWidth - barInnerPadding * 2 - barTitleHeight]);
barExtendAxis.orient("bottom").scale(barExtendScale);
barGroupScale.rangeBands([0, plotHeight], 0.05, 0).domain(d3.range(opt.group.length));
barInnerScale.rangeBands([0, barGroupScale.rangeBand()], 0.2, 0.2).domain(barTickName);
barInnerAxis.orient("left").scale(barInnerScale);
//var gAxis;
gMain = svg.append("g").attr({
class : "gMain",
transform : "translate(" + [margin.left + yAxisCompensateWidth, margin.top] + ")"
});
gMain.append("g")
.attr("class", "gBlock")
.selectAll("gUnit")
.data(opt.group)
.enter()
.append("g")
.attr("class", "gUnit")
.each(function(d, i){
var self = d3.select(this), stackData;
self.attr("transform", "translate(0," + barGroupScale.range()[i] + ")");
self.append("rect").attr({
class : "bigRect",
width : plotWidth,
height : barGroupScale.rangeBand(),
stroke : "gray",
"stroke-width": 1,
fill : "transparent"
});
self.append("rect").attr({
class : "innerRect",
width : barTitleHeight,
height : barGroupScale.rangeBand(),
stroke : "gray",
fill : "#adadad",
"stroke-width": 1,
transform : "translate(" + (plotWidth - barTitleHeight) + ",0)"
});
self.append("text").attr({
class : "group-title",
fill : "black",
"text-anchor" : "middle",
transform : "rotate(90)translate(" +
[0.5 * barGroupScale.rangeBand(),
-(plotWidth - barTitleHeight * 0.5 - 5)] + ")",
})
.text(opt.innerTitlePrefix + f1(i + 1))
.append("title")
.text(d.title);
stackData = d.layer.map(function(e){
return e.value.map(function(j, i){
return { x: e.name, y: j, _y: j, _t: e.total, color: opt.color[i], layer: opt.layerName[i] };
});
});
stackData = _.unzip(stackData);
self.append("g")
.attr({
class: "inner-group",
transform: "translate(" + barInnerPadding + ",0)"
})
.selectAll(".gLayer")
.data(stack(stackData))
.enter()
.append("g")
.attr("class", "gLayer")
.selectAll("rect")
.data(function(d){ return d; })
.enter()
.append("rect")
.on("mouseenter", onMouseEnter)
.on("mouseleave", onMouseLeave)
.style("display", visible)
.attr({
width : function(e){ return barExtendScale(e.y); },
height : barInnerScale.rangeBand(),
fill : function(e){ return e.color; },
stroke : "transparent",
"stroke-width": 1,
transform: function(e){ return "translate(" +
[barExtendScale(e.y0), barInnerScale(e.x), ] + ")"; },
});
self.select("g.inner-group")
.append("g")
.attr("class", "innerAxis")
.call(barInnerAxis)
.call(function(axis){
axis.select("path").attr("fill", "transparent");
});
}); // each END
// Y axis and X label
gMain.select(".gBlock")
.append("g")
.attr({
class: "axis gYAxis",
transform: "translate(" + [barInnerPadding, plotHeight] + ")"
})
.call(barExtendAxis)
.call(function(axis){
axis.select("path").attr("fill", "transparent");
axis.selectAll(".tick line").attr("stroke", "black");
axis.append("text")
.text(opt.yLabel)
.attr({
transform: "translate(" +
[barExtendScale.range()[1] * 0.5, 40] + ")",
"text-anchor": "middle"
});
});
gMain.select(".gBlock")
.append("g")
.attr({
class: "axis gXAxis",
transform: "translate(" +
[-yAxisCompensateWidth, plotHeight * 0.5] + ")"
})
.append("text")
.attr({"text-anchor": "middle", transform: "rotate(-90)"})
.text(opt.xLabel);
// Main title
gMain.select(".gBlock")
.append("text")
.attr({
class: "main-title",
x: plotWidth * 0.5,
y: -25,
"text-anchor": "middle"
})
.style("font", "15px arial, sans-serif")
.text(opt.title);
// Legend layout
if(isLegendsVerticalLayoutPossible){
gLegend = gMain.append("g").attr({
class: "gLegend",
transform: "translate(" + (plotWidth + lgdGap) + ",0)"
});
gNote = gMain.append("g").attr({
class: "gNote",
transform: "translate(" + [plotWidth + lgdGap, layerLegendHeight + 10] + ")"
});
}else{
gLegend = gMain.append("g").attr({
class: "gLegend",
transform: "translate(" + (plotWidth + lgdGap) + ",0)"
});
gNote = gMain.append("g").attr({
class: "gNote",
transform: "translate(" + (plotWidth + lgdGap + layerLegendWidth + lgdGap) + ",0)"
});
}
} // vertical END
// Capitalize string's first letter
function capitalise(str){ return str.replace(/(\w?)/, function(p1){return p1.toUpperCase();}); }
if(opt.isLegendInView){
gLegend.append("text")
.text(opt.layerLegendName + ":")
.style("font-weight", "bold")
.attr({
class: "legend-title",
y: lgdRectSize
});
gLegend.selectAll(".legend-item")
.data(opt.layerName
.map(function(d, i){ return {layer: d, color: opt.color[i]}; })
.reverse())
.enter()
.append("g")
.attr({
class: ".legend-item",
transform: function(d, i){ return "translate(0," + lgdRowHeight * (i + 1) + ")"; }
})
.each(function(d){
var self = d3.select(this);
self.append("rect").attr({
width : lgdRectSize,
height: lgdRectSize,
fill : d.color
});
self.append("text").attr({
x: lgdRectSize + lgdGap * 0.5,
y: lgdRectSize
})
.text(capitalise(d.layer));
});
gNote.selectAll(".legend-item")
.data(noteData)
.enter()
.append("g")
.attr({
class: "legend-item",
transform: function(d,i){ return "translate(0," + (i * lgdRowHeight) + ")"; }
})
.append("text")
.attr({
y: lgdRectSize
})
.text(function(d){ return d; });
gNote.select("text:first-child").style("font-weight", "bold");
} // IF (opt.isLegendInView) END
function onMouseEnter(d){
var x = d3.event.clientX,
y = d3.event.clientY,
rx = d3.mouse(this)[0],
ry = d3.mouse(this)[1],
self = d3.select(this),
html = "<p><strong>" + d.x + "</strong></br>" +
d.layer + " : " + f2(d._y / d._t) + "</p>";
d3.select(tooltip).select("div:first-child").html(html);
self.attr("stroke", "black");
tooltip.style.left = x - 0.5 * (tooltip.offsetWidth - +self.attr("width")) - rx + "px";
tooltip.style.top = y - tooltip.offsetHeight - ry - 12 + "px";
}
function onMouseLeave(){
d3.select(this).attr("stroke", "transparent");
tooltip.style.left = "-999999999999px";
}
// Getting string dimension information: {width: x, height: y} when available
function fetchLength(str, style){
if(!style){ style = { display: "block" }; }
var node = svg.append("text").text(str).style(style).node(), box;
try{ box = node.getBBox(); }catch( e ){ box = null; }
// node.remove() not compatible with IE;
// using " node.parentNode.removeChild(node) " OR:
d3.select(node).remove();
return box;
} // fetchLength END
// Making group bar invisible if total value is 0
function visible(d){ return d._t > 0 ? "block" : "none"; }
}; // d3.svg.contributeBar END
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment