Makie: best practice to align Labels to left margin

General Usage
, ,
1

I have been fighting with a visualization for the whole day and I cannot make it work the way I’d like to. I am trying to do a simple infographic for social media in order to improve my dataviz skills with Makie. This is how the image looked like

imagen
imagen1153×650 106 KB

As you can see, I tried to align the text at the left, but Makie aligns it with the Axis below, which is nicely padded to avoid collisions at the edges. However, the figure still has a large amount of blank space to the left that I would like use. The text looks weird right now. I was able to improve the situation a bit by using the alignmode = Outside() option for the graph, but the text still has a lot of space around the edges.

I “fixed” it by adding a colsize!(textfig, 1, Fixed(900)) which basically manually sets the width of the text part (title and description). The other stuff is then automatically aligned to this. However, I am not sure if these are good practices or if there’s a cleaner / recommended approach to this. I have the suspicion I am doing something badly, design wise.

I would like to hear how some of your opinions on how to address this situation. Maybe I am doing something terribly wrong with the way I organize the GridLayout… It’s basically 4 rows, and then I do subplots if needed.

This is the full code. Looks a bit long but it’s mostly because of the text :slight_smile: Thank you all in advance!!

#For MWE, avoid computing the data, just use whatever.
distances = rand(0:10, 500)

#Figure
f = Figure(size=(960, 540))

textfig    = f[1, 1] = GridLayout()
datafig    = f[2, 1] = GridLayout()
densityfig = f[3, 1] = GridLayout()
creditsfig = f[4, 1] = GridLayout()

#Textfig: title and description
titulo = rich("Saltando por la ", rich("Wikipedia", font = "Linux Libertine Bold"))
title = Label(textfig[1,1], titulo, fontsize = 26, font = "Linux Libertine", justification = :left, halign=:left)


description = rich("Si queremos ir de una página de Wikipedia a otra saltamos por sus enlaces, ", rich("¿cuál es el camino más corto?", color=:teal, font = "Linux Libertine Bold"), 
"\nEn la Wikipedia en español en 2018 ",  rich("más del 40% de las páginas no estaban interconectadas,", color=:teal, font = "Linux Libertine Bold"), " de forma que no todas
las parejas eran accesibles. La gráfica muestra los resultados sobre 500 parejas de páginas escogidas al azar,\ndentro del subconjunto de páginas interconectadas") 

#To fix the figure
#colsize!(textfig, 1, Fixed(900))

desc  = Label(textfig[2,1], description, fontsize = 16, font = "Linux Libertine", justification = :left, halign=:left)


#Datafig: some highlight from the data
d1 = Label(datafig[1,1], "3.03 millones\nde páginas", font = "Linux Libertine", fontsize = 30)
d2 = Label(datafig[1,2], "38 millones\nde enlaces", font = "Linux Libertine", fontsize = 30)
d3 = Label(datafig[1,3], "99.9% \n está enlazada", font = "Linux Libertine", fontsize = 30)
d3 = Label(datafig[1,4], "56% páginas\n interconectadas", font = "Linux Libertine", fontsize = 30)

#densityfig: our plot
ax = Axis(densityfig[1,1], xlabel = "Número de enlaces", alignmode=Outside())

hist!(ax, distances, bins = -0.5:1:10.5, normalization=:probability, strokecolor=:black, strokewidth=1.) 
vlines!(ax, mean(distances), color=:black, linestyle=:dash)

hidespines!(ax)
ax.leftspinevisible = true
ax.xgridvisible  = false

ax.yticks = ([0, 0.1, 0.2, 0.3, 0.4], ["0%", "10%", "20%", "30%", "40%"])
ax.xticks = (0:10)

xlims!(ax, 0, 10)

#creditsfig: some more text for figure credits
credits = Label(creditsfig[1,1], "Name", justification = :left, fontsize=10, font = "Linux Libertine", halign=:left) 
datasource = Label(creditsfig[1,2], "Data from Consonni, Cristian, David Laniado, and Alberto Montresor.\n“WikiLinkGraphs: A complete, longitudinal and multi-language dataset of the Wikipedia link networks.”
", justification = :right, fontsize = 10, font = "Linux Libertine Italic", halign=:right) 

# Fixes alignment of the bottom part
#colsize!(creditsfig, 1, Relative(0.5))
#colsize!(creditsfig, 2, Relative(0.5))
2

datafig is a table, so consider using PrettyTables, which gives you a lot of control. Here’s a stub

highlights = DataFrame(
    paginas = "3.03 millones",
    enlaces = "38 millones",
    interconectadas = "56%",
    están_enlazadas = "99.9%",
)
io = IOBuffer()
pretty_table(io, highlights; alignment=[:l, :l, :l, :l])
str_table = String(take!(io))
table = Label(datafig[1,1], str_table, font = "Linux Libertine", fontsize = 10)

You’ll need to pass some kwargs to suppress the Type sub-header and lose the box. But at least you can treat it as a single object, rather than four, to place.