# Code Circular Heat map with P5
**URL:** https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561
**Category:** Project Guidance
**Created:** [April 23, 2019, 10:37am UTC](https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561 "2019-04-23T10:37:14Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@bram94](https://discourse.processing.org/u/bram94)
#### Post date: [April 23, 2019, 10:37am UTC](https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561/1 "2019-04-23T10:37:14Z")
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!
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [April 23, 2019, 12:38pm UTC](https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561/2 "2019-04-23T12:38:18Z")
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](https://editor.p5js.org/kll/sketches/2AlyhU2Hg)
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [April 26, 2019, 10:54am UTC](https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561/3 "2019-04-26T10:54:50Z")
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](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](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](https://editor.p5js.org/jeremydouglass@gmail.com/sketches/W6kHic5NU)
---
### Author:  [@bram94](https://discourse.processing.org/u/bram94)
#### Post date: [June 8, 2019, 6:55pm UTC](https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561/4 "2019-06-08T18:55:56Z")
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 ?
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 8, 2019, 8:36pm UTC](https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561/5 "2019-06-08T20:36:27Z")
It is possible to connect dots to form a shape, for example using beginShape / endShape and vertex:
[https://p5js.org/reference/#/p5/beginShape](https://p5js.org/reference/#/p5/beginShape)
The question is how your points are currently encoded, as you have not shared your sketch.
---
### Author:  [@bram94](https://discourse.processing.org/u/bram94)
#### Post date: [June 8, 2019, 8:53pm UTC](https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561/6 "2019-06-08T20:53:37Z")
The points are coded as in the follow example: [https://editor.p5js.org/kll/sketches/2AlyhU2Hg](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.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 8, 2019, 9:47pm UTC](https://discourse.processing.org/t/code-circular-heat-map-with-p5/10561/7 "2019-06-08T21:47:52Z")
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](https://editor.p5js.org/jeremydouglass/sketches/cOOYg9SIi)
