{"id":1809,"date":"2026-07-21T13:00:00","date_gmt":"2026-07-21T18:00:00","guid":{"rendered":"https:\/\/tolinku.com\/blog\/?p=1809"},"modified":"2026-03-07T03:37:24","modified_gmt":"2026-03-07T08:37:24","slug":"deep-link-heatmaps","status":"publish","type":"post","link":"https:\/\/tolinku.com\/blog\/deep-link-heatmaps\/","title":{"rendered":"Deep Link Heatmaps: Visualizing Click Patterns"},"content":{"rendered":"\n

Tables tell you the numbers. Heatmaps tell you the patterns. A geographic heatmap instantly shows that your campaign is performing well in coastal US cities but failing in the Midwest. A time-based heatmap reveals that your push notification deep links get the most engagement at 8am and 6pm. These patterns are invisible in raw data.<\/p>\n\n\n\n

This guide covers heatmap visualizations for deep link analytics. For geographic analytics, see geographic analytics for deep link campaigns<\/a>. For visualization techniques, see visualizing deep link data: charts and dashboards<\/a>.<\/p>\n\n\n\n

\"Tolinku\nThe analytics dashboard with date range selector, filters, charts, and breakdowns.<\/em><\/p>\n\n\n\n

Types of Deep Link Heatmaps<\/h2>\n\n\n\n

Geographic Heatmap<\/h3>\n\n\n\n

A geographic heatmap (choropleth) colors countries, states, or cities by click volume or conversion rate:<\/p>\n\n\n\n

\n\n\n\n\n\n\n\n
Region<\/th>\nClicks<\/th>\nConversion Rate<\/th>\nColor Intensity<\/th>\n<\/tr>\n<\/thead>\n
California<\/td>\n8,200<\/td>\n14.5%<\/td>\nDark (high)<\/td>\n<\/tr>\n
Texas<\/td>\n4,100<\/td>\n12.8%<\/td>\nMedium<\/td>\n<\/tr>\n
New York<\/td>\n5,500<\/td>\n13.2%<\/td>\nMedium-dark<\/td>\n<\/tr>\n
Florida<\/td>\n3,800<\/td>\n11.5%<\/td>\nMedium<\/td>\n<\/tr>\n
Iowa<\/td>\n200<\/td>\n8.0%<\/td>\nLight (low)<\/td>\n<\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n

Geographic heatmaps expose regional patterns that a national average obscures. If your overall conversion rate is 12%, but California is at 14.5% and Iowa is at 8%, you can investigate why and optimize accordingly.<\/p>\n\n\n\n

Time-Based Heatmap<\/h3>\n\n\n\n

A time-based heatmap shows click activity by hour and day of week:<\/p>\n\n\n\n

Hour\/Day    Mon   Tue   Wed   Thu   Fri   Sat   Sun\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n06:00       \u2591\u2591    \u2591\u2591    \u2591\u2591    \u2591\u2591    \u2591\u2591    \u2591     \u2591\n07:00       \u2592\u2592    \u2592\u2592    \u2592\u2592    \u2592\u2592    \u2592\u2592    \u2591     \u2591\n08:00       \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2591\u2591    \u2591\n09:00       \u2588\u2588    \u2588\u2588    \u2588\u2588    \u2588\u2588    \u2593\u2593    \u2591\u2591    \u2591\n10:00       \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2592\u2592    \u2591\u2591\n11:00       \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2592\u2592    \u2592\u2592\n12:00       \u2588\u2588    \u2588\u2588    \u2588\u2588    \u2588\u2588    \u2588\u2588    \u2592\u2592    \u2592\u2592\n13:00       \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2592\u2592    \u2592\u2592\n...\n18:00       \u2588\u2588    \u2588\u2588    \u2588\u2588    \u2588\u2588    \u2593\u2593    \u2593\u2593    \u2593\u2593\n19:00       \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2593\u2593    \u2592\u2592    \u2593\u2593    \u2593\u2593\n\n\u2588 = High activity   \u2593 = Medium   \u2592 = Low   \u2591 = Very low\n<\/code><\/pre>\n\n\n\n
This pattern is common for B2C apps: weekday commute hours (8-9am, 6-7pm) and lunch (12pm) peak. Weekends shift later.<\/p>\n\n\n\n
Route Heatmap<\/h3>\n\n\n\n
Show which deep link routes receive the most traffic:<\/p>\n\n\n\n
SELECT\n  route,\n  source,\n  COUNT(*) AS clicks,\n  ROUND(SUM(CASE WHEN outcome = 'app_opened' THEN 1 ELSE 0 END)::DECIMAL \/ COUNT(*) * 100, 1) AS open_rate\nFROM deep_link_clicks\nWHERE timestamp >= NOW() - INTERVAL '7 days'\nGROUP BY route, source\nORDER BY clicks DESC;\n<\/code><\/pre>\n\n\n\n
\n\n\n\n\n\n\n\n
Route<\/th>\nEmail<\/th>\nPush<\/th>\nSocial<\/th>\nQR<\/th>\nTotal<\/th>\n<\/tr>\n<\/thead>\n
\/offers\/summer<\/code><\/td>\n5,200<\/td>\n3,800<\/td>\n1,200<\/td>\n800<\/td>\n11,000<\/td>\n<\/tr>\n
\/products\/:id<\/code><\/td>\n3,100<\/td>\n1,500<\/td>\n2,400<\/td>\n200<\/td>\n7,200<\/td>\n<\/tr>\n
\/referral<\/code><\/td>\n800<\/td>\n0<\/td>\n3,500<\/td>\n0<\/td>\n4,300<\/td>\n<\/tr>\n
\/dashboard<\/code><\/td>\n1,200<\/td>\n2,100<\/td>\n0<\/td>\n0<\/td>\n3,300<\/td>\n<\/tr>\n
\/settings<\/code><\/td>\n400<\/td>\n800<\/td>\n0<\/td>\n0<\/td>\n1,200<\/td>\n<\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n
Color each cell by intensity. This reveals which routes are driven by which channels, and which combinations are underutilized.<\/p>\n\n\n\n
Building Heatmaps<\/h2>\n\n\n\n
Data Preparation<\/h3>\n\n\n\n
Transform raw click data into a matrix for heatmap rendering:<\/p>\n\n\n\n
interface HeatmapCell {\n  row: string;    \/\/ e.g., hour of day\n  column: string; \/\/ e.g., day of week\n  value: number;  \/\/ e.g., click count\n}\n\nfunction buildTimeHeatmap(clicks: ClickData[]): HeatmapCell[] {\n  const matrix: Record<string, Record<string, number>> = {};\n\n  for (const click of clicks) {\n    const date = new Date(click.timestamp);\n    const hour = date.getUTCHours().toString().padStart(2, '0') + ':00';\n    const day = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][date.getUTCDay()];\n\n    if (!matrix[hour]) matrix[hour] = {};\n    matrix[hour][day] = (matrix[hour][day] || 0) + 1;\n  }\n\n  const cells: HeatmapCell[] = [];\n  for (const [hour, days] of Object.entries(matrix)) {\n    for (const [day, count] of Object.entries(days)) {\n      cells.push({ row: hour, column: day, value: count });\n    }\n  }\n\n  return cells;\n}\n<\/code><\/pre>\n\n\n\n
Color Scales<\/h3>\n\n\n\n
Choose a color scale that communicates intensity:<\/p>\n\n\n\n
\n\n\n\n\n\n
Scale<\/th>\nBest For<\/th>\nExample<\/th>\n<\/tr>\n<\/thead>\n
Sequential (white to blue)<\/td>\nSingle metric (click count)<\/td>\nMore clicks = darker blue<\/td>\n<\/tr>\n
Diverging (red to blue)<\/td>\nDeviation from average<\/td>\nBelow average = red, above = blue<\/td>\n<\/tr>\n
Categorical<\/td>\nOutcome type (app open, fallback, error)<\/td>\nGreen = open, yellow = fallback, red = error<\/td>\n<\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n
function getSequentialColor(value: number, max: number): string {\n  const intensity = Math.min(value \/ max, 1);\n  const r = Math.round(255 - (intensity * 200));\n  const g = Math.round(255 - (intensity * 150));\n  const b = 255;\n  return `rgb(${r}, ${g}, ${b})`;\n}\n\nfunction getDivergingColor(value: number, average: number, max: number): string {\n  const deviation = (value - average) \/ max;\n  if (deviation > 0) {\n    \/\/ Above average: blue\n    return `rgb(${Math.round(255 - deviation * 200)}, ${Math.round(255 - deviation * 150)}, 255)`;\n  } else {\n    \/\/ Below average: red\n    return `rgb(255, ${Math.round(255 + deviation * 200)}, ${Math.round(255 + deviation * 200)})`;\n  }\n}\n<\/code><\/pre>\n\n\n\n
Rendering with D3.js<\/h3>\n\n\n\n
import * as d3 from 'd3';\n\nfunction renderHeatmap(\n  container: HTMLElement,\n  data: HeatmapCell[],\n  config: { width: number; height: number; cellSize: number }\n) {\n  const svg = d3.select(container)\n    .append('svg')\n    .attr('width', config.width)\n    .attr('height', config.height);\n\n  const colorScale = d3.scaleSequential(d3.interpolateBlues)\n    .domain([0, d3.max(data, d => d.value) || 1]);\n\n  const rows = [...new Set(data.map(d => d.row))].sort();\n  const cols = [...new Set(data.map(d => d.column))];\n\n  svg.selectAll('rect')\n    .data(data)\n    .join('rect')\n    .attr('x', d => cols.indexOf(d.column) * config.cellSize)\n    .attr('y', d => rows.indexOf(d.row) * config.cellSize)\n    .attr('width', config.cellSize - 1)\n    .attr('height', config.cellSize - 1)\n    .attr('fill', d => colorScale(d.value))\n    .append('title')\n    .text(d => `${d.row} ${d.column}: ${d.value} clicks`);\n}\n<\/code><\/pre>\n\n\n\n
Use Cases<\/h2>\n\n\n\n
Optimizing Send Times<\/h3>\n\n\n\n
Use time heatmaps to find the best hours for push notifications and emails:<\/p>\n\n\n\n
SELECT\n  EXTRACT(HOUR FROM timestamp) AS hour,\n  EXTRACT(DOW FROM timestamp) AS day_of_week,\n  COUNT(*) AS clicks,\n  ROUND(SUM(CASE WHEN converted THEN 1 ELSE 0 END)::DECIMAL \/ COUNT(*) * 100, 1) AS conv_rate\nFROM deep_link_clicks\nWHERE source = 'push'\n  AND timestamp >= NOW() - INTERVAL '30 days'\nGROUP BY hour, day_of_week\nORDER BY conv_rate DESC;\n<\/code><\/pre>\n\n\n\n
If Tuesday at 9am has a 15% conversion rate but Friday at 3pm has 6%, schedule your high-value campaigns for Tuesday morning.<\/p>\n\n\n\n
Identifying Regional Issues<\/h3>\n\n\n\n
If your geographic heatmap shows high clicks but low conversions in a specific region, investigate:<\/p>\n\n\n\n