IP Library Granted Patent US 12,675,927
Granted Patent B1
US 12,675,927 · App. 18/786,212 · Granted Jul 7, 2026

Heatmap visualization generation techniques

Inventors: Justin Wai-Yee De Luna (San Francisco, CA); Jeremy Robert Snyder (Seattle, WA); Eric Allen Wohlstadter (Menlo Park, CA)
Assignee: Cisco Technology, Inc.
G06T11/26G06F16/248
View Patent ↗
Loading inventors, assignments & file history…
Monitor This Case
Get email alerts when status or documents change.
Order Certified Copies
Most orders are placed with the USPTO same day — all within 24 business hours.
Order via The Patent Place →
Pre-filled with this patent's details
Quick Facts
Patent No.
US 12,675,927
App. No.
18/786,212
Granted
Jul 7, 2026
Kind
B1
Abstract

Techniques, which may be embodied herein as systems, computing devices, methods, algorithms, software, code, computer readable media, or the like, are described herein for generating heatmap visualizations. A heatmap visualization can be a graphical representation of data where the coordinates of a cell in the visualization can be a key that describes a group of data represented by the cell. The colors of a heatmap may indicate information about the data represented by the cell (e.g., the amount of data in the cell). These cells can be rendered by calculating a per-pixel metric rate for each dataset in the heatmap visualization and mapping a dataset's rate onto pixels within the visualization that correspond to the dataset. After this mapping, the maximum rate within the visualization can be used to determine the visualization's colors and the cells can be rendered by coloring each pixel (e.g. pixel row) in its corresponding color.

Claims (109)

1 . A computer-implemented method comprising:

receiving, by a visualization generation system, a request to display a visualization for a plurality of datasets, the visualization comprising a first axis representing a plurality of timepoints and a second axis representing values associated with a metric, each dataset in the plurality of datasets comprising time information for the dataset and a range of metric values;

for a first dataset in the plurality of datasets:

identifying a first timepoint along the first axis based upon the time information associated with the first dataset;

identifying a columnar area of pixels in the visualization corresponding to the first timepoint, wherein the columnar area has a width of pixels (W) and a height of pixels (H); and

identifying, based upon a range of metric values included in the first dataset, a first portion of the columnar area of pixels for representing the first dataset that is characterized by a first height of pixels;

determining a first color from a plurality of colors for displaying the first portion for representing the first dataset;

for a second dataset in the plurality of datasets, identifying, based upon a range of metric values included in the second dataset, a second portion of the columnar area of pixels for representing the second dataset, wherein the second portion of the columnar area is characterized by a second height of pixels that is different from the first height of pixels; and

displaying the visualization, wherein the displayed visualization comprises:

the first axis representing the plurality of timepoints and the second axis representing values associated with the metric, and

the first portion representing the first dataset rendered in the first color.

2 . The method of claim 1 , wherein the identifying the first portion comprises:

determining a lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values, and

determining an upper row of pixels of the columnar area based on a highest value in the range of metric values, wherein the first portion of the columnar area is characterized by a first height of pixels starting at the lower row and ending at the upper row of pixels.

3 . The method of claim 2 , further comprising:

for the second dataset in the plurality of datasets:

identifying the first timepoint along the first axis based upon the time information associated with the second dataset;

identifying the columnar area of pixels in the visualization corresponding to the first timepoint; and

wherein the identifying the second portion of the columnar area of pixels for representing the second dataset comprises:

determining a second lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values included in the second dataset, and

determining a second upper row of pixels of the columnar area based on a highest value in the range of metric values included in the second dataset, wherein the second portion of the columnar area is characterized by the second height of pixels starting at the second lower row of pixels and ending at the second upper row of pixels;

determining a second color from the plurality of colors for displaying the second portion for representing the second dataset; and

displaying the visualization, wherein the displayed visualization comprises the second portion representing the second dataset rendered in the second color.

4 . The method of claim 2 , wherein the first portion and a third portion overlap:

for an overlap portion of the columnar area of the pixels in the visualization corresponding to the first timepoint:

for a third dataset in the plurality of datasets:

identifying the first timepoint along the first axis based upon the time information associated with the third dataset;

identifying the columnar area of pixels in the visualization corresponding to the first timepoint; and

identifying, based upon a range of metric values included in both the first dataset and the third dataset, the overlap portion of the columnar area of pixels for representing both the first dataset and the second dataset, wherein identifying the overlap portion comprises;

