# Grid creation and donut-like display and color filling

**URL:** <https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100>\
**Category:** Pluto\
**Tags:** plotting\
**Created:** [April 12, 2021, 12:24pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100 "2021-04-12T12:24:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stephen1](https://avatars.discourse-cdn.com/v4/letter/s/97f17d/32.png) [@Stephen1](https://discourse.julialang.org/u/Stephen1)\
**Post date:** [April 12, 2021, 12:24pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/1 "2021-04-12T12:24:51Z")

</div>

Hello,

Do you know how I could create a grid like this one on Pluto? In this grid, I would like to put numbers in it (not in all the boxes) and draw curves over it.

Have a nice day

 ![Image](https://global.discourse-cdn.com/julialang/original/3X/2/1/21f70b8aebdf1c313ee38bba15ce1520f9d3eb29.jpeg)

---

<div class="post-metadata">

**Author:** ![nilshg](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nilshg/32/2283_2.png) [@nilshg](https://discourse.julialang.org/u/nilshg)\
**Post date:** [April 12, 2021, 1:00pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/2 "2021-04-12T13:00:11Z")

</div>

What does “in Pluto” mean here? Could you not just use a normal plot which has gridlines?

```julia
julia> using Plots

julia> plot(xticks = 1:20, yticks = 1:20, xlim = (1, 20), ylim = (1,20), aspect_ratio = 1)

```

![image](https://global.discourse-cdn.com/julialang/original/3X/e/8/e8d034a6ac4b1cd451cc39d245745e44b5c22542.png)

---

<div class="post-metadata">

**Author:** ![Stephen1](https://avatars.discourse-cdn.com/v4/letter/s/97f17d/32.png) [@Stephen1](https://discourse.julialang.org/u/Stephen1)\
**Post date:** [April 12, 2021, 1:08pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/3 "2021-04-12T13:08:24Z")

</div>

By that I mean “using a Pluto notebook”.  
Thank you ! And is it possible to “draw” over it as well as include numbers in the boxes?

---

<div class="post-metadata">

**Author:** ![nilshg](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nilshg/32/2283_2.png) [@nilshg](https://discourse.julialang.org/u/nilshg)\
**Post date:** [April 12, 2021, 3:20pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/4 "2021-04-12T15:20:12Z")

</div>

Sure, you can do

```julia
julia> annotate!([3], [3], text("3"))

```

to put the number “3” on the location (3,3) in the above plot

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [April 12, 2021, 5:55pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/5 "2021-04-12T17:55:47Z")

</div>

Another way:

```julia
using Plots; gr()

# Define grid
Nx, Ny = 12, 6 # number of grid cells
x1, x2 = 0, 240 # xgrid limits
y1, y2 = 0, 120 # ygrid limits
x, y = LinRange(x1,x2,Nx+1), LinRange(y1,y2,Ny+1)
dx, dy = (x2-x1)/Nx, (y2-y1)/Ny

# Plot grid
p = plot(legend=false,xlim=(x1,x2),ylim=(y1,y2),ratio=1,grid=false)
xi, yi = x1 .+ zeros(Nx+1), y1 .+ zeros(Ny+1)
[plot!(p, fill(x[i],Ny+1), y, lc=:gray, lw=0.2) for i in 1:Nx+1 ];
[plot!(p, x, fill(y[i],Nx+1), lc=:gray, lw=0.2) for i in 1:Ny+1 ];

# Annotate np points with coords (xr,yr) and draw connecting lines:
np = 7
xr, yr = x[rand(1:Nx,np)] .+ dx/2, y[rand(1:Ny,np)] .+ dy/2
labels = string.(1:np)
plot!(xr,yr, marker=2.)
[annotate!(xr[i], yr[i] + (y2-y1)/20, text(labels[i],7)) for i in 1:np];
plot(p, title="Grid plot", axis=nothing, framestyle=:none)

```

![Grid_plot_with_labels_and_lines1](https://global.discourse-cdn.com/julialang/original/3X/e/0/e0736c7178d25781b4b568affa345019d6d9abf3.png)

Or showing the axes:

```julia
plot(p, title="Grid plot", xticks=x1:dx*2:x2, yticks=y1:dy*2:y2, framestyle=:box)

```

![Grid_plot_with_labels_and_lines2](https://global.discourse-cdn.com/julialang/original/3X/5/5/5576a24d4c7bbb48322d57a0844cb18f41101888.png)

---

<div class="post-metadata">

**Author:** ![joa-quim](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/joa-quim/32/227_2.png) [@joa-quim](https://discourse.julialang.org/u/joa-quim)\
**Post date:** [April 12, 2021, 6:57pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/6 "2021-04-12T18:57:36Z")

</div>

And with GMT  
(could have used the automatic region detection but would risk to trim out some text)

```julia
# Number points with the record number
xy = rand(7,2);
plot(xy, region=(0., 1.1, 0, 1.1), frame=(axes=:WSen, annot=0.2, grid=0.2), marker=:point, lc=:green)
text!(xy, offset=(shift=(0,0.5),), rec_number=true, name="um.png", show=true)

```

 ![um](https://global.discourse-cdn.com/julialang/original/3X/e/e/ee103780d92e40f0cd3f7671e9f9b69cacd90823.png)

```julia
# Use any label we want
Dxy = mat2ds(rand(7,2), ["A1","A2","A3","A4","A5","A6","A7"]);
plot(Dxy, region=(0., 1.1, 0, 1.1), frame=(axes=:WSen, annot=0.2, grid=0.2), marker=:point, lc=:green)
text!(Dxy, offset=(shift=(0,0.5),), name="dois.png", show=true)

```

 ![dois](https://global.discourse-cdn.com/julialang/original/3X/7/3/73dac95fd713fa831a078013d6c65873f7c0570d.png)

---

<div class="post-metadata">

**Author:** ![Stephen1](https://avatars.discourse-cdn.com/v4/letter/s/97f17d/32.png) [@Stephen1](https://discourse.julialang.org/u/Stephen1)\
**Post date:** [April 12, 2021, 8:04pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/8 "2021-04-12T20:04:15Z")

</div>

Many thanks to you gentlemen!  
Could I benefit from your experience?  
I wonder if it is possible to draw a random curve that would close. Added to this curve would be another curve that would follow approximately the same path and would be located at a certain distance from the other curve. And also “black out” the squares that are not between the two curves.

 ![Image](https://global.discourse-cdn.com/julialang/original/3X/4/9/491bd8a56683eb313e87598b28278a04a99d573d.jpeg)

---

<div class="post-metadata">

**Author:** ![rafael.guerra](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rafael.guerra/32/216610_2.png) [@rafael.guerra](https://discourse.julialang.org/u/rafael.guerra)\
**Post date:** [April 12, 2021, 9:23pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/9 "2021-04-12T21:23:27Z")

</div>

@Stephen1, a simple way, but not ideal, is to use plot shapes (_and then to plot grid defined in previous post over the shapes_).

```julia
using Plots; gr()

function Shape1(C,r)
    θ = LinRange(0,2π, 72)
    C[1] .+ r*(1 .+ 0.2*sin.(4θ)).*sin.(θ), C[2] .+ r*(1 .+ 0.2*sin.(4θ)).*cos.(θ)
end

C = [120,60]; r = 40;
S1 = Shape1(C,r)
S2 = (C[1] .+ (S1[1] .- C[1])*0.7, C[2] .+ (S1[2] .- C[2])*0.7)

p = plot(legend=false,xlim=(x1,x2),ylim=(y1,y2),ratio=1,grid=false)
plot!(S1, seriestype=[:shape],lw =0.5,c=:blue,lc=:black,legend=false,fa=0.2,ratio=1)
plot!(S2, seriestype=[:shape],lw =0.5,c=:white,lc=:black,legend=false,fa=1,ratio=1)

```

![Four-leaf_clover_donut](https://global.discourse-cdn.com/julialang/original/3X/1/6/16a88130a0b8d555b51aebfb0c31edfe172b0385.png)

---

<div class="post-metadata">

**Author:** ![AndiMD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/andimd/32/6531_2.png) [@AndiMD](https://discourse.julialang.org/u/AndiMD)\
**Post date:** [April 12, 2021, 10:56pm UTC](https://discourse.julialang.org/t/grid-creation-and-donut-like-display-and-color-filling/59100/10 "2021-04-12T22:56:26Z")

</div>

or using `Luxor.jl`  
(can probably be simplified, I am a Luxor Newbie)

```julia
using Luxor
function drawGrid(X,Y)
	for i=-X:50:X
		line(Point(i,-Y),Point(i,Y), :stroke)
	end
	for j=-Y:50:Y
		line(Point(-X,j),Point(X,j), :stroke)
	end
end
@svg begin
	X,Y=250,250
	sethue("black")
	box(Point(0, 0), 2X, 2Y, :fill)
	innerpoints = [Point(rand(120:160)*sin(i), rand(130:160)*cos(i)) for i in 0:0.1:2π]
	outerpoints = [Point(rand(190:200)*sin(i), rand(190:200)*cos(i)) for i in 0:0.1:2π]
	donut = [innerpoints; innerpoints[1]; outerpoints[1]; reverse(outerpoints)]
	poly(donut, :clip)
    sethue("black")
	drawGrid(X,Y)
	sethue("white")
	box(Point(0, 0), 2X, 2Y, :fill)
	clipreset()
	setcolor(0.5, 0.5, 0.5, 0.5)
	drawGrid(X,Y)
end

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/4/b/4b2fc19dbf992c6e5457ac1d9755226950ea191a.png)