# Animating a graph changing edge colors
**URL:** https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782
**Category:** Graphs
**Tags:** plotting, colors, graphs, animations
**Created:** [March 18, 2024, 5:02pm UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782 "2024-03-18T17:02:13Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@qotsalo](https://discourse.julialang.org/u/qotsalo)
#### Post date: [March 18, 2024, 5:02pm UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782/1 "2024-03-18T17:02:13Z")
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:
```julia
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.
---
### Author:  [@empet](https://discourse.julialang.org/u/empet)
#### Post date: [March 19, 2024, 10:29pm UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782/2 "2024-03-19T22:29:43Z")
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`:
```julia
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
```
---
### Author:  [@Jakob](https://discourse.julialang.org/u/Jakob)
#### Post date: [March 20, 2024, 6:45am UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782/3 "2024-03-20T06:45:23Z")
Or you could consider using GraphMakie.jl which builds on [Makie.jl](https://docs.makie.org/stable/) and which has an [example](https://graph.makie.org/stable/generated/truss/) for this in the docs.
---
### Author:  [@qotsalo](https://discourse.julialang.org/u/qotsalo)
#### Post date: [March 20, 2024, 10:15am UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782/4 "2024-03-20T10:15:49Z")
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…
---
### Author:  [@empet](https://discourse.julialang.org/u/empet)
#### Post date: [March 20, 2024, 11:01am UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782/5 "2024-03-20T11:01:12Z")
Here is the gif file I got with the above code. Does yours look more pixelated?
.
---
### Author:  [@qotsalo](https://discourse.julialang.org/u/qotsalo)
#### Post date: [March 20, 2024, 11:22am UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782/6 "2024-03-20T11:22:23Z")
No, it looks exactly like this, but as you can see the borders look kinda clunky, unlike in the static plot with gplot…
---
### Author:  [@empet](https://discourse.julialang.org/u/empet)
#### Post date: [March 20, 2024, 11:25am UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782/7 "2024-03-20T11:25:40Z")
Try to reduce the edge thickness.
---
### Author:  [@cormullion](https://discourse.julialang.org/u/cormullion)
#### Post date: [March 20, 2024, 11:26am UTC](https://discourse.julialang.org/t/animating-a-graph-changing-edge-colors/111782/8 "2024-03-20T11:26:33Z")
might be GIF antialiasing … a black background might help