determining a second lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values included in both the first dataset and the third dataset, and

determining a second upper row of pixels of the columnar area based on a highest value in the range of metric values included in both the first dataset and the third dataset, wherein the overlap portion of the columnar area is characterized by a third height of pixels starting at the second lower row and ending at the second upper row of pixels, wherein the third height of pixels is different from the first height of pixels; and

determining a second color from a plurality of colors for displaying the overlap portion;

wherein displaying the visualization comprises displaying the overlap portion in the second color.

5 . The method of claim 1 , wherein the time information comprises a plurality of timepoints corresponding to the plurality of datasets, wherein a number of timepoints of the plurality of timepoints is less than a number of datasets in the plurality of datasets.

6 . The method of claim 1 , wherein the request to display the visualization includes information identifying a first axis of pixels for the visualization and a second axis of pixels for the visualization.

7 . The method of claim 1 , wherein the request to display the visualization is received from a web browser application that is executing on a client device.

8 . A computing device comprising:

a processor; and

a non-transitory, computer-readable medium having stored thereon instructions that, when executed by the processor, cause the processor to:

receive, by a visualization generation system, a request to display a visualization for a plurality of datasets, the visualization comprising a first axis representing a plurality of timepoints and a second axis representing values associated with a metric, each dataset in the plurality of datasets comprising time information for the dataset and a range of metric values;

for a first dataset in the plurality of datasets:

identify a first timepoint along the first axis based upon the time information associated with the first dataset;

identify a columnar area of pixels in the visualization corresponding to the first timepoint, wherein the columnar area has a width of pixels (W) and a height of pixels (H); and

identify, based upon a range of metric values included in the first dataset, a first portion of the columnar area of pixels for representing the first dataset that is characterized by a first height of pixels;

determine a first color from a plurality of colors for displaying the first portion for representing the first dataset;

for a second dataset in the plurality of datasets, identify, based upon a range of metric values included in the second dataset, a second portion of the columnar area of pixels for representing the second dataset, wherein the second portion of the columnar area is characterized by a second height of pixels that is different from the first height of pixels; and

displaying the visualization, wherein the displayed visualization comprises:

the first axis representing the plurality of timepoints and the second axis representing values associated with the metric, and

the first portion representing the first dataset rendered in the first color.

9 . The computing device of claim 8 , wherein identifying the first portion comprises instructions that cause the processor to:

determine a lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values, and

determine an upper row of pixels of the columnar area based on a highest value in the range of metric values, wherein the first portion of the columnar area is characterized by a first height of pixels starting at the lower row and ending at the upper row of pixels.

10 . The computing device of claim 9 further comprising instructions to cause the processor to:

for the second dataset in the plurality of datasets:

identify the first timepoint along the first axis based upon the time information associated with the second dataset;

identify the columnar area of pixels in the visualization corresponding to the first timepoint; and

wherein the identifying the second portion of the columnar area of pixels for representing the second dataset comprises:

determining a second lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values included in the second dataset, and

determining a second upper row of pixels of the columnar area based on a highest value in the range of metric values included in the second dataset, wherein the second portion of the columnar area is characterized by the second height of pixels starting at the second lower row of pixels and ending at the second upper row of pixels;

determine a second color from the plurality of colors for displaying the second portion for representing the second dataset; and

displaying the visualization, wherein the displayed visualization comprises the second portion rendered in the second color.

11 . The computing device of claim 9 , wherein the first portion and a third portion overlap:

for an overlap portion of the columnar area of the pixels in the visualization corresponding to the first timepoint the instructions cause the processor to:

for a third dataset in the plurality of datasets:

identify the first timepoint along the first axis based upon the time information associated with the third dataset;

identify the columnar area of pixels in the visualization corresponding to the first timepoint; and

identify, based upon a range of metric values included in both the first dataset and the third dataset, the overlap portion of the columnar area of pixels for representing both the first dataset and the second dataset, wherein identifying the overlap portion comprises:

determine a second lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values included in both the first dataset and the third dataset, and

determine a second upper row of pixels of the columnar area based on a highest value in the range of metric values included in both the first dataset and the third dataset, wherein the overlap portion of the columnar area is characterized by a third height of pixels starting at the second lower row and ending at the second upper row of pixels, wherein the third height of pixels is different from the first height of pixels; and

determine a second color from a plurality of colors for displaying the overlap portion;

wherein displaying the visualization comprises displaying the overlap portion in the second color.

