{cellData.courses.join(', ')}

\n \n {/* Arrow marker definition */}\n \n \n \n \n \n\n {/* Secondary (horizontal) axis label */}\n \n Secondary Taste →\n \n\n {/* Minor taste labels (top, horizontal) */}\n {TASTE_KEYS.map((taste, index) => (\n \n \n {taste.charAt(0).toUpperCase() + taste.slice(1)}\n \n \n ))}\n\n {/* Primary (vertical) axis label */}\n \n Primary Taste ↓\n \n\n {/* Major taste labels (left, vertical) */}\n {TASTE_KEYS.map((taste, index) => (\n \n {taste.charAt(0).toUpperCase() + taste.slice(1)}\n \n ))}\n\n {/* Heatmap cells */}\n {TASTE_KEYS.map((major, majorIndex) =>\n TASTE_KEYS.map((minor, minorIndex) => {\n const cellData = matrix[major][minor];\n const count = cellData.count;\n const hasData = count > 0;\n const isDiagonal = major === minor;\n\n // Color warmth based on count (0 to maxCount)\n // Use a warm color gradient: cool -> warm\n const intensity = hasData ? count / maxCount : 0;\n \n // Create a warm color gradient using HSL\n // Cool = HSL(200, 70%, 60%) - light blue\n // Warm = HSL(10, 80%, 50%) - red/orange\n const hue = 200 - intensity * 190; // 200 (blue) to 10 (red)\n const saturation = 70;\n const lightness = 60 - intensity * 20; // Darker as warmer\n const backgroundColor = isDiagonal ? 'transparent' : `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n\n return (\n \n {/* Cell background */}\n \n\n {/* Diagonal indicator */}\n {isDiagonal && (\n \n N/A\n \n )}\n\n {/* Count of courses */}\n {hasData && !isDiagonal && (\n <>\n 0.5 ? '#fff' : '#333'}\n style={{ pointerEvents: 'none' }}\n >\n {count}\n \n\n {/* Tooltip with course names */}\n {cellData.courses.join(', ')}\n \n )}\n \n );\n })\n )}\n\n {/* Course journey line with arrows */}\n {/* {analysis.majorTasteSeries.length > 1 && (\n \n )} */}\n\n {/* Course journey points */}\n {analysis.majorTasteSeries.map((item, index) => {\n const majorIndex = TASTE_KEYS.indexOf(item.majorTaste as TasteKey);\n const minorIndex = TASTE_KEYS.indexOf(item.minorTaste as TasteKey);\n const x = labelWidth + minorIndex * cellSize + cellSize / 2;\n const y = topLabelHeight + majorIndex * cellSize + cellSize / 2;\n\n return (\n \n {/* Point circle */}\n \n {/* Point number label */}\n \n {index + 1}\n \n {/* Tooltip */}\n {`Course ${index + 1}: ${item.name}`}\n \n );\n })}\n\n {/* Legend */}\n \n \n Color: Few\n \n \n \n Many\n \n \n \n \n

\n );\n}\n","deleted","label",[176,177,178,179,180,158],"frontend","components","analysis","menu","charts","permalink","https://www.val.town/x/damonb/react-hono-with-react-router/code/frontend/components/analysis/menu/charts/TasteProfileHeatmap.tsx","extension","actionData","errors"]