# Hexagonal Canvas Functions
def library_processing():
# Downloads library data for the hexagonal canvas
# Library data is pre-annealed so the canvas will have the most similar gene sets closest together
raw_library_data = []
try:
library_name = enrichr_library
with urllib.request.urlopen('https://raw.githubusercontent.com/MaayanLab/Enrichr-Viz-Appyter/master/Enrichr-Processed-Library-Storage/Annealing/Annealed-Libraries/' + library_name + '.txt') as f:
for line in f.readlines():
raw_library_data.append(line.decode('utf-8').split("\t\t"))
name = []
gene_list = []
except:
display(Markdown("Failed to retrieve the selected annealed library."))
return [], -1, -1
for i in range(len(raw_library_data)):
name += [raw_library_data[i][0]]
raw_genes = raw_library_data[i][1].split('\t')
gene_list += [raw_genes[:-1]]
library_data = [list(a) for a in zip(name, gene_list)]
# raw_library_data: a 2D list where the first element is the name and the second element is a list of genes associated with that name
jaccard_indices = []
indices = []
for gene_set in library_data:
intersection = [value for value in gene_set[1] if value in genes]
index = len(intersection)/(len(gene_set[1]) + len(genes))
jaccard_indices += [[gene_set[0], index]]
indices += [round(index, 5)]
# determine the dimensions of the canvas
x_dimension = math.ceil(math.sqrt(len(indices)))
y_dimension = math.ceil(math.sqrt(len(indices)))
# zip name, gene_list, indices, and blank list for neighbor score then add dummy entries to the zipped list
anneal_list = list(zip(name, gene_list, indices))
return anneal_list, x_dimension, y_dimension
def unzip_list(anneal_list):
unzipped_list = zip(*anneal_list)
return list(unzipped_list)
# define a list of colors for the hexagonal canvas
def get_color(anneal_list, cut_off_value, x_dimension, y_dimension):
# Deal with cut_off_value (only color the most significant 10/20 hexagons)
if cut_off_value == 2.0:
sort_list = sorted(anneal_list, key=itemgetter(2), reverse=True)
cut_off_value = sort_list[int(num_hex_colored)-1][2]
r_value = 0
g_value = 0
b_value = 0
if canvas_color == 'Red':
r_value = 0.0
g_value = 0.8
b_value = 0.8
if canvas_color == 'Yellow':
r_value = 0.0
g_value = 0.3
b_value = 1.0
if canvas_color == 'Purple':
r_value = 0.5
g_value = 1.0
b_value = 0.0
if canvas_color == 'Pink':
r_value = 0.0
g_value = 1.0
b_value = 0.2
if canvas_color == 'Orange':
r_value = 0.0
g_value = 0.45
b_value = 1.0
if canvas_color == 'Green':
r_value = 1.0
g_value = 0.0
b_value = 1.0
if canvas_color == 'Blue':
r_value = 1.0
g_value = 0.9
b_value = 0.0
color_list = []
unzipped_anneal_list = unzip_list(anneal_list)
max_index = max(unzipped_anneal_list[2])
if max_index != 0:
scaled_list = [i/max_index for i in unzipped_anneal_list[2]]
else:
scaled_list = unzipped_anneal_list[2]
for i in range(x_dimension*y_dimension):
if i < len(unzipped_anneal_list[2]) and float(unzipped_anneal_list[2][i]) >= cut_off_value:
color_list += [mpl.colors.to_hex((1-scaled_list[i]*r_value,
1-scaled_list[i]*g_value, 1-scaled_list[i]*b_value))]
elif i < len(unzipped_anneal_list[2]):
color_list += [mpl.colors.to_hex((1-scaled_list[i],
1-scaled_list[i], 1-scaled_list[i]))]
else:
color_list += ["#FFFFFF"]
return color_list, max_index, cut_off_value
def init_chart():
chart_id = 'mychart-' + str(uuid.uuid4())
display(HTML('<script src="/static/components/requirejs/require.js"></script>'))
display(HTML(Template(dedent('''
<script>
require.config({
paths: {
'd3': 'https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min',
'd3-hexbin': 'https://d3js.org/d3-hexbin.v0.2.min',
},
shim: {
'd3-hexbin': ['d3']
}
})
// If we configure mychart via url, we can eliminate this define here
define($chart_id, ['d3', 'd3-hexbin'], function(d3, d3_hexbin) {
return function (figure_id, numA, numB, colorList, libraryList, indices) {
var margin = {top: 50, right: 20, bottom: 20, left: 50},
width = 850 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svG = d3.select('#' + figure_id)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//The number of columns and rows of the heatmap
var MapColumns = numA,
MapRows = numB;
//The maximum radius the hexagons can have to still fit the screen
var hexRadius = d3.min([width/((MapColumns + 0.5) * Math.sqrt(3)), height/((MapRows + 1/3) * 1.5)]);
//Calculate the center position of each hexagon
var points = [];
for (var i = 0; i < MapRows; i++) {
for (var j = 0; j < MapColumns; j++) {
var x = hexRadius * j * Math.sqrt(3)
//Offset each uneven row by half of a "hex-width" to the right
if(i%2 === 1) x += (hexRadius * Math.sqrt(3))/2
var y = hexRadius * i * 1.5
points.push([x,y])
}
}
//Set the hexagon radius
var hexbin = d3_hexbin.hexbin().radius(hexRadius);
svG.append("g")
.selectAll(".hexagon")
.data(hexbin(points))
.enter().append("path")
.attr("class", "hexagon")
.attr("d", function (d) {
return "M" + d.x + "," + d.y + hexbin.hexagon();
})
.attr("stroke", "black")
.attr("stroke-width", "1px")
.style("fill", function (d,i) { return colorList[i]; })
.on("mouseover", mover)
.on("mouseout", mout)
.append("svg:title")
.text(function(d,i) { return libraryList[i].concat(" ").concat(indices[i]); });
// Mouseover function
function mover(d) {
d3.select(this)
.transition().duration(10)
.style("fill-opacity", 0.3)
};
// Mouseout function
function mout(d) {
d3.select(this)
.transition().duration(10)
.style("fill-opacity", 1)
};
}
})
</script>
''')).substitute({ 'chart_id': repr(chart_id) })))
return chart_id
def Canvas(numA, numB, colorList, libraryList, indices):
chart_id = init_chart()
display(HTML(Template(dedent('''
<svg id=$figure_id></svg>
<script>
require([$chart_id], function(mychart) {
mychart($figure_id, $numA, $numB, $colorList, $libraryList, $indices)
})
</script>
''')).substitute({
'chart_id': repr(chart_id),
'figure_id': repr('fig-' + str(uuid.uuid4())),
'numA': repr(numA),
'numB': repr(numB),
'colorList': repr(colorList),
'libraryList': repr(libraryList),
'indices': repr(indices)
})))
