Makie: best practice to align Labels to left margin

[VictorSeven]

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

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 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))

[technocrat]

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.

[VictorSeven]

Thanks for the suggestion! I didn’t know that one can mix prettytables with Makie. I’ll check it on the computer tomorrow.

Still, my main concern is in the title/description text. The distance to the left is very large, in my opinion. It looks not very well aligned. Playing with colsize! I can improve it but I don’t know if that’s the way I should do it.

When the space at the edges is fully used also the datafig row gets more space to breathe.

[jules]

Makie does not layout text like a browser, where you fill a rectangle and breaks are done automatically. You’ve already figured that out as you’ve introduced your own linebreaks. The point is that Makie tries to use only as much space as needed for the elements that are there. That’s why, by default, a GridLayout row or column will shrink to any fixed-size elements in there. Label is fixed-size by default, because height and width can be measured given some text, fontsize, etc.

What’s happening is that the large block of text’s width is slightly less than what’s needed for the figure size you’ve chosen. So there’s gaps at the sides. You can either use resize_to_layout!(f) at the end in order to make the figure smaller, as big as its top-level layout, which depends on the width of the text. Or you specifically disable the auto-size property for the text such that the layout doesn’t shrink or grow to fit. That’s done with Label(...; tellwidth = false) or tellheight = false. You can also use that on GridLayout or any other block that should just float in its layout space without auto-resizing it. In your case this doesn’t really work well due to how you’ve set things up.

If I use resize_to_layout!(f) instead, I get: