Heat map - what are the pixels corresponding to the edges of the a region? | XM Community
Skip to main content
Solved

Heat map - what are the pixels corresponding to the edges of the a region?

  • June 3, 2023
  • 4 replies
  • 314 views
J
Level 1 ●
Forum|alt.badge.img+2

I have a heat map question, with one region, and respondents can only click inside this region. When I export the data to csv, I get the x and y coordinates of where each respondent clicked. I assume (would like confirmation) that the values of these coordinates refer to the pixel locations in the full image. But is there any way to get the pixel values for the region? That is, I want to know the minimum and maximum possible values that the coordinates can take.

Best answer by Tom_1842

Hi, I don't think there is an easy way to get to this information, but I think there are 2 approaches you could take. The first and easiest is to generate a bunch of Test Responses, download the data to Excel, add a filter for Region 1 = 1, then look at the min and max values in the x and y coordinate columns. When I used a test image on my end with 700 test responses and a square Region 1, I got x min = 316, x max = 463, y min = 172, y max = 319.

The the more precise but difficult to parse approach would be to inspect the browser when viewing the Heat Map in the Survey Builder. The Region 1 element can be navigated to and the element should look something like the below:

<path fill="none" stroke="#ffffff" d="M315.5,169.5C315.5,169.5,465.5,169.5,465.5,169.5C465.5,169.5,465.5,319.5,465.5,319.5C465.5,319.5,315.5,319.5,315.5,319.5C315.5,319.5,315.5,169.5,315.5,169.5" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" opacity="0.2" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.2;"></path>

I see values in there that I believe are related to the positioning of the Region within the Heat Map image. I think the values parse out to x min = 315.5, x max = 465.5, y min = 169.5, y max = 319.5.

4 replies

ArunDubey
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+41
  • ArunDubey
  • QPN Level 8 ●●●●●●●●
  • June 4, 2023

Did you explore the support site. If not then please refer below link and see if it helps.

 

https://www.qualtrics.com/support/survey-platform/survey-module/editing-questions/question-types-guide/specialty-questions/heat-map/

~ Arun Kumar Dubey
J
Level 1 ●
Forum|alt.badge.img+2
  • Jedi_LiU
  • Author
  • Level 1 ●
  • June 5, 2023

Yes, I did. I read that whole article that you linked but it does not answer my question. The most relevant information is here:

In the exported dataset, 2 columns will be provided for each click participants were allowed to make on the image. 1 column will include the x-coordinates of each click (from the top-left of the image), and the other will include the y-coordinates of each click (from the top-left of the image), both measured in pixels.

 

But it says nothing about where the boundaries of the regions are, or how to get that information.

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Answer
  • June 7, 2023

Hi, I don't think there is an easy way to get to this information, but I think there are 2 approaches you could take. The first and easiest is to generate a bunch of Test Responses, download the data to Excel, add a filter for Region 1 = 1, then look at the min and max values in the x and y coordinate columns. When I used a test image on my end with 700 test responses and a square Region 1, I got x min = 316, x max = 463, y min = 172, y max = 319.

The the more precise but difficult to parse approach would be to inspect the browser when viewing the Heat Map in the Survey Builder. The Region 1 element can be navigated to and the element should look something like the below:

<path fill="none" stroke="#ffffff" d="M315.5,169.5C315.5,169.5,465.5,169.5,465.5,169.5C465.5,169.5,465.5,319.5,465.5,319.5C465.5,319.5,315.5,319.5,315.5,319.5C315.5,319.5,315.5,169.5,315.5,169.5" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" opacity="0.2" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.2;"></path>

I see values in there that I believe are related to the positioning of the Region within the Heat Map image. I think the values parse out to x min = 315.5, x max = 465.5, y min = 169.5, y max = 319.5.

J
J
Level 1 ●
Forum|alt.badge.img+2
  • Jedi_LiU
  • Author
  • Level 1 ●
  • June 13, 2023

@Tom_1842 thank you, this solved it for me! I used the inspect element feature of my browser and using this site: https://css-tricks.com/svg-path-syntax-illustrated-guide/ I was able to interpret the numbers and get the coordinates. For anyone who searches for this in the future, here is the break down of my solution.

 

The inspected element:

<path fill="none" stroke="#ffffff" d="M156.5,156.5C156.5,156.5,1244.5,156.5,1244.5,156.5C1244.5,156.5,1244.5,1244.5,1244.5,1244.5C1244.5,1244.5,156.5,1244.5,156.5,1244.5C156.5,1244.5,156.5,156.5,156.5,156.5" stroke-linejoin="round" stroke-linecap="round" stroke-width="4" opacity="0.2" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-linejoin: round; stroke-linecap: round; opacity: 0.2;"></path>

My interpretation (from d=”...”):

 

M156.5,156.5

# start location
 

C156.5,156.5,

# bezier point 1
 

1244.5,156.5,

# bezier point 2
 

1244.5,156.5

# bezier point 3

# first line from 156.5,156.5 to 1244.5,156.5

 

C1244.5,156.5,1244.5,1244.5,1244.5,1244.5

# second line from 1244.5,156.5 to 1244.5,1244.5

 

C1244.5,1244.5,156.5,1244.5,156.5,1244.5

# third line from 1244.5,1244.5 to 156.5,1244.5

 

C156.5,1244.5,156.5,156.5,156.5,156.5

# fourth line from 156.5,1244.5 to 156.5,156.5
 

Terms & ConditionsAccessibility statement