Code Circular Heat map with P5

p5.js Project Guidance
1

Hi all,

I am very new to P5 and want to code a circular heatmap inP5 based on data I have

Something similar like shown in the figure.

I already manage to do it in R, but really need to do it in p5 and already unsucessfully searched the internet for hours and days to find sample code of how to code a circular heatmap in P5.js.

Someone any idea ?

Thanks in advance for your help!

image
image.jpg1920×1080 603 KB

2

a first start could be just a circular plot
here a version with only 2 data series & axis ( zoom )
https://editor.p5js.org/kll/sketches/2AlyhU2Hg
SNAG-0083

2 Likes
3

Is there a specific reason you want to do this in p5.js and not d3? Just asking, because d3 has a lot of fully developed modules just for things like data driven circular heat maps.

The easiest way to draw a collection of radial segments like this is:

  1. import tabular data – a 2D array or p5.js Table (https://p5js.org/reference/#/p5.Table)
  2. loop over the table like a checkerboard – starting from the outer row and moving inward, so that each row of the data is a ring on your chart, with one tile per column. Outer first – this maters for rendering. If your data is organized inner-first then loop over it backwards.
  3. Draw each tile using arc: https://p5js.org/reference/#/p5/arc. Your arc width is TWO_PI / columnCount. These tiles are actually pie slices, but the inner rings will crop them to tiles.
  4. Add a hole at the center with circle / ellipse.

https://editor.p5js.org/jeremydouglass@gmail.com/sketches/W6kHic5NU

4

I have now a simple circular plot.

Any idea whether it is possible (and how it is possible) to connect the dots with a line and transparant layer as sketched in the figure below in P5 ?

image

5

It is possible to connect dots to form a shape, for example using beginShape / endShape and vertex:

https://p5js.org/reference/#/p5/beginShape

The question is how your points are currently encoded, as you have not shared your sketch.

6

The points are coded as in the follow example: https://editor.p5js.org/kll/sketches/2AlyhU2Hg

What I want is something as displayed on the sketch in my last post (see above). In that sketch, the transparant layer is sketched with PowerPoint and looks not smooth , so therefero I hope this would be possible in P5 to add a kind of transparant layer connecting the blue dots and a second transparant layer in green connecting the green dots on the sketch provided in my last response.

1 Like
7

Well, because you are using rotate and essentially drawing with polar coordinates, this is a bit harder than it needs to be, but not too bad.

  1. refactor draw_circplot() so that you call it twice – once for each data series
  2. use beginShape / vertex / endShape to draw your shaded outlines
  3. in order to do this, you must convert your polar coordinates into cartesian. That’s pretty easy; the formulas are x = r * cos(theta) … y = r * sin(theta).

https://editor.p5js.org/jeremydouglass/sketches/cOOYg9SIi

08%20PM

2 Likes