psychopy.visual.Pie unavailable in psychoJS?

Online experiments
1

Is psychopy.visual.Pie unavailable in psychoJS as of yet? Are there any plans for it to be implemented in psychoJS?

I have not found any reference in the crib sheet.

Thank you for your kind help!

2

Is this for a pie chart?

I got part way through an online demo (but had some issues with the sliders)

3

Indeed, this is exactly what I’m looking for, thank you very much for responding!

Is the code of the demo available somewhere?

Of course, it would be very convenient, if visual.Pie was directly available in psychoJS. Do you happen to know whether/why this is not the case? Your demo looks as if you had implemented just that, right?

4

Hi,

You can access/fork my code from https://gitlab.pavlovia.org/vespr/interactive-pie-chart. Forgive the extra interactive code.

I know that @TParsons had a go at a direct implementation. I’m not sure how far he got, but his repository is here: https://github.com/TEParsons/psychopy/tree/proj-pie-chart

5

Worth noting, this implementation was still Python only! However you can use the same principle in JS:

:polygon: Polygon components (in both Python and JS) have an attribute called .vertices, this is essentially a list of relative coordinates for each corner on the shape. If you set the shape to be an equilateral polygon with 360 vertices, then the .vertices attribute will be a list of 360 coordinates which are all equidistant from the center of the shape. This means, if you store the .vertices attribute shortly after creation (i.e. in the Begin Experiment of a :code: Code component) then you can create a pie slice by indexing that array according to the angle you want and adding (0, 0) to the beginning (for the centre point of the slice).

So, for example, if you wanted a 90 degree slice, you could add this in the Begin Experiment tab:

fullCircleVertices = myPolygon.vertices

and then this this in the Begin Routine tab:

sliceVertices = [(0, 0)]
sliceVertices.extend(fullCircleVertices[:90+1])
myPolygon.vertices = sliceVertices

which should auto-translate perfectly fine to JS as it’s all base Python functions.

For subsequent slices, you can either index from the start angle to the end angle (e.g. add a second 90 degree slice with fullCircleVertices[90:180+1]) or index from 0 to the angle you want (+1 to include the angle itself) and then rotate it using the orientation parameter.

If you prefer, you can use percentages rather than angles by just setting the number of vertices to be 100 rather than 360, or 1000 and then multiplying percentages by 10 for more accuracy.

6

Thank you both, this looks very helpful!!

piechart.js looks as if it could almost be pulled into psychoJS…

I already have a working Python implementation so might prefer not to start over with the polygon approach – but it is clever and helpful!

7

Brilliant approach! Worked perfectly for me in python. Just an update, the automatic translation to javascript did not work for me. But the javascript code below does the trick:

sliceVertices = [[0, 0]];
sliceVertices.push(...fullCircleVertices.slice(0, 90+1));
myPolygon.vertices = sliceVertices;