Data Visualization

Grad_student

I want to create a visualization like this:

Each black circle would represent a day. The orange and blue circles inside represent some data that I will pulling from an csv file. The varying size of the colored circles represents the numerical value of the sum of the data.

Any ideas on how to go about doing this? I guess I could just draw() a bunch of ellipses but surely there has to be a more intelligent/efficient way to do this?

hondaman900

Read the CSV file into an array. Presuming your CSV values are in a set order or identifiable as the different parameters, in your void draw() loop, assign the array values from your data points in the CSV to the correct parameters for the ellipses you're drawing. It may be a bit tedious to set up, but once you have the array values aligned with the ellipse parameters, you should be able to draw ellipses that reflect the data points.

Grad_student

@hondaman900

Thanks. That's what I was thinking. I guess is all about getting a handle on the area of each of the big time circles in order to get the colored circles to appear properly within it. I guess there's no way to avoid the tediousness of this task! No shortcuts.

hondaman900

Just a thought, but if you used an alpha transparency for the circle fills, and you're passing percentage values, you could place the data circles so that at 100% max they are still within the bounds of the containing circle. That way if the circles overlap your visualization of the data is not lost as you can still see the extent of any given circle.

That would avoid the scaling math to determine sizes of circles to make them all fit. Not knowing your project requirements I'm not sure if this is relevant to yours or not, but just a thought to share...