12 . The computing device of claim 8 , wherein the time information comprises a plurality of timepoints corresponding to the plurality of datasets, wherein a number of timepoints of the plurality of timepoints is less than a number of datasets in the plurality of datasets.

13 . The computing device of claim 8 , wherein the request to display the visualization includes information identifying a first axis of pixels for the visualization and a second axis of pixels for the visualization.

14 . The computing device of claim 8 , wherein the request to display the visualization is received from a web browser application that is executing on a client device.

15 . A non-transitory, computer-readable medium having stored thereon instructions that, when executed by one or more processors, cause the one or more processors to perform a process comprising:

receiving, by a visualization generation system, a request to display a visualization for a plurality of datasets, the visualization comprising a first axis representing a plurality of timepoints and a second axis representing values associated with a metric, each dataset in the plurality of datasets comprising time information for the dataset and a range of metric values;

for a first dataset in the plurality of datasets:

identifying a first timepoint along the first axis based upon the time information associated with the first dataset;

identifying a columnar area of pixels in the visualization corresponding to the first timepoint, wherein the columnar area has a width of pixels (W) and a height of pixels (H); and

identifying, based upon a range of metric values included in the first dataset, a first portion of the columnar area of pixels for representing the first dataset that is characterized by a first height of pixels;

determining a first color from a plurality of colors for displaying the first portion for representing the first dataset;

for a second dataset in the plurality of datasets, identifying, based upon a range of metric values included in the second dataset, a second portion of the columnar area of pixels for representing the second dataset, wherein the second portion of the columnar area is characterized by a second height of pixels that is different from the first height of pixels; and

displaying the visualization, wherein the displayed visualization comprises:

the first axis representing the plurality of timepoints and the second axis representing values associated with the metric, and

the first portion representing the first dataset rendered in the first color.

16 . The non-transitory, computer-readable medium of claim 15 , wherein the identifying the first portion comprises:

determining a lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values, and

determining an upper row of pixels of the columnar area based on a highest value in the range of metric values, wherein the first portion of the columnar area is characterized by a first height of pixels starting at the lower row and ending at the upper row of pixels.

17 . The non-transitory, computer-readable medium of claim 16 , wherein the process further comprises:

for the second dataset in the plurality of datasets:

identifying the first timepoint along the first axis based upon the time information associated with the second dataset;

identifying the columnar area of pixels in the visualization corresponding to the first timepoint; and

wherein the identifying the second portion of the columnar area of pixels for representing the second dataset comprises:

determining a second lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values included in the second dataset, and

determining a second upper row of pixels of the columnar area based on a highest value in the range of metric values included in the second dataset, wherein the second portion of the columnar area is characterized by the second height of pixels starting at the second lower row of pixels and ending at the second upper row of pixels;

determining a second color from the plurality of colors for displaying the second portion for representing the second dataset; and

displaying the visualization, wherein the displayed visualization comprises the second portion rendered in the second color.

18 . The non-transitory, computer-readable medium of claim 16 , wherein the first portion and a third portion overlap:

for an overlap portion of the columnar area of the pixels in the visualization corresponding to the first timepoint the process further comprises:

for a third dataset in the plurality of datasets:

identifying the first timepoint along the first axis based upon the time information associated with the third dataset;

identifying the columnar area of pixels in the visualization corresponding to the first timepoint; and

identifying, based upon a range of metric values included in both the first dataset and the third dataset, the overlap portion of the columnar area of pixels for representing both the first dataset and the second dataset, wherein identifying the overlap portion comprises:

determining a second lower row of pixels of the columnar area of pixels based on a lowest value in the range of metric values included in both the first dataset and the third dataset, and

determining a second upper row of pixels of the columnar area based on a highest value in the range of metric values included in both the first dataset and the third dataset, wherein the overlap portion of the columnar area is characterized by a third height of pixels starting at the second lower row and ending at the second upper row of pixels, wherein the third height of pixels is different from the first height of pixels; and

determining a second color from a plurality of colors for displaying the overlap portion;

wherein displaying the visualization comprises displaying the overlap portion in the second color.

19 . The non-transitory, computer-readable medium of claim 15 , wherein the time information comprises a plurality of timepoints corresponding to the plurality of datasets, wherein a number of timepoints of the plurality of timepoints is less than a number of datasets in the plurality of datasets.

20 . The non-transitory, computer-readable medium of claim 15 , wherein the request to display the visualization includes information identifying a first axis of pixels for the visualization and a second axis of pixels for the visualization.