\n {!isEmbeddedView && (\n

\n {config.question1}\n

\n {config.question2}\n

\n\n

\n {total} {total === 1 ? \"response\" : \"responses\"}\n

\n )}\n\n {isEmbeddedView && (\n

\n \n {config.question1}\n \n •\n \n {config.question2}\n \n \n ({total} {total === 1 ? \"response\" : \"responses\"})\n \n

\n )}\n\n {total === 0 ? (\n

📊

No responses yet

\n Waiting for participants to submit their answers...\n

\n ) : (\n

\n {/* 2x2 Grid Visualization with Axes */}\n \n \n {/* Main grid area */}\n \n {/* Grid lines */}\n \n {/* Vertical line */}\n \n {/* Horizontal line */}\n \n \n\n {/* Grid cells with counts */}\n {[\n {\n key: \"top-left\",\n x: 0,\n y: 0,\n label: \"Early Journey\\nRisk Averse\",\n },\n {\n key: \"top-right\",\n x: cellSize,\n y: 0,\n label: \"Late Journey\\nRisk Averse\",\n },\n {\n key: \"bottom-left\",\n x: 0,\n y: cellSize,\n label: \"Early Journey\\nRisk Taking\",\n },\n {\n key: \"bottom-right\",\n x: cellSize,\n y: cellSize,\n label: \"Late Journey\\nRisk Taking\",\n },\n ].map(({ key, x, y, label }) => {\n const count = gridData[key];\n const percentage =\n maxCount > 0 ? (count / maxCount) * 100 : 0;\n\n return (\n 0\n ? `linear-gradient(135deg, rgba(255, 46, 99, ${\n (percentage / 100) * 0.3\n }), rgba(255, 153, 51, ${\n (percentage / 100) * 0.3\n }))`\n : \"rgba(255, 255, 255, 0.3)\",\n }}\n >\n

\n {count}\n

\n {label}\n

\n );\n })}\n\n {/* Scatter plot overlay */}\n \n {points.map((point, index) => {\n const circleRadius = 6;\n const edgePadding = circleRadius + 2; // Padding to keep circles visible at edges\n\n // Normalize journey stage to 0-1 range\n const normalizedX =\n config.journeyStages.length > 1\n ? point.x / (config.journeyStages.length - 1)\n : 0.5;\n\n // Normalize risk aversion to 0-1 range\n // Low risk (riskScaleMin) should be at top (y=0), High risk (riskScaleMax) at bottom (y=gridSize)\n const riskRange = config.riskScaleMax - config.riskScaleMin;\n const normalizedY =\n riskRange > 0\n ? (point.y - config.riskScaleMin) / riskRange\n : 0.5;\n\n // Map to SVG coordinates with padding to keep circles visible\n // X: 0 to gridSize, with padding\n const x =\n edgePadding + normalizedX * (gridSize - 2 * edgePadding);\n // Y: Invert so low risk (normalizedY=0) is at top, high risk (normalizedY=1) at bottom\n const y =\n edgePadding +\n (1 - normalizedY) * (gridSize - 2 * edgePadding);\n\n // Generate stable offset based on point data to prevent overlapping\n // Use a simple hash function for consistent positioning\n const hash = (point.x * 31 + point.y * 17 + index) % 100;\n const angle = (hash / 100) * Math.PI * 2;\n const radius = (hash % 20) / 2; // Vary radius slightly\n const offsetX = Math.cos(angle) * radius;\n const offsetY = Math.sin(angle) * radius;\n\n return (\n \n );\n })}\n \n

\n\n {/* Y-axis label (Risk Aversion) - positioned to align with grid, accounting for rotation */}\n \n

\n {config.question2}\n

\n \n\n {/* X-axis label (Journey Stage) - positioned below category labels with gap */}\n \n

\n {config.question1}\n

\n \n\n {/* Y-axis category labels (Risk levels) - show numbers only */}\n \n {Array.from(\n { length: config.riskScaleMax - config.riskScaleMin + 1 },\n (_, i) => {\n const value = config.riskScaleMin + i;\n const normalizedY =\n (value - config.riskScaleMin) /\n (config.riskScaleMax - config.riskScaleMin);\n const y = (1 - normalizedY) * gridSize; // Invert for SVG coordinates\n\n return (\n \n {value}\n \n );\n }\n )}\n \n\n {/* X-axis category labels (Journey stages) - show numbers only */}\n \n {config.journeyStages.map((stage, index) => {\n const normalizedX =\n config.journeyStages.length > 1\n ? index / (config.journeyStages.length - 1)\n : 0.5;\n const x = normalizedX * gridSize;\n\n return (\n \n {index + 1}\n \n );\n })}\n \n \n \n\n {/* Legend - Show number to label mapping for both axes */}\n

\n Journey Stages\n

\n {config.journeyStages.map((stage, index) => (\n \n \n {index + 1}\n \n {stage}\n

\n ))}\n

\n Risk Aversion Levels\n

\n {riskLabels.map((label, index) => {\n const value = config.riskScaleMin + index;\n return (\n \n \n {value}\n \n {label}\n

\n );\n })}\n

\n \n \n \n )}\n \n );\n}\n","deleted","label",[168,169,170,149],"frontend","components","widgets","permalink","https://www.val.town/x/fwfben/live-talk/code/frontend/components/widgets/Poll2DPresenter.tsx","extension","actionData","errors"]