diff --git a/src/components/Tabs/ScatterPlotTab.tsx b/src/components/Tabs/ScatterPlotTab.tsx index 8dc5cce0..e89fbfa1 100644 --- a/src/components/Tabs/ScatterPlotTab.tsx +++ b/src/components/Tabs/ScatterPlotTab.tsx @@ -490,7 +490,9 @@ export default memo(function ScatterPlotTab(props: ScatterPlotTabProps): ReactEl trackIds: number[], markerConfig: Partial & { outliers?: Partial; outOfRange?: Partial } = {}, overrideColor?: Color, - allowHover = true + allowHover = true, + spreadXAxisPx = 0, + spreadYAxisPx = 0 ): Partial[] => { if (selectedFeatureKey === null || dataset === null || !xAxisFeatureKey || !yAxisFeatureKey) { return []; @@ -624,6 +626,8 @@ export default memo(function ScatterPlotTab(props: ScatterPlotTabProps): ReactEl color: bucket.color, size: 4, ...bucket.marker, + angle: 90, + standoff: Math.floor(Math.random() * 100 + 3), }, hoverinfo: allowHover ? "text" : "skip", hovertemplate: allowHover ? getHoverTemplate(dataset, xAxisFeatureKey, yAxisFeatureKey) : undefined, @@ -694,6 +698,26 @@ export default memo(function ScatterPlotTab(props: ScatterPlotTabProps): ReactEl selectedTrack === null ); + const isXAxisCategorical = dataset.isFeatureCategorical(xAxisFeatureKey); + const isYAxisCategorical = dataset.isFeatureCategorical(yAxisFeatureKey); + if (isXAxisCategorical && isYAxisCategorical) { + // Both axes are categorical; render a bubble plot + // TODO: Use standoff + angle to vary points + } else if (isXAxisCategorical || isYAxisCategorical) { + // Render a violin plot + add scatter along opposite axis + // TODO: Color violines by categorical color w/ some transparency + traces.push({ + type: "violin", + x: xData, + y: yData, + jitter: 0.1, + marker: { + size: 4, + }, + }); + } else { + } + const xHistogram: Partial = { x: xData, name: "x density",