I am making a heatmap. I am trying to map a store and which parts of the store get the most sales.

Peterwho

How can I load the data and make it so the parts of the store with the most sales are colored red and it fades to blue. I would love all of the help I can get! Thank you in advance.

kfrajer

This is working in RGB mode. You will need to define your x and y values as actual local positions in your store. Right now my x value maps against the width of the sketch.

Kf

int maxSellObserved=154;
int minSellObserved=48;
int half=int((maxSellObserved+minSellObserved)/2.0);


int n =100;
int [] shopSales = new int[n];
int rad=int(width/n);
int x, colorPt;

size(800,400);
ellipseMode(CENTER);
rectMode(CENTER);
textAlign(RIGHT,CENTER);
noStroke();
noLoop();
for (int i=0; i<n; i++)
  shopSales[i]=int(random(minSellObserved, maxSellObserved));

int minBLUE=255;
int maxBLUE=0;  //Change to 128 to avoid black color (transition btw blue/red
int minRED=0;     //Change to 128
int maxRED=255;

fill(color(maxRED,0,0));
rect(width*0.8,height*0.1,width*0.05,height*0.05);
text("MAX sales",width*0.9,height*0.1);
fill(color(0,0,0));
rect(width*0.8,height*0.15,width*0.05,height*0.05);
//text("Half sales",width*0.90,height*0.15);
fill(color(0,0,minBLUE));
rect(width*0.8,height*0.2,width*0.05,height*0.05);
text("MIN sales",width*0.90,height*0.2);

int horizontalMargin=int(width*0.05);
for (int i=0; i<n; i++) {
  x= round(map(i, 0, n, horizontalMargin, width-horizontalMargin));
  int cRed=0, cBlue=0;
  if (shopSales[i]<half)
    cBlue=round(map(shopSales[i], minSellObserved, half, minBLUE, maxBLUE));
  else
    cRed=round(map(shopSales[i], half,maxSellObserved,  minRED, maxRED));
  fill(color(cRed, 0, cBlue));
  ellipse(x, height/2, rad, rad);
}

jeremydouglass

@Peterwho --

What does your sales data look like? Can you give an example? Is it more like data by cities in the US (a cloud of blobs) or like data by states in the US (a collection of outlines)?

• Check out using rect() with an alpha channel (RGBA).
• Check out colorMode() with HSB, and using lerp() to transition between two colors (e.g. red-blue).
• Check out tint() and mask() for more subtle visual effects than transparent colored rectangles.

Peterwho

Like I have my store map, and I have my data loaded, and I am trying to make it so when I hit play, it colors red where the most units have been sold. How would I do this? Is mapping the store possible? If so, how?

koogs

be more specific. at the very least post (some of) the data.

Peterwho

Peterwho

So like I want to map a section with food, with clothes, etc. and every unit of that category will go to the map and the more the darker it will color.

jeremydouglass

Need column headings. Is Cartoon a kind of Book? Are Clothes a kind of... CD? Is 12.13 a price? This isn't clear.

Also, do you already have a map of the store? Is it broken down by section or by product or what?

Peterwho

Headings are: Section, date and time, price, cost, then type. And yeah I do have a map by product.

jeremydouglass

Huh. So clothes are a type of CD!

Is the map an overhead map, like a floor-plan? are their aisles (rectangles) or do you need to draw polygons (L shapes) or blobs (zones).

Peterwho

Yes it is a floor plan! I have all of it drawn in an image, I just need to map it.

kfrajer

Are you asking for code ideas? Maybe you could show what code you have so far.

Mine was just a code idea. You can re-define x and y as locations, longitude and latitude if you are looking at GPS data for example. The proportions of sales are represented by a color map, blue representing the lowest and red the highest (going through black because I am in RGB space)

If you don't have a map in your application, unfolding maps is a fantastic library to do this.

Kf