Animating a graph changing edge colors

Specific Domains Graphs
, , ,
1

Hi there,

I want to animate some simple graphs with changing colors in their edges. I thought it would be simple but I am definitely not a Julia expert and I am a bit stuck.

I tried animating just the color of a single edge, with the following code:

using Graphs
using GraphPlot
using Plots
using Random

# Graph
G = Graph(5);
add_edge!(G, 1, 2);
add_edge!(G, 2, 3);
add_edge!(G, 1, 3);
add_edge!(G, 1, 4);
add_edge!(G, 4, 5);
add_edge!(G, 1, 5);

# Node positions
X = [1.0,0.0,0.0,2.0,2.0]
Y = [0.5,0.0,1.0,0.0,1.0]

# Colormap and color per iteration
cmap = range(HSL(colorant"blue"), stop=HSL(colorant"yellow"), length=360)
colorlist = rand(100) * 360

anim = Animation()
for i ∈ 1:100
    
    ## Get edge color at this instant
    color = cmap[Int(round(colorlist[i]))]
    edgecolor=["#389826","#CB3C33","#9558B4","#2458B2","#9558B2", color]

    plt = gplot(G, X,Y, nodelabel=1:5, NODESIZE=0.05, EDGELINEWIDTH=2, nodefillc=colorant"grey", edgestrokec=edgecolor)
    frame(anim, plt)

end

gif(anim)

The error I get is MethodError: no method matching frame(::Animation, ::Compose.Context), which I am not sure how to interpret nor fix… Any help is appreciated, thanks.

2

Your code does not generate the animation because it works with plt=Plots.plot(), but in your case plt=gplot() is of type Context.
To get it work you should install three (small) packages, Compose.jl, Cairo.jl and Fontconfig.jl, all three being necessary to transform each graph plot into a png file, with the function Compose.PNG:

using Graphs
using GraphPlot, Compose, Cairo, Fontconfig
using Random, Plots

let 
    G = Graph(5);
    edges =[(1,2), (2, 3), (1, 3), (1, 4), (4, 5), (1, 5)]
    for e in edges
       add_edge!(G, e)
    end        
 
    X = [1.0,0.0,0.0,2.0,2.0]
    Y = [0.5,0.0,1.0,0.0,1.0]
    cmap = range(HSL(colorant"blue"), stop=HSL(colorant"yellow"), length=360)
    colorlist = rand(100) * 360

    fname=String[]
    anim=Animation()
    for i=1:30
        color = cmap[Int(round(colorlist[i]))]
        edgecolor=["#389826","#CB3C33","#9558B4","#2458B2","#9558B2", color]
        plt= gplot(G, X,Y, nodelabel=1:5, NODESIZE=0.05, EDGELINEWIDTH=2,
                   nodefillc=colorant"grey", edgestrokec=edgecolor) 
        filename = joinpath(anim.dir, lpad(i, 6, "0")*".png")
        push!(fname, filename)
        draw(PNG(filename), plt)
    end
    anim = Animation(anim.dir, fname);
    Plots.buildanimation(anim, "anim-graph.gif", fps = 12, show_msg=false)
end
3

Or you could consider using GraphMakie.jl which builds on Makie.jl and which has an example for this in the docs.

1 Like
4

Thank you very much! One last thing if you don’t mind, why is it that the resulting animation is a bit “rough”? I tried increasing the dpi in PNG(), and the individual images saved in /tmp/ look smoother but the animation is still rough…

5

Here is the gif file I got with the above code. Does yours look more pixelated?
anim-graph.

6

No, it looks exactly like this, but as you can see the borders look kinda clunky, unlike in the static plot with gplot…

7

Try to reduce the edge thickness.

8

might be GIF antialiasing … a black background might help