neuhausi / canvasXpress

CanvasXpress: A JavaScript Library for Data Analytics with Full Audit Trail Capabilities.
http://www.canvasXpress.org
289 stars 44 forks source link

Is there a way to centre colour coded points in a dotplot? #161

Open SunnyMug opened 1 month ago

SunnyMug commented 1 month ago

Hi there, I currently have a dotplot generated with CanvasXpress showing this: image The current datset inputted only has 12 datapoints but the same plot is planned to be used for potentially hunderds of datapoints. Are there any configuration options that allow us to specify a specific data category (coloured point) to be centered in the graph? For example, All datapoints that are coloured should be centre but not black.

Here are some examples for the desired plot: image image

Thank you for your time!

neuhausi commented 1 month ago

You can specify the parameter colors which is an array with the colors you want to use. If you want you can share the image and I will help you with the parameters

SunnyMug commented 1 month ago

Thank you for your quick reply! Sorry for the confusion. The plots currently being produced already have a configuration parameter that specifies the colours we aimed for, like you said, with the colour array.

The problem we are having is that the dot points appear to be plotted side by side with no preference for what category is put in the centre of the plot.

What we are trying to aim for is the last two images, where the blue, green, and red points are placed in the centre because they are coloured, whereas the black points are not.

Thank you!

neuhausi commented 1 month ago

What happens if you sort the data? (Sorry, I am out of town and I cannot check)

SunnyMug commented 1 month ago

Thanks for the suggestion! I'll try it out and get back to you. Will the first values in the data array be plotted first and therefore be centered on the plot?

neuhausi commented 1 month ago

Yes

sarah-binf commented 1 month ago

To sort the data, is there any way to identify how the bins are defined (the number of bins, ranges etc.)?

neuhausi commented 1 month ago

No at this time. Do you have some example so I can evaluate what will it take?

sarah-binf commented 1 month ago

For the example that @SunnyMug posted (TSPAN6) data.graph.y.data =[[10.64, 11.32, 8.33, 10.87, 11.29, 6.54, 21.81, 24.18, 11.4, 35.06, 9.13, 16.23]]

neuhausi commented 1 month ago

:-) I need a little more explanation than this

sarah-binf commented 1 month ago

@SunnyMug shared a copy of our repo with you. Are you able to access it?

neuhausi commented 1 month ago

I meant how do you want to define the bins? What do you mean bins. A range for the data? the position of the dots?

sarah-binf commented 1 month ago

The dotplot-8 example has binned: true which gives this view: dotplot-8 If it is set to binned:false dotplot-8_binned_false So we want to put the specified red dot in the middle of the line it appears in. I'm assuming the line it appears in is its own "bin" and if I know how the number of bins and ranges of those bins are set that maybe I can centre the red dot. Does that make sense? Also the value of the red line is based on the exact value defined in data.graph.y.data but since dots of similar values are grouped in the same position on the y-axis the red line can be misaligned at times. image

neuhausi commented 1 month ago

Ok. Now I get it. The binning algorithm has a random seeding which also depends in the order of the object being plotted, the number of the objects and the distribution of the data (which is calculated from a density function. I suppose I could sort the 'x' position before I plot the data. Wow, that seems to be a little bit of work and probably will slow things a little bit. The y coordinate is a lot more trickier so I will need to think more about it.