diff --git a/app/components/Chart/SplitSparkline.vue b/app/components/Chart/SplitSparkline.vue
index 583f36a909..3f164d0067 100644
--- a/app/components/Chart/SplitSparkline.vue
+++ b/app/components/Chart/SplitSparkline.vue
@@ -244,7 +244,7 @@ const configs = computed(() => {
 
           <template #skeleton>
             <!-- This empty div overrides the default built-in scanning animation on load -->
-            <div />
+            <div></div>
           </template>
         </VueUiSparkline>
       </div>
diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 0162f52930..c189d83afa 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -170,6 +170,9 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
       style: {
         chart: {
           backgroundColor: colors.value.bg,
+          legend: {
+            show: false,
+          },
         },
       },
     },
@@ -278,7 +281,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
 
 <template>
   <div class="font-mono facet-bar">
-    <ClientOnly v-if="dataset.length">
+    <ClientOnly v-if="packages.length">
       <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
         <template #hint="{ isVisible }">
           <p v-if="isVisible" class="text-accent text-xs pt-2" aria-hidden="true">
@@ -339,40 +342,25 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
             aria-hidden="true"
           />
         </template>
-      </VueUiHorizontalBar>
 
-      <template #fallback>
-        <div class="flex flex-col gap-2 justify-center items-center mb-2">
-          <SkeletonInline class="h-4 w-16" />
-          <SkeletonInline class="h-4 w-28" />
-        </div>
-        <div class="flex flex-col gap-1">
-          <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
-        </div>
-      </template>
+        <template #skeleton>
+          <!-- This empty div overrides the default built-in scanning animation on load -->
+          <div></div>
+        </template>
+      </VueUiHorizontalBar>
     </ClientOnly>
-
-    <template v-else>
-      <div class="flex flex-col gap-2 justify-center items-center mb-2">
-        <SkeletonInline class="h-4 w-16" />
-        <SkeletonInline class="h-4 w-28" />
-      </div>
-      <div class="flex flex-col gap-1">
-        <SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
-      </div>
-    </template>
   </div>
 </template>
 
 <style scoped>
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 1px solid var(--accent-color) !important;
+  outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 3px !important;
 }
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
 </style>
diff --git a/app/components/Compare/FacetQuadrantChart.vue b/app/components/Compare/FacetQuadrantChart.vue
deleted file mode 100644
index 0dc829c847..0000000000
--- a/app/components/Compare/FacetQuadrantChart.vue
+++ /dev/null
@@ -1,547 +0,0 @@
-<script setup lang="ts">
-import { VueUiQuadrant } from 'vue-data-ui/vue-ui-quadrant'
-import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
-import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
-import {
-  createQuadrantDataset,
-  type PackageQuadrantInput,
-  type PackageQuadrantPoint,
-} from '~/utils/compare-quadrant-chart'
-import type { VueUiQuadrantConfig, VueUiQuadrantDatasetItem } from 'vue-data-ui'
-import {
-  sanitise,
-  loadFile,
-  applyEllipsis,
-  copyAltTextForCompareQuadrantChart,
-} from '~/utils/charts'
-import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
-
-import('vue-data-ui/style.css')
-
-const props = defineProps<{
-  packagesData: ReadonlyArray<PackageComparisonData | null>
-  packages: string[]
-}>()
-
-const colorMode = useColorMode()
-const resolvedMode = shallowRef<'light' | 'dark'>('light')
-const rootEl = shallowRef<HTMLElement | null>(null)
-const { width } = useElementSize(rootEl)
-const { copy, copied } = useClipboard()
-const compactNumberFormatter = useCompactNumberFormatter()
-const bytesFormatter = useBytesFormatter()
-
-const mobileBreakpointWidth = 640
-const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
-
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--fg-subtle',
-    '--fg-muted',
-    '--border',
-    '--border-subtle',
-    '--border-hover',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false,
-  },
-)
-
-const watermarkColors = computed(() => ({
-  fg: colors.value.fg ?? OKLCH_NEUTRAL_FALLBACK,
-  bg: colors.value.bg ?? OKLCH_NEUTRAL_FALLBACK,
-  fgSubtle: colors.value.fgSubtle ?? OKLCH_NEUTRAL_FALLBACK,
-}))
-
-onMounted(async () => {
-  rootEl.value = document.documentElement
-  resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
-})
-
-watch(
-  () => colorMode.value,
-  value => {
-    resolvedMode.value = value === 'dark' ? 'dark' : 'light'
-  },
-  { flush: 'sync' },
-)
-
-const isDarkMode = computed(() => resolvedMode.value === 'dark')
-
-const source = computed<PackageQuadrantInput[]>(() => {
-  if (!props.packagesData?.length) return []
-
-  return props.packagesData
-    .map((packageItem, index): PackageQuadrantInput | null => {
-      if (!packageItem?.package?.name) return null
-
-      const packageNameFromQuery = props.packages[index]
-      if (!packageNameFromQuery || packageNameFromQuery === NO_DEPENDENCY_ID) {
-        return null
-      }
-
-      const typesKind = packageItem.analysis?.types?.kind
-      const hasTypes = typesKind === 'included' || typesKind === '@types'
-
-      return {
-        license: packageItem.metadata?.license ?? '',
-        id: packageItem.package.name,
-        name: packageItem.package.name,
-        downloads: Number(packageItem.downloads ?? 0),
-        totalLikes: Number(packageItem.totalLikes ?? 0),
-        packageSize: Number(packageItem.packageSize ?? 0),
-        installSize: Number(packageItem.installSize?.totalSize ?? 0),
-        dependencies: Number(packageItem.directDeps ?? 0),
-        totalDependencies: Number(packageItem.installSize?.dependencyCount ?? 0),
-        vulnerabilities: Number(packageItem.vulnerabilities?.count ?? 0),
-        deprecated: Boolean(packageItem.metadata?.deprecated),
-        types: hasTypes,
-        lastUpdated: packageItem.metadata?.lastUpdated ?? null,
-      }
-    })
-    .filter((packageItem): packageItem is PackageQuadrantInput => packageItem !== null)
-})
-
-const rawQuadrant = computed(() => createQuadrantDataset(source.value))
-const dataset = computed<VueUiQuadrantDatasetItem[]>(() => {
-  return rawQuadrant.value.map((el: PackageQuadrantPoint) => {
-    return {
-      adoptionScore: el.adoptionScore,
-      efficiencyScore: el.efficiencyScore,
-      id: el.id,
-      license: el.license,
-      metrics: el.metrics,
-      quadrant: el.quadrant,
-      fullname: el.name,
-      name: applyEllipsis(el.name, 20),
-      shape: 'circle',
-      color: isListedFramework(el.name) ? getFrameworkColor(el.name) : undefined,
-      series: [
-        {
-          name: applyEllipsis(el.name, 20),
-          x: el.x,
-          y: el.y,
-        },
-      ],
-    }
-  })
-})
-
-function buildExportFilename(extension: string): string {
-  const translatedPrefix = sanitise($t('compare.quadrant_chart.filename'))
-  return `${translatedPrefix}.${extension}`
-}
-
-const config = computed<VueUiQuadrantConfig>(() => {
-  return {
-    theme: isDarkMode.value ? 'dark' : '',
-    zoomEnabled: false,
-    userOptions: {
-      buttons: {
-        tooltip: false,
-        pdf: false,
-        fullscreen: false,
-        table: false,
-        csv: false,
-        altCopy: true,
-        labels: false,
-      },
-      buttonTitles: {
-        csv: $t('package.trends.download_file', { fileType: 'CSV' }),
-        img: $t('package.trends.download_file', { fileType: 'PNG' }),
-        svg: $t('package.trends.download_file', { fileType: 'SVG' }),
-        annotator: $t('package.trends.toggle_annotator'),
-        open: $t('package.trends.open_options'),
-        close: $t('package.trends.close_options'),
-      },
-      callbacks: {
-        img: args => {
-          const imageUri = args?.imageUri
-          if (!imageUri) return
-          loadFile(imageUri, buildExportFilename('png'))
-        },
-        svg: args => {
-          const blob = args?.blob
-          if (!blob) return
-          const url = URL.createObjectURL(blob)
-          loadFile(url, buildExportFilename('svg'))
-          URL.revokeObjectURL(url)
-        },
-        altCopy: ({ dataset: dst, config: cfg }) => {
-          copyAltTextForCompareQuadrantChart({
-            dataset: dst,
-            config: {
-              ...cfg,
-              copy,
-              $t,
-            },
-          })
-        },
-      },
-    },
-    style: {
-      chart: {
-        backgroundColor: colors.value.bg,
-        layout: {
-          areas: { show: false },
-          grid: {
-            stroke: colors.value.borderHover,
-            graduations: {
-              show: true,
-              stroke: colors.value.border,
-              color: colors.value.border,
-              steps: 5,
-              roundingForce: 6,
-              fill: isDarkMode.value,
-            },
-            xAxis: {
-              name: $t('compare.quadrant_chart.label_x_axis'),
-              show: false,
-            },
-            yAxis: {
-              name: $t('compare.quadrant_chart.label_y_axis'),
-              show: false,
-            },
-          },
-          labels: {
-            axisLabels: {
-              fontSize: 14,
-              color: {
-                positive: colors.value.fgSubtle,
-                negative: colors.value.fgSubtle,
-              },
-            },
-            plotLabels: {
-              fontSize: 14,
-              offsetY: 16,
-              color: colors.value.fg,
-            },
-            quadrantLabels: {
-              tr: {
-                text: $t('compare.quadrant_chart.label_top_right').toLocaleUpperCase(),
-                fontSize: 12,
-                color: colors.value.fgSubtle,
-                bold: false,
-              },
-              br: {
-                text: $t('compare.quadrant_chart.label_bottom_right').toLocaleUpperCase(),
-                fontSize: 12,
-                color: colors.value.fgSubtle,
-                bold: false,
-              },
-              bl: {
-                text: $t('compare.quadrant_chart.label_bottom_left').toLocaleUpperCase(),
-                fontSize: 12,
-                color: colors.value.fgSubtle,
-                bold: false,
-              },
-              tl: {
-                text: $t('compare.quadrant_chart.label_top_left').toLocaleUpperCase(),
-                fontSize: 12,
-                color: colors.value.fgSubtle,
-                bold: false,
-              },
-            },
-          },
-        },
-        legend: { show: false },
-        tooltip: {
-          show: !isMobile.value,
-          borderColor: 'transparent',
-          backdropFilter: false,
-          backgroundColor: 'transparent',
-          showShape: false,
-          customFormat: ({ datapoint }) => {
-            const isDeprecated = !!datapoint?.category?.metrics?.deprecated
-            return `
-            <div class="font-mono p-3 border border-border rounded-md bg-bg/10 backdrop-blur-md">
-              <div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3 border-b border-border pb-2 mb-2">
-
-                <div class="w-3 h-3">
-                  <svg viewBox="0 0 20 20" class="w-full h-full" aria-hidden="true">
-                    <circle cx="10" cy="10" r="10" fill="${datapoint?.color ?? 'transparent'}" />
-                  </svg>
-                </div>
-                <span class="text-3xs uppercase tracking-wide text-fg/70 truncate">
-                  ${sanitise(datapoint?.name ?? '')}
-                </span>
-
-                <div class="text-fg-subtle text-xs border border-border rounded-sm px-1">
-                  ${sanitise(datapoint?.category?.license)}
-                </div>
-              </div>
-
-              ${isDeprecated ? `<div class="text-xs text-red-700 dark:text-red-400 my-1">${$t('package.deprecation.package')}</div>` : ``}
-
-              <div class="text-fg text-xs">${$t('compare.quadrant_chart.label_x_axis')}</div>
-              <div class="flex flex-col text-xs">
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.facets.items.downloads.label')}</span>
-                  <span class="text-fg text-sm">${compactNumberFormatter.value.format(datapoint?.category?.metrics.downloads ?? 0)}</span>
-                </div>
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.facets.items.totalLikes.label')}</span>
-                  <span class="text-fg text-sm">${compactNumberFormatter.value.format(datapoint?.category?.metrics.totalLikes ?? 0)}</span>
-                </div>
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.quadrant_chart.label_freshness_score')}</span>
-                  <span class="text-fg text-sm">${Math.round(datapoint?.category?.metrics.freshnessPercent ?? 0)}%</span>
-                </div>
-
-                <div class="text-fg text-xs mt-4">${$t('compare.quadrant_chart.label_y_axis')}</div>
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.facets.items.installSize.label')}</span>
-                  <span class="text-fg text-sm">${bytesFormatter.format(datapoint?.category?.metrics.installSize ?? 0)}</span>
-                </div>
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.facets.items.packageSize.label')}</span>
-                  <span class="text-fg text-sm">${bytesFormatter.format(datapoint?.category?.metrics.packageSize ?? 0)}</span>
-                </div>
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.facets.items.dependencies.label')}</span>
-                  <span class="text-fg text-sm">${datapoint?.category?.metrics.dependencies ?? 0}</span>
-                </div>
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.facets.items.totalDependencies.label')}</span>
-                  <span class="text-fg text-sm">${datapoint?.category?.metrics.totalDependencies ?? 0}</span>
-                </div>
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.facets.items.vulnerabilities.label')}</span>
-                  <span class="text-fg text-sm">${datapoint?.category?.metrics.vulnerabilities ?? 0}</span>
-                </div>
-                <div class="flex flex-row items-baseline gap-2">
-                  <span class="text-fg-subtle">${$t('compare.facets.items.types.label')}</span>
-                  <span class="text-fg text-sm">${datapoint?.category?.metrics.types ? $t('common.yes') : $t('common.no')}</span>
-                </div>
-              </div>
-            </div>
-            `
-          },
-        },
-      },
-    },
-  }
-})
-</script>
-
-<template>
-  <div class="font-mono">
-    <div class="flex items-center justify-center gap-2">
-      <h3>
-        {{ $t('compare.quadrant_chart.title') }}
-      </h3>
-      <TooltipApp interactive>
-        <button
-          type="button"
-          class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
-          :aria-label="$t('compare.quadrant_chart.explanation.tooltip_help')"
-        />
-        <template #content>
-          <div class="flex flex-col gap-3">
-            <p class="text-xs text-fg-muted">
-              {{ $t('compare.quadrant_chart.explanation.introduction') }}
-            </p>
-            <ul class="text-xs text-fg-subtle list-disc list-inside">
-              <li>{{ $t('compare.quadrant_chart.explanation.adoption') }}</li>
-              <li>{{ $t('compare.quadrant_chart.explanation.efficiency') }}</li>
-            </ul>
-            <p class="text-xs text-fg-muted">
-              {{ $t('compare.quadrant_chart.explanation.impact_details') }}
-            </p>
-          </div>
-        </template>
-      </TooltipApp>
-    </div>
-    <ClientOnly>
-      <VueUiQuadrant :dataset :config>
-        <template #svg="{ svg }">
-          <g
-            v-if="svg.isPrintingSvg || svg.isPrintingImg"
-            v-html="
-              drawNpmxLogoAndTaglineWatermark({
-                svg: {
-                  width: svg.width,
-                  height: svg.height,
-                  drawingArea: {
-                    top: svg.top,
-                    height: svg.height,
-                  },
-                },
-                colors: watermarkColors,
-                translateFn: $t,
-                positioning: 'bottom',
-                sizeRatioTagline: 0.5,
-                sizeRatioLogo: 0.4,
-                offsetYTagline: 0,
-                offsetYLogo: -8,
-              })
-            "
-          />
-
-          <foreignObject :x="0" :y="30" style="overflow: visible" :width="svg.width" :height="12">
-            <div class="flex items-center justify-center gap-2">
-              <TooltipApp interactive>
-                <button
-                  data-dom-to-png-ignore
-                  type="button"
-                  class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
-                  :aria-label="$t('compare.quadrant_chart.explanation.tooltip_help_efficiency')"
-                />
-                <template #content>
-                  <div class="flex flex-col gap-3">
-                    <p class="text-xs text-fg-muted">
-                      {{ $t('compare.quadrant_chart.explanation.efficiency') }}
-                    </p>
-                  </div>
-                </template>
-              </TooltipApp>
-            </div>
-          </foreignObject>
-
-          <foreignObject
-            :x="svg.width - 40"
-            :y="svg.height / 2 - 8"
-            style="overflow: visible"
-            :width="20"
-            :height="12"
-          >
-            <div class="flex items-center justify-center gap-2">
-              <TooltipApp interactive>
-                <button
-                  data-dom-to-png-ignore
-                  type="button"
-                  class="i-lucide:info w-3.5 h-3.5 text-fg-muted cursor-help"
-                  :aria-label="$t('compare.quadrant_chart.explanation.tooltip_help_adoption')"
-                />
-                <template #content>
-                  <div class="flex flex-col gap-3">
-                    <p class="text-xs text-fg-muted">
-                      {{ $t('compare.quadrant_chart.explanation.adoption') }}
-                    </p>
-                  </div>
-                </template>
-              </TooltipApp>
-            </div>
-          </foreignObject>
-        </template>
-
-        <template #menuIcon="{ isOpen }">
-          <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
-          <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
-        </template>
-        <template #optionImg>
-          <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
-        </template>
-        <template #optionSvg>
-          <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
-        </template>
-
-        <template #annotator-action-close>
-          <span
-            class="i-lucide:x w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #annotator-action-color="{ color }">
-          <span class="i-lucide:palette w-6 h-6" :style="{ color }" aria-hidden="true" />
-        </template>
-        <template #annotator-action-draw="{ mode }">
-          <span
-            v-if="mode === 'arrow'"
-            class="i-lucide:move-up-right text-fg-subtle w-6 h-6"
-            aria-hidden="true"
-          />
-          <span
-            v-if="mode === 'text'"
-            class="i-lucide:type text-fg-subtle w-6 h-6"
-            aria-hidden="true"
-          />
-          <span
-            v-if="mode === 'line'"
-            class="i-lucide:pen-line text-fg-subtle w-6 h-6"
-            aria-hidden="true"
-          />
-          <span
-            v-if="mode === 'draw'"
-            class="i-lucide:line-squiggle text-fg-subtle w-6 h-6"
-            aria-hidden="true"
-          />
-        </template>
-        <template #annotator-action-undo>
-          <span
-            class="i-lucide:undo-2 w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #annotator-action-redo>
-          <span
-            class="i-lucide:redo-2 w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #annotator-action-delete>
-          <span
-            class="i-lucide:trash w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #optionAnnotator="{ isAnnotator }">
-          <span
-            v-if="isAnnotator"
-            class="i-lucide:pen-off w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-          <span
-            v-else
-            class="i-lucide:pen w-6 h-6 text-fg-subtle"
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-        <template #optionAltCopy>
-          <span
-            class="w-6 h-6"
-            :class="
-              copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
-            "
-            style="pointer-events: none"
-            aria-hidden="true"
-          />
-        </template>
-      </VueUiQuadrant>
-    </ClientOnly>
-  </div>
-</template>
-
-<style scoped>
-:deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 1px solid var(--accent-color) !important;
-  border-radius: 0.1rem;
-  outline-offset: 0;
-}
-:deep(.vue-ui-user-options-button:focus-visible),
-:deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
-  border-radius: 0.25rem;
-}
-
-/**
-* Temporary override (to be removed if/when a fix in vue-data-ui is found, like a dynamic repositioning of labels, or line-break forcing)
-* a long label for a datapoint placed on the border of the svg might be cropped by the overflow-hidden
-* set by the library on the chart component.
-*/
-:deep(.vue-ui-quadrant svg) {
-  overflow: visible !important;
-}
-</style>
diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
new file mode 100644
index 0000000000..79e29b4842
--- /dev/null
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -0,0 +1,528 @@
+<script setup lang="ts">
+import { SelectField } from '#components'
+import { ref, computed } from 'vue'
+import type { FormatterParams, VueUiScatterConfig, VueUiScatterDatasetItem } from 'vue-data-ui'
+import { VueUiScatter } from 'vue-data-ui/vue-ui-scatter'
+import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
+import { loadFile, copyAltTextForCompareScatterChart } from '~/utils/charts'
+
+import('vue-data-ui/style.css')
+
+const props = defineProps<{
+  packagesData: ReadonlyArray<PackageComparisonData | null>
+  packages: string[]
+}>()
+
+const colorMode = useColorMode()
+const resolvedMode = shallowRef<'light' | 'dark'>('light')
+const rootEl = shallowRef<HTMLElement | null>(null)
+const { copy, copied } = useClipboard()
+
+const { colors } = useCssVariables(
+  [
+    '--bg',
+    '--fg',
+    '--bg-subtle',
+    '--bg-elevated',
+    '--fg-subtle',
+    '--fg-muted',
+    '--border',
+    '--border-subtle',
+    '--border-hover',
+    '--accent',
+  ],
+  {
+    element: rootEl,
+    watchHtmlAttributes: true,
+    watchResize: false,
+  },
+)
+
+const watermarkColors = computed(() => ({
+  fg: colors.value.fg ?? OKLCH_NEUTRAL_FALLBACK,
+  bg: colors.value.bg ?? OKLCH_NEUTRAL_FALLBACK,
+  fgSubtle: colors.value.fgSubtle ?? OKLCH_NEUTRAL_FALLBACK,
+}))
+
+onMounted(async () => {
+  rootEl.value = document.documentElement
+  resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
+})
+
+watch(
+  () => colorMode.value,
+  value => {
+    resolvedMode.value = value === 'dark' ? 'dark' : 'light'
+  },
+  { flush: 'sync' },
+)
+
+const isDarkMode = computed(() => resolvedMode.value === 'dark')
+
+const { facetLabels } = useFacetSelection()
+
+const chartableFacets = computed(() =>
+  (
+    Object.entries(facetLabels.value) as [
+      ComparisonFacet,
+      { label: string; description: string; chartable_scatter: boolean },
+    ][]
+  )
+    .map(([name, facet]) => ({
+      name,
+      label: facet.label,
+      description: facet.description,
+      chartable: facet.chartable_scatter,
+    }))
+    .filter(facet => facet.chartable),
+)
+
+const selectedFacetX = ref<ComparisonFacet>('downloads')
+const selectedFacetY = ref<ComparisonFacet>('installSize')
+
+const dataset = computed<VueUiScatterDatasetItem[]>(() =>
+  buildCompareScatterChartDataset(
+    props.packagesData,
+    props.packages,
+    selectedFacetX.value,
+    selectedFacetY.value,
+  ),
+)
+
+function resolveFormatter(facet: ComparisonFacet): FacetInfoWithLabels['formatter'] {
+  if (facet === 'lastUpdated') {
+    return v => `${Math.round(v)}%` // Expressed as 'freshness score'
+  }
+  return facetLabels.value[facet].formatter!
+}
+
+const formatters = computed(() => ({
+  x: resolveFormatter(selectedFacetX.value),
+  y: resolveFormatter(selectedFacetY.value),
+}))
+
+function resolveAxisLabel(facet: ComparisonFacet) {
+  if (facet === 'lastUpdated') {
+    return $t('compare.scatter_chart.freshness_score')
+  }
+  return facetLabels.value[facet].label
+}
+
+const axisLabels = computed(() => ({
+  x: resolveAxisLabel(selectedFacetX.value),
+  y: resolveAxisLabel(selectedFacetY.value),
+}))
+
+function buildExportFilename(extension: string): string {
+  const translatedPrefix = sanitise(
+    $t('compare.scatter_chart.filename', {
+      x: axisLabels.value.x,
+      y: axisLabels.value.y,
+    }),
+  ).replaceAll(' ', '_')
+  return `${translatedPrefix}.${extension}`
+}
+
+const config = computed<VueUiScatterConfig>(() => {
+  return {
+    theme: isDarkMode.value ? 'dark' : '',
+    userOptions: {
+      buttons: {
+        tooltip: false,
+        pdf: false,
+        fullscreen: false,
+        table: false,
+        csv: false,
+        altCopy: true,
+      },
+      buttonTitles: {
+        csv: $t('package.trends.download_file', { fileType: 'CSV' }),
+        img: $t('package.trends.download_file', { fileType: 'PNG' }),
+        svg: $t('package.trends.download_file', { fileType: 'SVG' }),
+        annotator: $t('package.trends.toggle_annotator'),
+        open: $t('package.trends.open_options'),
+        close: $t('package.trends.close_options'),
+      },
+      callbacks: {
+        img: args => {
+          const imageUri = args?.imageUri
+          if (!imageUri) return
+          loadFile(imageUri, buildExportFilename('png'))
+        },
+        svg: args => {
+          const blob = args?.blob
+          if (!blob) return
+          const url = URL.createObjectURL(blob)
+          loadFile(url, buildExportFilename('svg'))
+          URL.revokeObjectURL(url)
+        },
+        altCopy: ({ dataset: dst, config: cfg }) => {
+          copyAltTextForCompareScatterChart({
+            dataset: dst,
+            config: {
+              ...cfg,
+              copy,
+              $t,
+              x: {
+                label: resolveAxisLabel(selectedFacetX.value),
+                formatter: formatters.value.x!,
+              },
+              y: {
+                label: resolveAxisLabel(selectedFacetY.value),
+                formatter: formatters.value.y!,
+              },
+            },
+          })
+        },
+      },
+    },
+    style: {
+      backgroundColor: colors.value.bg,
+      color: colors.value.fgSubtle,
+      layout: {
+        axis: {
+          stroke: colors.value.fgSubtle,
+        },
+        height: 500,
+        width: 512,
+        padding: {
+          top: 0,
+          bottom: 56,
+          right: 36,
+          left: 42,
+        },
+        correlation: { show: false },
+        dataLabels: {
+          reverseAxisLabels: true,
+          xAxis: {
+            name: axisLabels.value.x,
+            showValue: false,
+            fontSize: 14,
+            scales: {
+              show: true,
+              steps: 7,
+              useNiceScale: true,
+              labels: {
+                color: colors.value.fgSubtle,
+                offsetY: 10,
+                fontSize: 14,
+                formatter: (args: FormatterParams) => {
+                  return formatters.value.x!(args.value)
+                },
+              },
+              verticalLines: {
+                show: true,
+                stroke: colors.value.border,
+              },
+            },
+          },
+          yAxis: {
+            name: axisLabels.value.y,
+            showValue: false,
+            fontSize: 14,
+            scales: {
+              show: true,
+              steps: 7,
+              useNiceScale: true,
+              labels: {
+                color: colors.value.fgSubtle,
+                fontSize: 14,
+                formatter: (args: FormatterParams) => {
+                  return formatters.value.y!(args.value)
+                },
+              },
+              horizontalLines: {
+                show: true,
+                stroke: colors.value.border,
+              },
+            },
+          },
+        },
+        plots: {
+          radius: 6,
+          hoverRadiusRatio: 1.2,
+          opacity: 1,
+          opacityNotSelected: 0.2,
+          name: {
+            show: true,
+            color: colors.value.fg,
+          },
+          selectors: {
+            stroke: colors.value.fgSubtle,
+            strokeDasharray: 6,
+            markers: {
+              radius: 3,
+              fill: colors.value.fgSubtle,
+              stroke: colors.value.bg,
+            },
+          },
+        },
+      },
+      legend: {
+        position: 'top',
+        backgroundColor: 'transparent',
+      },
+      tooltip: {
+        show: false,
+      },
+    },
+  }
+})
+
+const step = shallowRef(0)
+
+type AxisHighlight = 'x' | 'y' | null
+const highlightedAxis = shallowRef<AxisHighlight>(null)
+
+function toggleAxisHighlight(state: AxisHighlight) {
+  highlightedAxis.value = state
+}
+</script>
+
+<template>
+  <div class="font-mono pb-6">
+    <div class="">
+      <h2
+        id="trends-comparison-heading"
+        class="text-xs text-fg-subtle uppercase tracking-wider mb-4 mt-10"
+      >
+        {{
+          $t('compare.scatter_chart.title', {
+            x: resolveAxisLabel(selectedFacetX),
+            y: resolveAxisLabel(selectedFacetY),
+          })
+        }}
+      </h2>
+    </div>
+
+    <div class="flex flex-col sm:flex-row gap-4 items-start">
+      <div
+        class="w-full sm:w-fit order-1 sm:order-2 flex flex-row sm:flex-col gap-2 sm:self-end sm:mb-17"
+      >
+        <SelectField
+          class="w-full"
+          id="select-facet-scatter-x"
+          v-model="selectedFacetX"
+          :items="chartableFacets.map(f => ({ label: resolveAxisLabel(f.name), value: f.name }))"
+          :label="$t('compare.scatter_chart.x_axis')"
+          size="sm"
+          block
+          @change="step += 1"
+          @mouseenter="toggleAxisHighlight('x')"
+          @mouseleave="toggleAxisHighlight(null)"
+          @blur="toggleAxisHighlight(null)"
+        />
+        <SelectField
+          class="w-full"
+          id="select-facet-scatter-y"
+          v-model="selectedFacetY"
+          :items="chartableFacets.map(f => ({ label: resolveAxisLabel(f.name), value: f.name }))"
+          :label="$t('compare.scatter_chart.y_axis')"
+          size="sm"
+          block
+          @change="step += 1"
+          @mouseenter="toggleAxisHighlight('y')"
+          @mouseleave="toggleAxisHighlight(null)"
+          @blur="toggleAxisHighlight(null)"
+        />
+      </div>
+
+      <ClientOnly>
+        <div class="w-full sm:max-w-[450px] order-2 sm:order-1">
+          <VueUiScatter :dataset :config :key="step">
+            <!-- Keyboard navigation hint -->
+            <template #hint="{ isVisible }">
+              <p
+                v-if="isVisible"
+                class="text-accent text-xs -mt-5 text-start px-2"
+                aria-hidden="true"
+              >
+                {{ $t('compare.packages.line_chart_nav_hint') }}
+              </p>
+            </template>
+
+            <!-- Custom legend -->
+            <template #legend="{ legend }">
+              <div
+                class="flex flex-row flex-wrap gap-x-6 justify-center gap-y-2 px-6 sm:px-10 text-xs"
+              >
+                <button
+                  v-for="datapoint in legend"
+                  :key="datapoint.name"
+                  :aria-pressed="datapoint.isSegregated"
+                  :aria-label="datapoint.name"
+                  type="button"
+                  class="flex gap-1 place-items-center"
+                  @click="datapoint.segregate()"
+                >
+                  <div class="h-3 w-3">
+                    <svg viewBox="0 0 2 2" class="w-full">
+                      <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
+                    </svg>
+                  </div>
+                  <span
+                    class="text-fg"
+                    :style="{
+                      textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
+                    }"
+                  >
+                    {{ datapoint.name }}
+                  </span>
+                </button>
+              </div>
+            </template>
+
+            <!-- Custom svg content -->
+            <template #svg="{ svg }">
+              <!-- Watermark -->
+              <g
+                v-if="svg.isPrintingSvg || svg.isPrintingImg"
+                v-html="
+                  drawSmallNpmxLogoAndTaglineWatermark({
+                    svg,
+                    colors: watermarkColors,
+                    translateFn: $t,
+                    taglineFontSize: 6,
+                    offsetYLogo: -12,
+                    offsetXTagline: -40,
+                  })
+                "
+              />
+
+              <!-- Highlighted axes when hovering facet inputs -->
+              <template v-if="highlightedAxis">
+                <line
+                  v-if="highlightedAxis === 'x'"
+                  :x1="svg.drawingArea.left"
+                  :x2="svg.drawingArea.right"
+                  :y1="svg.drawingArea.bottom"
+                  :y2="svg.drawingArea.bottom"
+                  :stroke="colors.accent"
+                  stroke-dasharray="5"
+                  stroke-linecap="round"
+                  stroke-width="2"
+                />
+                <line
+                  v-if="highlightedAxis === 'y'"
+                  :x1="svg.drawingArea.left"
+                  :x2="svg.drawingArea.left"
+                  :y1="svg.drawingArea.top"
+                  :y2="svg.drawingArea.bottom"
+                  :stroke="colors.accent"
+                  stroke-dasharray="5"
+                  stroke-linecap="round"
+                  stroke-width="2"
+                />
+              </template>
+            </template>
+
+            <template #menuIcon="{ isOpen }">
+              <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+              <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
+            </template>
+            <template #optionImg>
+              <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
+            </template>
+            <template #optionSvg>
+              <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
+            </template>
+            <template #annotator-action-close>
+              <span
+                class="i-lucide:x w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #annotator-action-color="{ color }">
+              <span class="i-lucide:palette w-6 h-6" :style="{ color }" aria-hidden="true" />
+            </template>
+            <template #annotator-action-draw="{ mode }">
+              <span
+                v-if="mode === 'arrow'"
+                class="i-lucide:move-up-right text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'text'"
+                class="i-lucide:type text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'line'"
+                class="i-lucide:pen-line text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+              <span
+                v-if="mode === 'draw'"
+                class="i-lucide:line-squiggle text-fg-subtle w-6 h-6"
+                aria-hidden="true"
+              />
+            </template>
+            <template #annotator-action-undo>
+              <span
+                class="i-lucide:undo-2 w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #annotator-action-redo>
+              <span
+                class="i-lucide:redo-2 w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #annotator-action-delete>
+              <span
+                class="i-lucide:trash w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #optionAnnotator="{ isAnnotator }">
+              <span
+                v-if="isAnnotator"
+                class="i-lucide:pen-off w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+              <span
+                v-else
+                class="i-lucide:pen w-6 h-6 text-fg-subtle"
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+            <template #optionAltCopy>
+              <span
+                class="w-6 h-6"
+                :class="
+                  copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
+                "
+                style="pointer-events: none"
+                aria-hidden="true"
+              />
+            </template>
+          </VueUiScatter>
+        </div>
+
+        <template #fallback>
+          <SkeletonInline class="w-full sm:max-w-[450px] h-[400px]" />
+        </template>
+      </ClientOnly>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0;
+}
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent) !important;
+  border-radius: 0.25rem;
+}
+</style>
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index e81a32d804..a8b0120eb6 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1994,7 +1994,7 @@ const isSparklineLayout = computed({
 
             <!-- Custom legend for multiple series -->
             <template #legend="{ legend }">
-              <div class="flex gap-4 flex-wrap justify-center">
+              <div class="flex gap-x-6 gap-y-2 flex-wrap justify-center text-sm">
                 <template v-if="isMultiPackageMode">
                   <button
                     v-for="datapoint in legend"
@@ -2200,13 +2200,13 @@ const isSparklineLayout = computed({
 
 <style scoped>
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 1px solid var(--accent-color) !important;
+  outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0;
 }
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
 </style>
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index e104851546..22d1a3129d 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -682,14 +682,14 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 }
 
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 1px solid var(--accent-color) !important;
+  outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0 !important;
 }
 
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
 </style>
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index eed8954196..da8543bfec 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -434,7 +434,7 @@ const config = computed<VueUiSparklineConfig>(() => {
 
               <template #skeleton>
                 <!-- This empty div overrides the default built-in scanning animation on load -->
-                <div />
+                <div></div>
               </template>
             </VueUiSparkline>
             <template #fallback>
@@ -511,7 +511,7 @@ const config = computed<VueUiSparklineConfig>(() => {
 }
 
 :deep(.vue-data-ui-component svg:focus-visible) {
-  outline: 0.1rem solid var(--accent-color) !important;
+  outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 3px;
 }
diff --git a/app/composables/useChartWatermark.ts b/app/composables/useChartWatermark.ts
index c927bae769..f497bde3b3 100644
--- a/app/composables/useChartWatermark.ts
+++ b/app/composables/useChartWatermark.ts
@@ -132,27 +132,35 @@ export function drawSmallNpmxLogoAndTaglineWatermark({
   colors,
   translateFn,
   logoWidth = 36,
+  taglineFontSize = 8,
+  offsetYTagline = 0,
+  offsetXTagline = 0,
+  offsetYLogo = 0,
 }: {
   svg: Record<string, any>
   colors: WatermarkColors
   translateFn: (key: string) => string
   logoWidth?: number
+  taglineFontSize?: number
+  offsetYTagline?: number
+  offsetXTagline?: number
+  offsetYLogo?: number
 }) {
   if (!svg.height) return
 
   const npmxLogoWidthToHeight = 2.64
   const npmxLogoHeight = logoWidth / npmxLogoWidthToHeight
   const offsetX = 6
-  const watermarkY = svg.height - npmxLogoHeight
+  const watermarkY = svg.height - npmxLogoHeight + offsetYLogo
   const taglineY = svg.height - 3
 
   return `
     ${generateWatermarkLogo({ x: offsetX, y: watermarkY, width: logoWidth, height: npmxLogoHeight, fill: colors.fg })}
     <text
       fill="${colors.fgSubtle}"
-      x="${logoWidth + offsetX * 2}"
-      y="${taglineY}"
-      font-size="8"
+      x="${logoWidth + offsetX * 2 + offsetXTagline}"
+      y="${taglineY + offsetYTagline}"
+      font-size="${taglineFontSize}"
       text-anchor="start"
     >
       ${translateFn('tagline')}
diff --git a/app/composables/useFacetSelection.ts b/app/composables/useFacetSelection.ts
index 92875037e9..368123c1ed 100644
--- a/app/composables/useFacetSelection.ts
+++ b/app/composables/useFacetSelection.ts
@@ -4,6 +4,8 @@ export interface FacetInfoWithLabels extends Omit<FacetInfo, 'id'> {
   label: string
   description: string
   chartable: boolean
+  chartable_scatter: boolean
+  formatter?: (value: number) => string
 }
 
 // Get facets in a category (excluding coming soon)
@@ -21,73 +23,104 @@ function getFacetsInCategory(category: string): ComparisonFacet[] {
  */
 export function useFacetSelection(queryParam = 'facets') {
   const { t } = useI18n()
+  const compactNumberFormatter = useCompactNumberFormatter()
+  const bytesFormatter = useBytesFormatter()
 
   const facetLabels = computed(
-    (): Record<ComparisonFacet, { label: string; description: string; chartable: boolean }> => ({
+    (): Record<
+      ComparisonFacet,
+      {
+        label: string
+        description: string
+        chartable: boolean
+        chartable_scatter: boolean
+        formatter?: (value: number) => string
+      }
+    > => ({
       downloads: {
         label: t(`compare.facets.items.downloads.label`),
         description: t(`compare.facets.items.downloads.description`),
-        chartable: true,
+        chartable: true, // TODO: rename to chartable_bar
+        chartable_scatter: true,
+        formatter: v => compactNumberFormatter.value.format(v),
       },
       totalLikes: {
         label: t(`compare.facets.items.totalLikes.label`),
         description: t(`compare.facets.items.totalLikes.description`),
         chartable: true,
+        chartable_scatter: true,
+        formatter: v => compactNumberFormatter.value.format(v),
       },
       packageSize: {
         label: t(`compare.facets.items.packageSize.label`),
         description: t(`compare.facets.items.packageSize.description`),
         chartable: true,
+        chartable_scatter: true,
+        formatter: v => bytesFormatter.format(v),
       },
       installSize: {
         label: t(`compare.facets.items.installSize.label`),
         description: t(`compare.facets.items.installSize.description`),
         chartable: true,
+        chartable_scatter: true,
+        formatter: v => bytesFormatter.format(v),
       },
       moduleFormat: {
         label: t(`compare.facets.items.moduleFormat.label`),
         description: t(`compare.facets.items.moduleFormat.description`),
         chartable: false,
+        chartable_scatter: false,
       },
       types: {
         label: t(`compare.facets.items.types.label`),
         description: t(`compare.facets.items.types.description`),
         chartable: false,
+        chartable_scatter: false,
       },
       engines: {
         label: t(`compare.facets.items.engines.label`),
         description: t(`compare.facets.items.engines.description`),
         chartable: false,
+        chartable_scatter: false,
       },
       vulnerabilities: {
         label: t(`compare.facets.items.vulnerabilities.label`),
         description: t(`compare.facets.items.vulnerabilities.description`),
         chartable: false,
+        chartable_scatter: true,
+        formatter: v => compactNumberFormatter.value.format(v),
       },
       lastUpdated: {
         label: t(`compare.facets.items.lastUpdated.label`),
         description: t(`compare.facets.items.lastUpdated.description`),
         chartable: false,
+        chartable_scatter: true,
       },
       license: {
         label: t(`compare.facets.items.license.label`),
         description: t(`compare.facets.items.license.description`),
         chartable: false,
+        chartable_scatter: false,
       },
       dependencies: {
         label: t(`compare.facets.items.dependencies.label`),
         description: t(`compare.facets.items.dependencies.description`),
         chartable: true,
+        chartable_scatter: true,
+        formatter: v => compactNumberFormatter.value.format(v),
       },
       totalDependencies: {
         label: t(`compare.facets.items.totalDependencies.label`),
         description: t(`compare.facets.items.totalDependencies.description`),
         chartable: true,
+        chartable_scatter: true,
+        formatter: v => compactNumberFormatter.value.format(v),
       },
       deprecated: {
         label: t(`compare.facets.items.deprecated.label`),
         description: t(`compare.facets.items.deprecated.description`),
         chartable: false,
+        chartable_scatter: false,
       },
     }),
   )
@@ -100,6 +133,8 @@ export function useFacetSelection(queryParam = 'facets') {
       label: facetLabels.value[facet].label,
       description: facetLabels.value[facet].description,
       chartable: facetLabels.value[facet].chartable,
+      chartable_scatter: facetLabels.value[facet].chartable_scatter,
+      formatter: facetLabels.value[facet].formatter ?? undefined,
     }
   }
 
@@ -224,6 +259,7 @@ export function useFacetSelection(queryParam = 'facets') {
     isAllSelected,
     isNoneSelected,
     allFacets: ALL_FACETS,
+    facetLabels,
     // Facet info with i18n
     getCategoryLabel,
     facetsByCategory,
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index 9c4a4d2fee..4dd395d008 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -2,8 +2,8 @@
 import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
 import { useRouteQuery } from '@vueuse/router'
 import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
-import FacetQuadrantChart from '~/components/Compare/FacetQuadrantChart.vue'
 import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+import FacetScatterChart from '~/components/Compare/FacetScatterChart.vue'
 
 definePageMeta({
   name: 'compare',
@@ -424,7 +424,7 @@ useSeoMeta({
               </div>
             </TabPanel>
 
-            <!-- Charts: per-facet bars & quadrant -->
+            <!-- Charts: per-facet bars & scatter -->
             <TabPanel value="charts" panel-id="comparison-panel-charts">
               <div
                 v-if="selectedFacets.some(facet => facet.chartable)"
@@ -447,8 +447,8 @@ useSeoMeta({
               <p v-else class="py-12 text-center text-fg-subtle">
                 {{ $t('compare.packages.no_chartable_data') }}
               </p>
-              <div class="max-w-[450px] mx-auto">
-                <FacetQuadrantChart
+              <div>
+                <FacetScatterChart
                   v-if="packages.length"
                   :packages-data="packagesData"
                   :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)"
diff --git a/app/utils/charts.ts b/app/utils/charts.ts
index 6d9f5de5c2..dbabd5fd90 100644
--- a/app/utils/charts.ts
+++ b/app/utils/charts.ts
@@ -2,8 +2,8 @@ import type {
   AltCopyArgs,
   VueUiHorizontalBarConfig,
   VueUiHorizontalBarDatapoint,
-  VueUiQuadrantConfig,
-  VueUiQuadrantDatapoint,
+  VueUiScatterConfig,
+  VueUiScatterSeries,
   VueUiXyConfig,
   VueUiXyDatasetBarItem,
   VueUiXyDatasetLineItem,
@@ -638,66 +638,58 @@ export async function copyAltTextForCompareFacetBarChart({
   await config.copy(altText)
 }
 
-type CompareQuadrantChartConfig = VueUiQuadrantConfig & {
+type CompareScatterChartConfig = VueUiScatterConfig & {
   copy: (text: string) => Promise<void>
   $t: TrendTranslateFunction
+  x: {
+    label: string
+    formatter: (v: number) => string
+  }
+  y: {
+    label: string
+    formatter: (v: number) => string
+  }
 }
 
-// Used for FacetQuadrantChart.vue
-export function createAltTextForCompareQuadrantChart({
+// Used for FacetScatterChart.vue
+export function createAltTextForCompareScatterChart({
   dataset,
   config,
-}: AltCopyArgs<VueUiQuadrantDatapoint[], CompareQuadrantChartConfig>) {
+}: AltCopyArgs<VueUiScatterSeries[], CompareScatterChartConfig>) {
   if (!dataset) return ''
 
-  const packages = {
-    topRight: dataset.filter(d => d.quadrant === 'TOP_RIGHT'),
-    topLeft: dataset.filter(d => d.quadrant === 'TOP_LEFT'),
-    bottomRight: dataset.filter(d => d.quadrant === 'BOTTOM_RIGHT'),
-    bottomLeft: dataset.filter(d => d.quadrant === 'BOTTOM_LEFT'),
-  }
+  const { x, y } = config
+  const { label: labelX, formatter: formatterX } = x
+  const { label: labelY, formatter: formatterY } = y
 
-  const descriptions = {
-    topRight: '',
-    topLeft: '',
-    bottomRight: '',
-    bottomLeft: '',
-  }
+  const datapoints = dataset.map(d => {
+    const rawX = d.values?.[0]?.x ?? 0
+    const rawY = d.values?.[0]?.y ?? 0
+    const name = d.fullName ?? ''
 
-  if (packages.topRight.length) {
-    descriptions.topRight = config.$t('compare.quadrant_chart.copy_alt.side_analysis_top_right', {
-      packages: packages.topRight.map(p => p.fullname).join(', '),
-    })
-  }
-
-  if (packages.topLeft.length) {
-    descriptions.topLeft = config.$t('compare.quadrant_chart.copy_alt.side_analysis_top_left', {
-      packages: packages.topLeft.map(p => p.fullname).join(', '),
-    })
-  }
-
-  if (packages.bottomRight.length) {
-    descriptions.bottomRight = config.$t(
-      'compare.quadrant_chart.copy_alt.side_analysis_bottom_right',
-      {
-        packages: packages.bottomRight.map(p => p.fullname).join(', '),
-      },
-    )
-  }
+    return {
+      x: formatterX(rawX),
+      y: formatterY(rawY),
+      name,
+    }
+  })
 
-  if (packages.bottomLeft.length) {
-    descriptions.bottomLeft = config.$t(
-      'compare.quadrant_chart.copy_alt.side_analysis_bottom_left',
-      {
-        packages: packages.bottomLeft.map(p => p.fullname).join(', '),
-      },
+  const analysis = datapoints
+    .map(d =>
+      config.$t('compare.scatter_chart.copy_alt.analysis', {
+        package: d.name,
+        x_name: labelX,
+        y_name: labelY,
+        x_value: d.x,
+        y_value: d.y,
+      }),
     )
-  }
-
-  const analysis = Object.values(descriptions).filter(Boolean).join('. ')
+    .join(', ')
 
-  const altText = config.$t('compare.quadrant_chart.copy_alt.description', {
-    packages: dataset.map(p => p.fullname).join(', '),
+  const altText = config.$t('compare.scatter_chart.copy_alt.description', {
+    x_name: labelX,
+    y_name: labelY,
+    packages: datapoints.map(d => d.name).join(', '),
     analysis,
     watermark: config.$t('package.trends.copy_alt.watermark'),
   })
@@ -705,11 +697,11 @@ export function createAltTextForCompareQuadrantChart({
   return altText
 }
 
-export async function copyAltTextForCompareQuadrantChart({
+export async function copyAltTextForCompareScatterChart({
   dataset,
   config,
-}: AltCopyArgs<VueUiQuadrantDatapoint[], any>) {
-  const altText = createAltTextForCompareQuadrantChart({ dataset, config })
+}: AltCopyArgs<VueUiScatterSeries[], CompareScatterChartConfig>) {
+  const altText = createAltTextForCompareScatterChart({ dataset, config })
   await config.copy(altText)
 }
 
diff --git a/app/utils/compare-quadrant-chart.ts b/app/utils/compare-quadrant-chart.ts
deleted file mode 100644
index 97d9879812..0000000000
--- a/app/utils/compare-quadrant-chart.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-export interface PackageQuadrantInput {
-  id: string
-  license: string
-  name: string
-  downloads?: number | null
-  totalLikes?: number | null
-  packageSize?: number | null
-  installSize?: number | null
-  dependencies?: number | null
-  totalDependencies?: number | null
-  vulnerabilities?: number | null
-  deprecated?: boolean | null
-  types?: boolean | null
-  lastUpdated?: string | Date | null
-}
-
-export interface PackageQuadrantPoint {
-  id: string
-  license: string
-  name: string
-  x: number
-  y: number
-  adoptionScore: number
-  efficiencyScore: number
-  quadrant: 'TOP_RIGHT' | 'TOP_LEFT' | 'BOTTOM_RIGHT' | 'BOTTOM_LEFT'
-  metrics: {
-    downloads: number
-    totalLikes: number
-    packageSize: number
-    installSize: number
-    dependencies: number
-    totalDependencies: number
-    vulnerabilities: number
-    deprecated: boolean
-    types: boolean
-    freshnessScore: number
-    freshnessPercent: number
-  }
-}
-
-const WEIGHTS = {
-  adoption: {
-    downloads: 0.75, // dominant signal because they best reflect real-world adoption (in the data we have through facets currently)
-    freshness: 0.15, // small correction so stale packages are slightly
-    likes: 0.1, // might be pumped up in the future when ./npmx likes are more mainstream
-  },
-  efficiency: {
-    installSize: 0.3, // weighted highest because it best reflects consumer footprint
-
-    // dependency weights are already measured in install size in some way, but still useful knobs to find the sweet spot
-    dependencies: 0.05, // direct deps capture architectural and supply-chain complexity
-    totalDependencies: 0.2, // same for total deps
-
-    packageSize: 0.1,
-    vulnerabilities: 0.2, // penalize security burden
-    types: 0.15, // TS support
-    // Note: the 'deprecated' metric is not weighed because it just forces a -1 evaluation
-  },
-}
-
-/* Fixed logarithmic ceilings to normalize metrics onto a stable [-1, 1] scale.
- *  This avoids dataset-relative min/max normalization, which would shift scores depending
- *  on which packages are being compared. Ceilings act as reference points for what is
- *  considered 'high' for each metric, ensuring consistent positioning across different
- *  datasets while preserving meaningful differences via log scaling.
- */
-const LOG_CEILINGS = {
-  downloads: 100_000_000,
-  likes: 1000, // might be pumped up in the future when ./npmx likes are more mainstream
-  installSize: 25_000_000,
-  dependencies: 100,
-  totalDependencies: 1_000,
-  packageSize: 15_000_000,
-}
-
-const VULNERABILITY_PENALTY_MULTIPLIER = 2
-
-function clampInRange(value: number, min = -1, max = 1): number {
-  if (value < min) return min
-  if (value > max) return max
-  return value
-}
-
-function normalizeBoolean(value: boolean): number {
-  return value ? 1 : -1
-}
-
-function toSafeNumber(value: number | null | undefined, fallback = 0): number {
-  return typeof value === 'number' && Number.isFinite(value) ? value : fallback
-}
-
-function getNormalisedFreshness(
-  value: string | Date | null | undefined,
-  maximumAgeInDays = 365,
-): number | null {
-  if (!value) return null
-
-  const date = value instanceof Date ? value : new Date(value)
-  if (Number.isNaN(date.getTime())) return null
-
-  const now = Date.now()
-  const ageInMilliseconds = now - date.getTime()
-  const ageInDays = ageInMilliseconds / (1000 * 60 * 60 * 24)
-
-  return 1 - ageInDays / maximumAgeInDays
-}
-
-function getFreshnessScore(
-  value: string | Date | null | undefined,
-  maximumAgeInDays = 365,
-): number {
-  const normalisedAge = getNormalisedFreshness(value, maximumAgeInDays)
-  if (normalisedAge === null) return -1
-  return clampInRange(normalisedAge * 2 - 1)
-}
-
-function getFreshnessPercentage(
-  value: string | Date | null | undefined,
-  maximumAgeInDays = 365,
-): number {
-  const normalisedAge = getNormalisedFreshness(value, maximumAgeInDays)
-  if (normalisedAge === null) return 0
-  return Math.max(0, Math.min(1, normalisedAge)) * 100
-}
-
-function normalizeLogHigherBetter(value: number, upperBound: number): number {
-  const safeValue = Math.max(0, value)
-  const safeUpperBound = Math.max(1, upperBound)
-  const normalised = Math.log(safeValue + 1) / Math.log(safeUpperBound + 1)
-  return clampInRange(normalised * 2 - 1)
-}
-
-function normalizeLogLowerBetter(value: number, upperBound: number): number {
-  return -normalizeLogHigherBetter(value, upperBound)
-}
-
-function getVulnerabilityPenalty(value: number): number {
-  if (value <= 0) return 1
-
-  const penalty = normalizeLogLowerBetter(value, 10)
-  return penalty < 0 ? penalty * VULNERABILITY_PENALTY_MULTIPLIER : penalty
-}
-
-function resolveQuadrant(x: number, y: number): PackageQuadrantPoint['quadrant'] {
-  if (x >= 0 && y >= 0) return 'TOP_RIGHT'
-  if (x < 0 && y >= 0) return 'TOP_LEFT'
-  if (x >= 0 && y < 0) return 'BOTTOM_RIGHT'
-  return 'BOTTOM_LEFT'
-}
-
-function createQuadrantPoint(packageItem: PackageQuadrantInput): PackageQuadrantPoint {
-  const downloads = toSafeNumber(packageItem.downloads)
-  const totalLikes = toSafeNumber(packageItem.totalLikes)
-  const packageSize = toSafeNumber(packageItem.packageSize)
-  const installSize = toSafeNumber(packageItem.installSize)
-  const dependencies = toSafeNumber(packageItem.dependencies)
-  const totalDependencies = toSafeNumber(packageItem.totalDependencies)
-  const vulnerabilities = toSafeNumber(packageItem.vulnerabilities)
-  const deprecated = packageItem.deprecated ?? false
-  const types = packageItem.types ?? false
-  const freshnessScore = getFreshnessScore(packageItem.lastUpdated) // for weighing
-  const freshnessPercent = getFreshnessPercentage(packageItem.lastUpdated) // for display
-
-  const normalisedDownloads = normalizeLogHigherBetter(downloads, LOG_CEILINGS.downloads)
-  const normalisedLikes = normalizeLogHigherBetter(totalLikes, LOG_CEILINGS.likes)
-  const normalisedInstallSize = normalizeLogLowerBetter(installSize, LOG_CEILINGS.installSize)
-  const normalisedDependencies = normalizeLogLowerBetter(dependencies, LOG_CEILINGS.dependencies)
-  const normalisedTotalDependencies = normalizeLogLowerBetter(
-    totalDependencies,
-    LOG_CEILINGS.totalDependencies,
-  )
-  const normalisedPackageSize = normalizeLogLowerBetter(packageSize, LOG_CEILINGS.packageSize)
-
-  const normalisedVulnerabilities = getVulnerabilityPenalty(vulnerabilities)
-  const typesScore = normalizeBoolean(types)
-
-  const adoptionScore = clampInRange(
-    normalisedDownloads * WEIGHTS.adoption.downloads +
-      freshnessScore * WEIGHTS.adoption.freshness +
-      normalisedLikes * WEIGHTS.adoption.likes,
-  )
-
-  const rawEfficiencyScore =
-    normalisedInstallSize * WEIGHTS.efficiency.installSize +
-    normalisedDependencies * WEIGHTS.efficiency.dependencies +
-    normalisedTotalDependencies * WEIGHTS.efficiency.totalDependencies +
-    normalisedPackageSize * WEIGHTS.efficiency.packageSize +
-    normalisedVulnerabilities * WEIGHTS.efficiency.vulnerabilities +
-    typesScore * WEIGHTS.efficiency.types
-
-  const efficiencyScore = deprecated ? -1 : clampInRange(rawEfficiencyScore)
-  const quadrant = resolveQuadrant(adoptionScore, efficiencyScore)
-
-  return {
-    adoptionScore,
-    efficiencyScore,
-    id: packageItem.id,
-    license: packageItem.license,
-    name: packageItem.name,
-    metrics: {
-      dependencies,
-      deprecated,
-      downloads,
-      freshnessPercent,
-      freshnessScore,
-      installSize,
-      packageSize,
-      totalDependencies,
-      totalLikes,
-      types,
-      vulnerabilities,
-    },
-    quadrant,
-    x: adoptionScore,
-    y: efficiencyScore,
-  }
-}
-
-export function createQuadrantDataset(packages: PackageQuadrantInput[]): PackageQuadrantPoint[] {
-  return packages.map(packageItem => createQuadrantPoint(packageItem))
-}
diff --git a/app/utils/compare-scatter-chart.ts b/app/utils/compare-scatter-chart.ts
new file mode 100644
index 0000000000..43669bcf5c
--- /dev/null
+++ b/app/utils/compare-scatter-chart.ts
@@ -0,0 +1,121 @@
+import type { VueUiScatterDatasetItem } from 'vue-data-ui'
+import { applyEllipsis } from '~/utils/charts'
+import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
+
+const MILLISECONDS_IN_A_DAY = 1000 * 60 * 60 * 24
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value)
+}
+
+function toFreshnessScore(value: unknown, maximumAgeInDays = 365): number | null {
+  if (!value) {
+    return null
+  }
+
+  const date = value instanceof Date ? value : new Date(String(value))
+
+  if (Number.isNaN(date.getTime())) {
+    return null
+  }
+
+  const ageInMilliseconds = Date.now() - date.getTime()
+  const ageInDays = ageInMilliseconds / MILLISECONDS_IN_A_DAY
+  const normalizedFreshness = 1 - ageInDays / maximumAgeInDays
+
+  if (normalizedFreshness < 0) {
+    return 0
+  }
+
+  if (normalizedFreshness > 1) {
+    return 100
+  }
+
+  return normalizedFreshness * 100
+}
+
+function getNumericFacetValue(
+  packageData: PackageComparisonData,
+  facet: ComparisonFacet,
+): number | null {
+  switch (facet) {
+    case 'downloads':
+      return isFiniteNumber(packageData.downloads) ? packageData.downloads : null
+
+    case 'totalLikes':
+      return isFiniteNumber(packageData.totalLikes) ? packageData.totalLikes : null
+
+    case 'packageSize':
+      return isFiniteNumber(packageData.packageSize) ? packageData.packageSize : null
+
+    case 'installSize':
+      return isFiniteNumber(packageData.installSize?.totalSize)
+        ? packageData.installSize.totalSize
+        : null
+
+    case 'dependencies':
+      return isFiniteNumber(packageData.directDeps) ? packageData.directDeps : null
+
+    case 'totalDependencies':
+      return isFiniteNumber(packageData.installSize?.dependencyCount)
+        ? packageData.installSize.dependencyCount
+        : null
+
+    case 'vulnerabilities':
+      return isFiniteNumber(packageData.vulnerabilities?.count)
+        ? packageData.vulnerabilities.count
+        : null
+
+    case 'types':
+      return packageData.analysis?.types?.kind ? 1 : 0
+
+    case 'lastUpdated':
+      return toFreshnessScore(packageData.metadata?.lastUpdated)
+
+    default:
+      return null
+  }
+}
+
+function getPackageName(packageData: PackageComparisonData, fallbackName: string): string {
+  return packageData.package?.name || fallbackName
+}
+
+export function buildCompareScatterChartDataset(
+  packagesData: ReadonlyArray<PackageComparisonData | null>,
+  packages: string[],
+  xFacet: ComparisonFacet,
+  yFacet: ComparisonFacet,
+): VueUiScatterDatasetItem[] {
+  return packagesData.reduce<VueUiScatterDatasetItem[]>((acc, packageData, index) => {
+    if (!packageData) {
+      return acc
+    }
+
+    const x = getNumericFacetValue(packageData, xFacet)
+    const y = getNumericFacetValue(packageData, yFacet)
+
+    if (x === null || y === null) {
+      return acc
+    }
+
+    const fallbackName = packages[index] || `package-${index + 1}`
+    const packageName = getPackageName(packageData, fallbackName)
+
+    acc.push({
+      name: applyEllipsis(packageName, 14),
+      fullName: packageName,
+      color: isListedFramework(packageName) ? getFrameworkColor(packageName) : undefined,
+      values: [
+        {
+          x,
+          y,
+          name: applyEllipsis(packageName, 14),
+          fullName: packageName,
+        },
+      ],
+    })
+
+    return acc
+  }, [])
+}
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 2ca6c6e2fc..5a7cca12e0 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -312,8 +312,6 @@
     "warnings": "Varování:",
     "go_back_home": "Zpět na začátek",
     "per_week": "/ týden",
-    "yes": "Ano",
-    "no": "Ne",
     "vanity_downloads_hint": "Pro zobrazený balíček | Součet pro {count} zobrazené balíčky | Součet pro {count} zobrazených balíčků",
     "sort": {
       "name": "jméno",
@@ -1238,33 +1236,6 @@
       "packages_selected": "Vybrané balíčky: {count}/{max}.",
       "add_hint": "Přidejte alespoň 2 balíčky ke srovnání."
     },
-    "quadrant_chart": {
-      "label_x_axis": "Trakce",
-      "label_y_axis": "Ergonomie",
-      "label_top_right": "Solidní volby",
-      "label_bottom_right": "populární s kompromisy",
-      "label_bottom_left": "vyhněte se",
-      "label_top_left": "skryté poklady",
-      "title": "Trakce vs ergonomie balíčku",
-      "filename": "trakce-vs-ergonomie-balicku-kvadrant",
-      "label_freshness_score": "Skóre čerstvosti",
-      "copy_alt": {
-        "description": "Graf kvadrantu zobrazující trakci versus ergonomii pro balíčky {packages}. {analysis}. {watermark}.",
-        "side_analysis_top_right": "Následující balíčky jsou umístěny v pravém horním kvadrantu (solidní volby): {packages}",
-        "side_analysis_top_left": "Následující balíčky jsou umístěny v levém horním kvadrantu (skryté poklady): {packages}",
-        "side_analysis_bottom_right": "Následující balíčky jsou umístěny v pravém dolním kvadrantu (populární s kompromisy): {packages}",
-        "side_analysis_bottom_left": "Následující balíčky jsou umístěny v levém dolním kvadrantu (vyhněte se): {packages}"
-      },
-      "explanation": {
-        "tooltip_help": "Zobrazit vysvětlení skóre",
-        "tooltip_help_adoption": "Zobrazit vysvětlení skóre trakce",
-        "tooltip_help_efficiency": "Zobrazit vysvětlení skóre ergonomie",
-        "introduction": "Skóre je vypočítáno kombinací několika signálů do dvou os:",
-        "adoption": "Trakce: odráží použití a aktivitu (stahování, čerstvost, lajky)",
-        "efficiency": "Ergonomie: odráží stopu a kvalitu (velikost instalace, závislosti, zranitelnosti, otypování)",
-        "impact_details": "Každá metrika přispívá s různou váhou. Silné signály, jako jsou stahování a velikost instalace, mají největší dopad, zatímco jiné výsledky upřesňují výsledné skóre. Některé signály (např. zranitelnosti nebo zastarání) aplikují penalizace."
-      }
-    },
     "no_dependency": {
       "label": "(Žádná závislost)",
       "typeahead_title": "Co by udělal James?",
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index f5b51a9cce..5ae63f2b2a 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -312,8 +312,6 @@
     "warnings": "Warnungen:",
     "go_back_home": "Zur Startseite",
     "per_week": "/ Woche",
-    "yes": "Ja",
-    "no": "Nein",
     "vanity_downloads_hint": "Vanity-Zahl: keine Pakete angezeigt | Vanity-Zahl: für das angezeigte Paket | Vanity-Zahl: Summe von {count} angezeigten Paketen",
     "sort": {
       "name": "Name",
@@ -1238,32 +1236,8 @@
       "packages_selected": "{count}/{max} Pakete ausgewählt.",
       "add_hint": "Füge mindestens 2 Pakete zum Vergleichen hinzu."
     },
-    "quadrant_chart": {
-      "label_x_axis": "Traktion",
-      "label_y_axis": "Ergonomie",
-      "label_top_right": "Gute Wahl",
-      "label_bottom_right": "beliebt, aber mit Abstrichen",
-      "label_bottom_left": "vermeiden",
-      "label_top_left": "versteckte Schätze",
-      "title": "Paket-Traktion vs. Ergonomie",
-      "filename": "paket-traktion-vs-ergonomie-quadrant",
-      "label_freshness_score": "Aktualitätswert",
-      "copy_alt": {
-        "description": "Quadranten-Diagramm, das Traktion gegenüber Ergonomie für die Pakete {packages} abbildet. {analysis}. {watermark}.",
-        "side_analysis_top_right": "Die folgenden Pakete liegen im oberen rechten Quadranten (gute Wahl): {packages}",
-        "side_analysis_top_left": "Die folgenden Pakete liegen im oberen linken Quadranten (versteckte Schätze): {packages}",
-        "side_analysis_bottom_right": "Die folgenden Pakete liegen im unteren rechten Quadranten (beliebt, aber mit Abstrichen): {packages}",
-        "side_analysis_bottom_left": "Die folgenden Pakete liegen im unteren linken Quadranten (vermeiden): {packages}"
-      },
-      "explanation": {
-        "tooltip_help": "Erklärung der Bewertung anzeigen",
-        "tooltip_help_adoption": "Erklärung der Traktionsbewertung anzeigen",
-        "tooltip_help_efficiency": "Erklärung der Ergonomiebewertung anzeigen",
-        "introduction": "Der Wert wird berechnet, indem mehrere Signale zu zwei Achsen kombiniert werden:",
-        "adoption": "Traktion: spiegelt Nutzung und Aktivität wider (Downloads, Aktualität, Likes)",
-        "efficiency": "Ergonomie: spiegelt Umfang und Qualität wider (Installationsgröße, Abhängigkeiten, Sicherheitslücken, Typunterstützung)",
-        "impact_details": "Jede Kennzahl trägt mit unterschiedlicher Gewichtung bei. Starke Signale wie Downloads und Installationsgröße haben den größten Einfluss, während andere das Ergebnis verfeinern. Einige Signale (z. B. Sicherheitslücken oder Veraltung) wirken als Abzüge."
-      }
+    "scatter_chart": {
+      "copy_alt": {}
     },
     "no_dependency": {
       "label": "(Keine Abhängigkeit)",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index a142d1ab54..1d21b1db7e 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -312,8 +312,6 @@
     "warnings": "Warnings:",
     "go_back_home": "Go back home",
     "per_week": "/ week",
-    "yes": "Yes",
-    "no": "No",
     "vanity_downloads_hint": "Vanity number: no packages displayed | Vanity number: for the displayed package | Vanity number: Sum of {count} displayed packages",
     "sort": {
       "name": "name",
@@ -1238,32 +1236,16 @@
       "packages_selected": "{count}/{max} packages selected.",
       "add_hint": "Add at least 2 packages to compare."
     },
-    "quadrant_chart": {
-      "label_x_axis": "Traction",
-      "label_y_axis": "Ergonomics",
-      "label_top_right": "Solid picks",
-      "label_bottom_right": "popular with tradeoffs",
-      "label_bottom_left": "avoid",
-      "label_top_left": "hidden gems",
-      "title": "Package traction vs ergonomics",
-      "filename": "package-traction-vs-ergonomics-quadrant",
-      "label_freshness_score": "Freshness score",
+    "scatter_chart": {
+      "title": "Compare {x} vs {y}",
+      "freshness_score": "Freshness score",
       "copy_alt": {
-        "description": "Quadrant chart mapping traction versus ergonomics for the {packages} packages. {analysis}. {watermark}.",
-        "side_analysis_top_right": "The following packages are positioned on the top-right quadrant (solid picks): {packages}",
-        "side_analysis_top_left": "The following packages are positioned on the top-left quadrant (hidden gems): {packages}",
-        "side_analysis_bottom_right": "The following packages are positioned on the bottom-right quadrant (popular with tradeoffs): {packages}",
-        "side_analysis_bottom_left": "The following packages are positioned on the bottom-left quadrant (avoid): {packages}"
+        "analysis": "{package} : {x_name} ({x_value}) and {y_name} ({y_value})",
+        "description": "Scatter plot chart mapping {x_name} versus {y_name} for the {packages} packages. {analysis}. {watermark}"
       },
-      "explanation": {
-        "tooltip_help": "Show scoring explanation",
-        "tooltip_help_adoption": "Show traction scoring explanation",
-        "tooltip_help_efficiency": "Show ergonomics scoring explanation",
-        "introduction": "The score is calculated by combining multiple signals into two axes:",
-        "adoption": "Traction: reflects usage and activity (downloads, freshness, likes)",
-        "efficiency": "Ergonomics: reflects footprint and quality (install size, dependencies, vulnerabilities, type support)",
-        "impact_details": "Each metric contributes with a different weight. Strong signals like downloads and install size have the largest impact, while others refine the result. Some signals (such as vulnerabilities or deprecation) apply penalties."
-      }
+      "filename": "{x}-vs-{y}-scatter-chart",
+      "x_axis": "X-AXIS ↦",
+      "y_axis": "Y-AXIS ↥"
     },
     "no_dependency": {
       "label": "(No dependency)",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index b37ecd2bc5..9da881d4b8 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -312,8 +312,6 @@
     "warnings": "Avertissements :",
     "go_back_home": "Retour à l'accueil",
     "per_week": "/ semaine",
-    "yes": "Oui",
-    "no": "Non",
     "vanity_downloads_hint": "Métrique de vanité : aucun paquet affiché | Métrique de vanité : pour le paquet affiché | Métrique de vanité : somme des {count} paquets affichés",
     "sort": {
       "name": "nom",
@@ -1235,32 +1233,16 @@
       "packages_selected": "{count}/{max} paquets sélectionnés.",
       "add_hint": "Ajoutez au moins 2 paquets à comparer."
     },
-    "quadrant_chart": {
-      "label_x_axis": "Traction",
-      "label_y_axis": "Ergonomie",
-      "label_top_right": "Choix sûrs",
-      "label_bottom_right": "Populaires avec compromis",
-      "label_bottom_left": "À éviter",
-      "label_top_left": "Pépites cachées",
-      "title": "Popularité vs ergonomie des paquets",
-      "filename": "quadrant-popularite-vs-ergonomie-paquets",
-      "label_freshness_score": "Score de fraîcheur",
+    "scatter_chart": {
+      "title": "Comparaison {x} vs {y}",
+      "freshness_score": "Score de récence",
       "copy_alt": {
-        "description": "Diagramme en quadrants représentant la popularité par rapport à l’ergonomie pour les paquets {packages}. {analysis}. {watermark}.",
-        "side_analysis_top_right": "Les paquets suivants sont positionnés dans le quadrant supérieur droit (choix sûrs) : {packages}",
-        "side_analysis_top_left": "Les paquets suivants sont positionnés dans le quadrant supérieur gauche (pépites cachées) : {packages}",
-        "side_analysis_bottom_right": "Les paquets suivants sont positionnés dans le quadrant inférieur droit (populaires avec compromis) : {packages}",
-        "side_analysis_bottom_left": "Les paquets suivants sont positionnés dans le quadrant inférieur gauche (à éviter) : {packages}"
+        "analysis": "{package} : {x_name} ({x_value}) et {y_name} ({y_value})",
+        "description": "Graphique en nuage de points représentant {x_name} en fonction de {y_name} pour les paquets {packages}. {analysis}. {watermark}"
       },
-      "explanation": {
-        "tooltip_help": "Afficher l’explication du score",
-        "tooltip_help_adoption": "Afficher l'explication du score de popularité",
-        "tooltip_help_efficiency": "Afficher l'explication du score d'ergonomie",
-        "introduction": "Le score est calculé en combinant plusieurs signaux sur deux axes :",
-        "adoption": "Popularité : reflète l’utilisation et l’activité (téléchargements, fraîcheur, mentions)",
-        "efficiency": "Ergonomie : reflète l’empreinte et la qualité (taille d’installation, dépendances, vulnérabilités, support des types)",
-        "impact_details": "Chaque métrique contribue avec un poids différent. Les signaux forts comme les téléchargements et la taille d’installation ont le plus d’impact, tandis que d’autres affinent le résultat. Certains signaux (comme les vulnérabilités ou l'obsolescence) appliquent des pénalités."
-      }
+      "filename": "{x}-vs-{y}-scatter-chart",
+      "x_axis": "Abscisses ↦",
+      "y_axis": "Ordonnées ↥"
     },
     "no_dependency": {
       "label": "(Sans dépendance)",
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index 3e90970e59..e0aff30649 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -312,8 +312,6 @@
     "warnings": "Advarsler:",
     "go_back_home": "Gå tilbake til start",
     "per_week": "/ uke",
-    "yes": "Ja",
-    "no": "Nei",
     "vanity_downloads_hint": "Visningstall: ingen pakker vist | Visningstall: for den viste pakken | Visningstall: Sum av {count} viste pakker",
     "sort": {
       "name": "navn",
@@ -1238,33 +1236,6 @@
       "packages_selected": "{count}/{max} pakker valgt.",
       "add_hint": "Legg til minst 2 pakker for å sammenligne."
     },
-    "quadrant_chart": {
-      "label_x_axis": "Gjennomslag",
-      "label_y_axis": "Ergonomi",
-      "label_top_right": "Solide valg",
-      "label_bottom_right": "populære med kompromisser",
-      "label_bottom_left": "unngå",
-      "label_top_left": "skjulte perler",
-      "title": "Pakkegjennomslag mot ergonomi",
-      "filename": "pakke-gjennomslag-vs-ergonomi-kvadrant",
-      "label_freshness_score": "Oppdateringspoeng",
-      "copy_alt": {
-        "description": "Kvadrantdiagram som viser gjennomslag mot ergonomi for pakkene {packages}. {analysis}. {watermark}.",
-        "side_analysis_top_right": "Følgende pakker ligger i øvre høyre kvadrant (solide valg): {packages}",
-        "side_analysis_top_left": "Følgende pakker ligger i øvre venstre kvadrant (skjulte perler): {packages}",
-        "side_analysis_bottom_right": "Følgende pakker ligger i nedre høyre kvadrant (populære med kompromisser): {packages}",
-        "side_analysis_bottom_left": "Følgende pakker ligger i nedre venstre kvadrant (unngå): {packages}"
-      },
-      "explanation": {
-        "tooltip_help": "Vis forklaring av poengberegning",
-        "tooltip_help_adoption": "Vis forklaring av gjennomslagspoeng",
-        "tooltip_help_efficiency": "Vis forklaring av ergonomipoeng",
-        "introduction": "Poenget beregnes ved å kombinere flere signaler i to akser:",
-        "adoption": "Gjennomslag: gjenspeiler bruk og aktivitet (nedlastinger, oppdaterthet, likes)",
-        "efficiency": "Ergonomi: gjenspeiler fotavtrykk og kvalitet (installasjonsstørrelse, avhengigheter, sårbarheter, typestøtte)",
-        "impact_details": "Hver metrikk bidrar med ulik vekt. Sterke signaler som nedlastinger og installasjonsstørrelse har størst effekt, mens andre finjusterer resultatet. Noen signaler (som sårbarheter eller utfasing) gir trekk."
-      }
-    },
     "no_dependency": {
       "label": "(Ingen avhengighet)",
       "typeahead_title": "Hva ville James gjort?",
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 55f96fa0cc..585f573c0e 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -312,8 +312,6 @@
     "warnings": "Предупреждения:",
     "go_back_home": "Вернуться на главную",
     "per_week": "/ неделю",
-    "yes": "Да",
-    "no": "Нет",
     "vanity_downloads_hint": "Метрика тщеславия: пакеты не отображаются | Метрика тщеславия: для отображаемого пакета | Метрика тщеславия: сумма {count} отображаемых пакетов",
     "sort": {
       "name": "имя",
@@ -1238,33 +1236,6 @@
       "packages_selected": "Выбрано пакетов: {count}/{max}.",
       "add_hint": "Добавьте как минимум 2 пакета для сравнения."
     },
-    "quadrant_chart": {
-      "label_x_axis": "Востребованность",
-      "label_y_axis": "Эргономичность",
-      "label_top_right": "Надёжный выбор",
-      "label_bottom_right": "Популярно с компромиссами",
-      "label_bottom_left": "Избегать",
-      "label_top_left": "Скрытые жемчужины",
-      "title": "Востребованность против эргономичности пакетов",
-      "filename": "quadrant-ergonomics-traction-packages",
-      "label_freshness_score": "Оценка актуальности",
-      "copy_alt": {
-        "description": "Диаграмма-квадрант, сопоставляющая востребованность и эргономичность для {packages} пакетов. {analysis}. {watermark}.",
-        "side_analysis_top_right": "Следующие пакеты расположены в правом верхнем квадранте (надёжный выбор): {packages}",
-        "side_analysis_top_left": "Следующие пакеты расположены в левом верхнем квадранте (скрытые жемчужины): {packages}",
-        "side_analysis_bottom_right": "Следующие пакеты расположены в правом нижнем квадранте (популярно с компромиссами): {packages}",
-        "side_analysis_bottom_left": "Следующие пакеты расположены в левом нижнем квадранте (избегать): {packages}"
-      },
-      "explanation": {
-        "tooltip_help": "Показать объяснение оценок",
-        "tooltip_help_adoption": "Показать объяснение оценки востребованности",
-        "tooltip_help_efficiency": "Показать объяснение оценки эргономичности",
-        "introduction": "Оценка вычисляется путём комбинирования нескольких сигналов по двум осям:",
-        "adoption": "Востребованность: отражает использование и активность (загрузки, актуальность, лайки)",
-        "efficiency": "Эргономичность: отражает footprint и качество (размер установки, зависимости, уязвимости, поддержка типов)",
-        "impact_details": "Каждая метрика вносит вклад с разным весом. Сильные сигналы, такие как загрузки и размер установки, оказывают наибольшее влияние, а остальные уточняют результат. Некоторые сигналы (например, уязвимости или устаревание) накладывают штрафы."
-      }
-    },
     "no_dependency": {
       "label": "(Без зависимости)",
       "typeahead_title": "Что бы сделал Джеймс?",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 4d3f405c1a..ccf600e097 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -312,8 +312,6 @@
     "warnings": "警告：",
     "go_back_home": "返回首页",
     "per_week": "/ 周",
-    "yes": "是",
-    "no": "否",
     "vanity_downloads_hint": "累计下载量：未显示包 | 累计下载量：显示的包 | 累计下载量：{count} 个显示的包的总和",
     "sort": {
       "name": "名称",
@@ -1236,33 +1234,6 @@
       "packages_selected": "已选择 {count}/{max} 个包。",
       "add_hint": "至少添加 2 个包以进行比较。"
     },
-    "quadrant_chart": {
-      "label_x_axis": "采用度",
-      "label_y_axis": "效率",
-      "label_top_right": "高价值",
-      "label_bottom_right": "热门但偏重",
-      "label_bottom_left": "低价值",
-      "label_top_left": "有潜力",
-      "title": "包采用度 vs 效率",
-      "filename": "包-采用度-vs-效率-矩阵",
-      "label_freshness_score": "新鲜度",
-      "copy_alt": {
-        "description": "{packages} 包的采用度与效率四象限图。{analysis}。{watermark}。",
-        "side_analysis_top_right": "位于右上象限（高价值）的包：{packages}",
-        "side_analysis_top_left": "位于左上象限（有潜力）的包：{packages}",
-        "side_analysis_bottom_right": "位于右下象限（热门但偏重）的包：{packages}",
-        "side_analysis_bottom_left": "位于左下象限（低价值）的包：{packages}"
-      },
-      "explanation": {
-        "tooltip_help": "查看评分说明",
-        "tooltip_help_adoption": "查看采用度评分说明",
-        "tooltip_help_efficiency": "查看效率评分说明",
-        "introduction": "分数由多种信号组合成两个维度计算得出：",
-        "adoption": "采用度：反映使用和活跃情况（下载量、更新频率、点赞数）",
-        "efficiency": "效率：反映体积和质量（安装大小、依赖项数量、漏洞情况、类型支持）",
-        "impact_details": "各指标权重不同。下载量和安装大小等强信号影响最大，其他信号用于微调。部分信号（如漏洞或弃用）会扣减分数。"
-      }
-    },
     "no_dependency": {
       "label": "(不使用依赖)",
       "typeahead_title": "James 会怎么做？",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index 5ea5a9109c..f8accc58cd 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -312,8 +312,6 @@
     "warnings": "警告：",
     "go_back_home": "回到首頁",
     "per_week": "/ 週",
-    "yes": "是",
-    "no": "否",
     "vanity_downloads_hint": "顯示下載量：未顯示套件 | 顯示下載量：顯示的套件 | 顯示下載量：顯示的 {count} 個套件總和",
     "sort": {
       "name": "名稱",
@@ -1235,31 +1233,6 @@
       "packages_selected": "已選擇 {count}/{max} 個套件。",
       "add_hint": "至少新增 2 個套件以進行比較。"
     },
-    "quadrant_chart": {
-      "label_x_axis": "採用度",
-      "label_y_axis": "效率",
-      "label_top_right": "高價值",
-      "label_bottom_right": "熱門但偏重",
-      "label_bottom_left": "低價值",
-      "label_top_left": "有潛力",
-      "title": "套件採用度 vs 效率",
-      "filename": "套件-採用度-vs-效率-矩陣",
-      "label_freshness_score": "新鮮度",
-      "copy_alt": {
-        "description": "{packages} 套件的採用度與效率四象限圖。{analysis}。{watermark}。",
-        "side_analysis_top_right": "位於右上象限（高價值）的套件：{packages}",
-        "side_analysis_top_left": "位於左上象限（有潛力）的套件：{packages}",
-        "side_analysis_bottom_right": "位於右下象限（熱門但偏重）的套件：{packages}",
-        "side_analysis_bottom_left": "位於左下象限（低價值）的套件：{packages}"
-      },
-      "explanation": {
-        "tooltip_help": "查看評分說明",
-        "introduction": "分數由多種訊號組合成兩個維度計算得出：",
-        "adoption": "採用度：反映使用和活躍情況（下載量、更新頻率、點讚數）",
-        "efficiency": "效率：反映體積和品質（安裝大小、依賴項數量、漏洞情況、型別支援）",
-        "impact_details": "各指標權重不同。下載量和安裝大小等強訊號影響最大，其他訊號用於微調。部分訊號（如漏洞或棄用）會扣減分數。"
-      }
-    },
     "no_dependency": {
       "label": "(無相依套件)",
       "typeahead_title": "如果是 James Garbutt 會怎麼做？",
diff --git a/i18n/schema.json b/i18n/schema.json
index b3ccd57f64..8df446904a 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -940,12 +940,6 @@
         "per_week": {
           "type": "string"
         },
-        "yes": {
-          "type": "string"
-        },
-        "no": {
-          "type": "string"
-        },
         "vanity_downloads_hint": {
           "type": "string"
         },
@@ -3718,83 +3712,35 @@
           },
           "additionalProperties": false
         },
-        "quadrant_chart": {
+        "scatter_chart": {
           "type": "object",
           "properties": {
-            "label_x_axis": {
-              "type": "string"
-            },
-            "label_y_axis": {
-              "type": "string"
-            },
-            "label_top_right": {
-              "type": "string"
-            },
-            "label_bottom_right": {
-              "type": "string"
-            },
-            "label_bottom_left": {
-              "type": "string"
-            },
-            "label_top_left": {
-              "type": "string"
-            },
             "title": {
               "type": "string"
             },
-            "filename": {
-              "type": "string"
-            },
-            "label_freshness_score": {
+            "freshness_score": {
               "type": "string"
             },
             "copy_alt": {
               "type": "object",
               "properties": {
-                "description": {
-                  "type": "string"
-                },
-                "side_analysis_top_right": {
-                  "type": "string"
-                },
-                "side_analysis_top_left": {
-                  "type": "string"
-                },
-                "side_analysis_bottom_right": {
+                "analysis": {
                   "type": "string"
                 },
-                "side_analysis_bottom_left": {
+                "description": {
                   "type": "string"
                 }
               },
               "additionalProperties": false
             },
-            "explanation": {
-              "type": "object",
-              "properties": {
-                "tooltip_help": {
-                  "type": "string"
-                },
-                "tooltip_help_adoption": {
-                  "type": "string"
-                },
-                "tooltip_help_efficiency": {
-                  "type": "string"
-                },
-                "introduction": {
-                  "type": "string"
-                },
-                "adoption": {
-                  "type": "string"
-                },
-                "efficiency": {
-                  "type": "string"
-                },
-                "impact_details": {
-                  "type": "string"
-                }
-              },
-              "additionalProperties": false
+            "filename": {
+              "type": "string"
+            },
+            "x_axis": {
+              "type": "string"
+            },
+            "y_axis": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8956e2e263..9b5c60d15a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -392,7 +392,7 @@ export default defineNuxtConfig({
         '@vueuse/integrations/useFocusTrap/component',
         'vue-data-ui/vue-ui-sparkline',
         'vue-data-ui/vue-ui-xy',
-        'vue-data-ui/vue-ui-quadrant',
+        'vue-data-ui/vue-ui-scatter',
         'vue-data-ui/vue-ui-horizontal-bar',
         'virtua/vue',
         'semver',
diff --git a/package.json b/package.json
index 700a80465a..d88eb51dfe 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.16",
     "vue": "3.5.30",
-    "vue-data-ui": "3.17.11"
+    "vue-data-ui": "3.17.13"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80104d60ca..de42bd50f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -233,8 +233,8 @@ importers:
         specifier: 3.5.30
         version: 3.5.30(typescript@6.0.2)
       vue-data-ui:
-        specifier: 3.17.11
-        version: 3.17.11(vue@3.5.30)
+        specifier: 3.17.13
+        version: 3.17.13(vue@3.5.30)
     devDependencies:
       '@e18e/eslint-plugin':
         specifier: 0.3.0
@@ -10669,8 +10669,8 @@ packages:
   vue-component-type-helpers@3.2.6:
     resolution: {integrity: sha512-O02tnvIfOQVmnvoWwuSydwRoHjZVt8UEBR+2p4rT35p8GAy5VTlWP8o5qXfJR/GWCN0nVZoYWsVUvx2jwgdBmQ==}
 
-  vue-data-ui@3.17.11:
-    resolution: {integrity: sha512-ZwKPjdg8a5FXaVJpXx+nHGfBwlL/qZqOk+9y3Pk7OJxKz3th0S6h/ANvwiAAVnLYlp1wKDzDuXm6am//+bUWRg==}
+  vue-data-ui@3.17.13:
+    resolution: {integrity: sha512-o/nvORpKD+iqZH4f+sc3lDkY81dXScq7Hr3+TQmKiQMxHd0eCxsMQ6nXI+zbqToFaHuTaQIDuhiNAjhF+KJiyw==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -22940,7 +22940,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.6: {}
 
-  vue-data-ui@3.17.11(vue@3.5.30):
+  vue-data-ui@3.17.13(vue@3.5.30):
     dependencies:
       vue: 3.5.30(typescript@6.0.2)
 
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index b028e55564..7a3dd1373c 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -79,11 +79,6 @@ const allowedWarnings: RegExp[] = [
   /expose\(\) should be called only once/,
 ]
 
-// Filter specific violations for rare edge cases (typically complex custom interactions in charts)
-function filterViolations(results: AxeResults, ignoredRuleIds: string[]): AxeResults['violations'] {
-  return results.violations.filter(violation => !ignoredRuleIds.includes(violation.id))
-}
-
 beforeEach(() => {
   warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 })
@@ -272,7 +267,7 @@ import ToggleServer from '~/components/Settings/Toggle.server.vue'
 import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
 import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
 import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
-import FacetQuadrantChart from '~/components/Compare/FacetQuadrantChart.vue'
+import FacetScatterChart from '~/components/Compare/FacetScatterChart.vue'
 import PackageLikeCard from '~/components/Package/LikeCard.vue'
 import SizeIncrease from '~/components/Package/SizeIncrease.vue'
 import Likes from '~/components/Package/Likes.vue'
@@ -1022,9 +1017,9 @@ describe('component accessibility audits', () => {
       })
     })
 
-    describe('FacetQuadrantChart', () => {
+    describe('FacetScatterChart', () => {
       it('should have no accessibility violations', async () => {
-        const wrapper = await mountSuspended(FacetQuadrantChart, {
+        const wrapper = await mountSuspended(FacetScatterChart, {
           props: {
             packagesData: [
               {
@@ -1116,22 +1111,19 @@ describe('component accessibility audits', () => {
           },
         })
         const results = await runAxe(wrapper)
-
-        const violations = filterViolations(results, ['nested-interactive', 'button-name'])
-        expect(violations).toEqual([])
+        expect(results.violations).toEqual([])
       })
 
       it('should have no accessibility violations with empty data', async () => {
-        const wrapper = await mountSuspended(FacetQuadrantChart, {
+        const wrapper = await mountSuspended(FacetScatterChart, {
           props: {
             packagesData: [],
             packages: [],
           },
         })
-        const results = await runAxe(wrapper)
 
-        const violations = filterViolations(results, ['nested-interactive', 'button-name'])
-        expect(violations).toEqual([])
+        const results = await runAxe(wrapper)
+        expect(results.violations).toEqual([])
       })
     })
 
diff --git a/test/unit/app/utils/compare-quadrant-chart.spec.ts b/test/unit/app/utils/compare-quadrant-chart.spec.ts
deleted file mode 100644
index 37e86bffc0..0000000000
--- a/test/unit/app/utils/compare-quadrant-chart.spec.ts
+++ /dev/null
@@ -1,626 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { createQuadrantDataset, type PackageQuadrantInput } from '~/utils/compare-quadrant-chart'
-
-function getPointById(dataset: ReturnType<typeof createQuadrantDataset>, id: string) {
-  const point = dataset.find(packagePoint => packagePoint.id === id)
-  expect(point).toBeDefined()
-  return point!
-}
-
-describe('createQuadrantDataset', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-    vi.setSystemTime(new Date('2026-04-05T12:00:00.000Z'))
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('returns an empty array when the input is empty', () => {
-    expect(createQuadrantDataset([])).toEqual([])
-  })
-
-  it('preserves package identity fields', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'pkg-1',
-        license: 'MIT',
-        name: 'alpha',
-        downloads: 100,
-      },
-    ]
-
-    const [point] = createQuadrantDataset(input)
-
-    expect(point).toBeDefined()
-    expect(point!.id).toBe('pkg-1')
-    expect(point!.license).toBe('MIT')
-    expect(point!.name).toBe('alpha')
-  })
-
-  it('uses safe defaults for nullable and missing numeric and boolean values', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'pkg-1',
-        license: 'MIT',
-        name: 'alpha',
-        downloads: null,
-        totalLikes: undefined,
-        packageSize: null,
-        installSize: undefined,
-        dependencies: null,
-        totalDependencies: undefined,
-        vulnerabilities: null,
-        deprecated: null,
-        types: null,
-        lastUpdated: null,
-      },
-      {
-        id: 'pkg-2',
-        license: 'Apache-2.0',
-        name: 'beta',
-        downloads: 10,
-        totalLikes: 5,
-        packageSize: 20,
-        installSize: 30,
-        dependencies: 2,
-        totalDependencies: 4,
-        vulnerabilities: 1,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const [point] = createQuadrantDataset(input)
-
-    expect(point).toBeDefined()
-    expect(point!.metrics.downloads).toBe(0)
-    expect(point!.metrics.totalLikes).toBe(0)
-    expect(point!.metrics.packageSize).toBe(0)
-    expect(point!.metrics.installSize).toBe(0)
-    expect(point!.metrics.dependencies).toBe(0)
-    expect(point!.metrics.totalDependencies).toBe(0)
-    expect(point!.metrics.vulnerabilities).toBe(0)
-    expect(point!.metrics.deprecated).toBe(false)
-    expect(point!.metrics.types).toBe(false)
-    expect(point!.metrics.freshnessScore).toBe(-1)
-    expect(point!.metrics.freshnessPercent).toBe(0)
-  })
-
-  it('treats non-finite numeric values as zero', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'pkg-1',
-        license: 'MIT',
-        name: 'alpha',
-        downloads: Number.NaN,
-        totalLikes: Number.POSITIVE_INFINITY,
-        packageSize: Number.NEGATIVE_INFINITY,
-      },
-      {
-        id: 'pkg-2',
-        license: 'MIT',
-        name: 'beta',
-        downloads: 100,
-        totalLikes: 10,
-        packageSize: 50,
-      },
-    ]
-
-    const [point] = createQuadrantDataset(input)
-
-    expect(point).toBeDefined()
-    expect(point!.metrics.downloads).toBe(0)
-    expect(point!.metrics.totalLikes).toBe(0)
-    expect(point!.metrics.packageSize).toBe(0)
-  })
-
-  it('computes freshness score and percentage from an ISO date string', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'fresh',
-        license: 'MIT',
-        name: 'fresh',
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'old',
-        license: 'MIT',
-        name: 'old',
-        lastUpdated: '2025-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const freshPoint = getPointById(dataset, 'fresh')
-    const oldPoint = getPointById(dataset, 'old')
-
-    expect(freshPoint.metrics.freshnessScore).toBe(1)
-    expect(freshPoint.metrics.freshnessPercent).toBe(100)
-
-    expect(oldPoint.metrics.freshnessScore).toBe(-1)
-    expect(oldPoint.metrics.freshnessPercent).toBe(0)
-  })
-
-  it('computes freshness from a Date instance', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'fresh',
-        license: 'MIT',
-        name: 'fresh',
-        lastUpdated: new Date('2026-04-05T12:00:00.000Z'),
-      },
-      {
-        id: 'reference',
-        license: 'MIT',
-        name: 'reference',
-        lastUpdated: new Date('2025-10-05T12:00:00.000Z'),
-      },
-    ]
-
-    const [point] = createQuadrantDataset(input)
-
-    expect(point).toBeDefined()
-    expect(point!.metrics.freshnessScore).toBe(1)
-    expect(point!.metrics.freshnessPercent).toBe(100)
-  })
-
-  it('returns missing freshness values as score -1 and percent 0 for invalid dates', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'invalid',
-        license: 'MIT',
-        name: 'invalid',
-        lastUpdated: 'not-a-date',
-      },
-      {
-        id: 'valid',
-        license: 'MIT',
-        name: 'valid',
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const invalidPoint = getPointById(dataset, 'invalid')
-
-    expect(invalidPoint.metrics.freshnessScore).toBe(-1)
-    expect(invalidPoint.metrics.freshnessPercent).toBe(0)
-  })
-
-  it('forces efficiencyScore to -1 when a package is deprecated', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'deprecated-package',
-        license: 'MIT',
-        name: 'deprecated-package',
-        downloads: 1_000_000,
-        totalLikes: 500,
-        packageSize: 1,
-        installSize: 1,
-        dependencies: 0,
-        totalDependencies: 0,
-        vulnerabilities: 0,
-        deprecated: true,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'healthy-package',
-        license: 'MIT',
-        name: 'healthy-package',
-        downloads: 10,
-        totalLikes: 0,
-        packageSize: 10_000,
-        installSize: 10_000,
-        dependencies: 100,
-        totalDependencies: 1_000,
-        vulnerabilities: 10,
-        deprecated: false,
-        types: false,
-        lastUpdated: '2025-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const deprecatedPoint = getPointById(dataset, 'deprecated-package')
-
-    expect(deprecatedPoint.metrics.deprecated).toBe(true)
-    expect(deprecatedPoint.efficiencyScore).toBe(-1)
-    expect(deprecatedPoint.y).toBe(-1)
-    expect(deprecatedPoint.quadrant).toMatch(/BOTTOM_/)
-  })
-
-  it('rewards typed packages over untyped packages when other metrics are equal', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'typed',
-        license: 'MIT',
-        name: 'typed',
-        downloads: 100,
-        totalLikes: 10,
-        packageSize: 50,
-        installSize: 75,
-        dependencies: 5,
-        totalDependencies: 10,
-        vulnerabilities: 1,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'untyped',
-        license: 'MIT',
-        name: 'untyped',
-        downloads: 100,
-        totalLikes: 10,
-        packageSize: 50,
-        installSize: 75,
-        dependencies: 5,
-        totalDependencies: 10,
-        vulnerabilities: 1,
-        deprecated: false,
-        types: false,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const typedPoint = getPointById(dataset, 'typed')
-    const untypedPoint = getPointById(dataset, 'untyped')
-
-    expect(typedPoint.efficiencyScore).toBeGreaterThan(untypedPoint.efficiencyScore)
-  })
-
-  it('penalises vulnerabilities more aggressively as they increase', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'secure',
-        license: 'MIT',
-        name: 'secure',
-        downloads: 100,
-        totalLikes: 10,
-        packageSize: 50,
-        installSize: 50,
-        dependencies: 5,
-        totalDependencies: 10,
-        vulnerabilities: 0,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'vulnerable',
-        license: 'MIT',
-        name: 'vulnerable',
-        downloads: 100,
-        totalLikes: 10,
-        packageSize: 50,
-        installSize: 50,
-        dependencies: 5,
-        totalDependencies: 10,
-        vulnerabilities: 10,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const securePoint = getPointById(dataset, 'secure')
-    const vulnerablePoint = getPointById(dataset, 'vulnerable')
-
-    expect(securePoint.efficiencyScore).toBeGreaterThan(vulnerablePoint.efficiencyScore)
-  })
-
-  it('assigns TOP_RIGHT when adoptionScore and efficiencyScore are both non-negative', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'best',
-        license: 'MIT',
-        name: 'best',
-        downloads: 100_000_000,
-        totalLikes: 1_000,
-        packageSize: 1,
-        installSize: 1,
-        dependencies: 0,
-        totalDependencies: 0,
-        vulnerabilities: 0,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'worst',
-        license: 'MIT',
-        name: 'worst',
-        downloads: 1,
-        totalLikes: 0,
-        packageSize: 15_000_000,
-        installSize: 25_000_000,
-        dependencies: 100,
-        totalDependencies: 1_000,
-        vulnerabilities: 10,
-        deprecated: false,
-        types: false,
-        lastUpdated: '2025-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const point = getPointById(dataset, 'best')
-
-    expect(point.adoptionScore).toBeGreaterThanOrEqual(0)
-    expect(point.efficiencyScore).toBeGreaterThanOrEqual(0)
-    expect(point.quadrant).toBe('TOP_RIGHT')
-    expect(point.x).toBe(point.adoptionScore)
-    expect(point.y).toBe(point.efficiencyScore)
-  })
-
-  it('assigns TOP_LEFT when adoptionScore is negative and efficiencyScore is non-negative', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'efficient-but-unadopted',
-        license: 'MIT',
-        name: 'efficient-but-unadopted',
-        downloads: 1,
-        totalLikes: 0,
-        packageSize: 1,
-        installSize: 1,
-        dependencies: 0,
-        totalDependencies: 0,
-        vulnerabilities: 0,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'popular-and-heavy',
-        license: 'MIT',
-        name: 'popular-and-heavy',
-        downloads: 100_000_000,
-        totalLikes: 1_000,
-        packageSize: 15_000_000,
-        installSize: 25_000_000,
-        dependencies: 100,
-        totalDependencies: 1_000,
-        vulnerabilities: 10,
-        deprecated: false,
-        types: false,
-        lastUpdated: '2025-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const point = getPointById(dataset, 'efficient-but-unadopted')
-
-    expect(point.adoptionScore).toBeLessThan(0)
-    expect(point.efficiencyScore).toBeGreaterThanOrEqual(0)
-    expect(point.quadrant).toBe('TOP_LEFT')
-  })
-
-  it('assigns BOTTOM_RIGHT when adoptionScore is non-negative and efficiencyScore is negative', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'popular-but-inefficient',
-        license: 'MIT',
-        name: 'popular-but-inefficient',
-        downloads: 100_000_000,
-        totalLikes: 1_000,
-        packageSize: 15_000_000,
-        installSize: 25_000_000,
-        dependencies: 100,
-        totalDependencies: 1_000,
-        vulnerabilities: 10,
-        deprecated: false,
-        types: false,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'niche-but-efficient',
-        license: 'MIT',
-        name: 'niche-but-efficient',
-        downloads: 1,
-        totalLikes: 0,
-        packageSize: 1,
-        installSize: 1,
-        dependencies: 0,
-        totalDependencies: 0,
-        vulnerabilities: 0,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2025-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const point = getPointById(dataset, 'popular-but-inefficient')
-
-    expect(point.adoptionScore).toBeGreaterThanOrEqual(0)
-    expect(point.efficiencyScore).toBeLessThan(0)
-    expect(point.quadrant).toBe('BOTTOM_RIGHT')
-  })
-
-  it('assigns BOTTOM_LEFT when adoptionScore and efficiencyScore are both negative', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'worst',
-        license: 'MIT',
-        name: 'worst',
-        downloads: 1,
-        totalLikes: 0,
-        packageSize: 15_000_000,
-        installSize: 25_000_000,
-        dependencies: 100,
-        totalDependencies: 1_000,
-        vulnerabilities: 10,
-        deprecated: false,
-        types: false,
-        lastUpdated: '2025-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'best',
-        license: 'MIT',
-        name: 'best',
-        downloads: 100_000_000,
-        totalLikes: 1_000,
-        packageSize: 1,
-        installSize: 1,
-        dependencies: 0,
-        totalDependencies: 0,
-        vulnerabilities: 0,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const point = getPointById(dataset, 'worst')
-
-    expect(point.adoptionScore).toBeLessThan(0)
-    expect(point.efficiencyScore).toBeLessThan(0)
-    expect(point.quadrant).toBe('BOTTOM_LEFT')
-  })
-
-  it('uses logarithmic normalization so larger download counts still improve adoption score across orders of magnitude', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'small',
-        license: 'MIT',
-        name: 'small',
-        downloads: 10,
-        totalLikes: 0,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'medium',
-        license: 'MIT',
-        name: 'medium',
-        downloads: 1_000,
-        totalLikes: 0,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'large',
-        license: 'MIT',
-        name: 'large',
-        downloads: 1_000_000,
-        totalLikes: 0,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const small = getPointById(dataset, 'small')
-    const medium = getPointById(dataset, 'medium')
-    const large = getPointById(dataset, 'large')
-
-    expect(small.adoptionScore).toBeLessThan(medium.adoptionScore)
-    expect(medium.adoptionScore).toBeLessThan(large.adoptionScore)
-  })
-
-  it('penalises larger install sizes when other efficiency metrics are equal', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'small-install',
-        license: 'MIT',
-        name: 'small-install',
-        downloads: 1_000,
-        totalLikes: 10,
-        packageSize: 10_000,
-        installSize: 50_000,
-        dependencies: 10,
-        totalDependencies: 50,
-        vulnerabilities: 0,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'large-install',
-        license: 'MIT',
-        name: 'large-install',
-        downloads: 1_000,
-        totalLikes: 10,
-        packageSize: 10_000,
-        installSize: 10_000_000,
-        dependencies: 10,
-        totalDependencies: 50,
-        vulnerabilities: 0,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-    const smallInstall = getPointById(dataset, 'small-install')
-    const largeInstall = getPointById(dataset, 'large-install')
-
-    expect(smallInstall.efficiencyScore).toBeGreaterThan(largeInstall.efficiencyScore)
-  })
-
-  it('returns one point per input package and keeps the input order', () => {
-    const input: PackageQuadrantInput[] = [
-      { id: 'one', license: 'MIT', name: 'one', downloads: 1 },
-      { id: 'two', license: 'MIT', name: 'two', downloads: 2 },
-      { id: 'three', license: 'MIT', name: 'three', downloads: 3 },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-
-    expect(dataset).toHaveLength(3)
-    expect(dataset.map(point => point.id)).toEqual(['one', 'two', 'three'])
-  })
-
-  it('clamps scores to the [-1, 1] range', () => {
-    const input: PackageQuadrantInput[] = [
-      {
-        id: 'extreme-best',
-        license: 'MIT',
-        name: 'extreme-best',
-        downloads: 10_000_000_000,
-        totalLikes: 10_000,
-        packageSize: 1,
-        installSize: 1,
-        dependencies: 0,
-        totalDependencies: 0,
-        vulnerabilities: 0,
-        deprecated: false,
-        types: true,
-        lastUpdated: '2026-04-05T12:00:00.000Z',
-      },
-      {
-        id: 'extreme-worst',
-        license: 'MIT',
-        name: 'extreme-worst',
-        downloads: 0,
-        totalLikes: 0,
-        packageSize: 100_000_000,
-        installSize: 100_000_000,
-        dependencies: 10_000,
-        totalDependencies: 20_000,
-        vulnerabilities: 10_000,
-        deprecated: false,
-        types: false,
-        lastUpdated: '2024-04-05T12:00:00.000Z',
-      },
-    ]
-
-    const dataset = createQuadrantDataset(input)
-
-    for (const point of dataset) {
-      expect(point.adoptionScore).toBeGreaterThanOrEqual(-1)
-      expect(point.adoptionScore).toBeLessThanOrEqual(1)
-      expect(point.efficiencyScore).toBeGreaterThanOrEqual(-1)
-      expect(point.efficiencyScore).toBeLessThanOrEqual(1)
-      expect(point.x).toBeGreaterThanOrEqual(-1)
-      expect(point.x).toBeLessThanOrEqual(1)
-      expect(point.y).toBeGreaterThanOrEqual(-1)
-      expect(point.y).toBeLessThanOrEqual(1)
-    }
-  })
-})
diff --git a/test/unit/app/utils/compare-scatter-chart.spec.ts b/test/unit/app/utils/compare-scatter-chart.spec.ts
new file mode 100644
index 0000000000..f78d8b5638
--- /dev/null
+++ b/test/unit/app/utils/compare-scatter-chart.spec.ts
@@ -0,0 +1,1058 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
+
+vi.mock('~/utils/charts', () => ({
+  applyEllipsis: vi.fn((value: string, limit: number) => `ellipsis(${value},${limit})`),
+}))
+
+vi.mock('~/utils/frameworks', () => ({
+  isListedFramework: vi.fn((name: string) => name === 'vue'),
+  getFrameworkColor: vi.fn((name: string) => `color:${name}`),
+}))
+
+describe('buildCompareScatterChartDataset', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-04-11T12:00:00.000Z'))
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.clearAllMocks()
+  })
+
+  it('builds a dataset entry with raw values, full name, ellipsed name, and framework color', () => {
+    const packagesData = [
+      {
+        package: { name: 'vue' },
+        downloads: 1200,
+        installSize: { totalSize: 4096 },
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['fallback-package'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(vue,14)',
+        fullName: 'vue',
+        color: 'color:vue',
+        values: [
+          {
+            x: 1200,
+            y: 4096,
+            name: 'ellipsis(vue,14)',
+            fullName: 'vue',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('does not set a color when the package is not a listed framework', () => {
+    const packagesData = [
+      {
+        package: { name: 'some-library' },
+        downloads: 100,
+        installSize: { totalSize: 200 },
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['fallback-package'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(some-library,14)',
+        fullName: 'some-library',
+        color: undefined,
+        values: [
+          {
+            x: 100,
+            y: 200,
+            name: 'ellipsis(some-library,14)',
+            fullName: 'some-library',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('uses the fallback package name when package.name is missing', () => {
+    const packagesData = [
+      {
+        downloads: 50,
+        installSize: { totalSize: 75 },
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['fallback-name'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(fallback-name,14)',
+        fullName: 'fallback-name',
+        color: undefined,
+        values: [
+          {
+            x: 50,
+            y: 75,
+            name: 'ellipsis(fallback-name,14)',
+            fullName: 'fallback-name',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('uses an autogenerated fallback package name when packages[index] is missing', () => {
+    const packagesData = [
+      {
+        downloads: 10,
+        installSize: { totalSize: 20 },
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(packagesData, [], 'downloads', 'installSize')
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(package-1,14)',
+        fullName: 'package-1',
+        color: undefined,
+        values: [
+          {
+            x: 10,
+            y: 20,
+            name: 'ellipsis(package-1,14)',
+            fullName: 'package-1',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('preserves the package index when determining fallback names', () => {
+    const packagesData = [
+      null,
+      {
+        downloads: 11,
+        installSize: { totalSize: 22 },
+      },
+    ] as ReadonlyArray<PackageComparisonData | null>
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['unused-first'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(package-2,14)',
+        fullName: 'package-2',
+        color: undefined,
+        values: [
+          {
+            x: 11,
+            y: 22,
+            name: 'ellipsis(package-2,14)',
+            fullName: 'package-2',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('uses the fallback name when package.name is an empty string', () => {
+    const packagesData = [
+      {
+        package: { name: '' },
+        downloads: 12,
+        installSize: { totalSize: 34 },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['fallback-empty-name'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(fallback-empty-name,14)',
+        fullName: 'fallback-empty-name',
+        color: undefined,
+        values: [
+          {
+            x: 12,
+            y: 34,
+            name: 'ellipsis(fallback-empty-name,14)',
+            fullName: 'fallback-empty-name',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('skips null package entries', () => {
+    const packagesData = [
+      null,
+      {
+        package: { name: 'vue' },
+        downloads: 200,
+        installSize: { totalSize: 300 },
+      },
+    ] as ReadonlyArray<PackageComparisonData | null>
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['first', 'second'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(vue,14)',
+        fullName: 'vue',
+        color: 'color:vue',
+        values: [
+          {
+            x: 200,
+            y: 300,
+            name: 'ellipsis(vue,14)',
+            fullName: 'vue',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('skips entries when the x facet resolves to null', () => {
+    const packagesData = [
+      {
+        package: { name: 'pkg-a' },
+        downloads: 'invalid',
+        installSize: { totalSize: 300 },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['pkg-a'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when the y facet resolves to null', () => {
+    const packagesData = [
+      {
+        package: { name: 'pkg-a' },
+        downloads: 300,
+        installSize: { totalSize: undefined },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['pkg-a'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when a numeric facet is Infinity', () => {
+    const packagesData = [
+      {
+        package: { name: 'infinite-downloads-package' },
+        downloads: Infinity,
+        installSize: { totalSize: 200 },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['infinite-downloads-package'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('maps the types facet to 1 when a type kind exists and to 0 otherwise', () => {
+    const packagesData = [
+      {
+        package: { name: 'typed-package' },
+        analysis: { types: { kind: 'included' } },
+        downloads: 120,
+      },
+      {
+        package: { name: 'untyped-package' },
+        analysis: { types: { kind: '' } },
+        downloads: 140,
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['typed-package', 'untyped-package'],
+      'types',
+      'downloads',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(typed-package,14)',
+        fullName: 'typed-package',
+        color: undefined,
+        values: [
+          {
+            x: 1,
+            y: 120,
+            name: 'ellipsis(typed-package,14)',
+            fullName: 'typed-package',
+          },
+        ],
+      },
+      {
+        name: 'ellipsis(untyped-package,14)',
+        fullName: 'untyped-package',
+        color: undefined,
+        values: [
+          {
+            x: 0,
+            y: 140,
+            name: 'ellipsis(untyped-package,14)',
+            fullName: 'untyped-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('returns 0 for the types facet when analysis.types is missing', () => {
+    const packagesData = [
+      {
+        package: { name: 'pkg-no-types' },
+        downloads: 77,
+        analysis: {},
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['pkg-no-types'],
+      'types',
+      'downloads',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(pkg-no-types,14)',
+        fullName: 'pkg-no-types',
+        color: undefined,
+        values: [
+          {
+            x: 0,
+            y: 77,
+            name: 'ellipsis(pkg-no-types,14)',
+            fullName: 'pkg-no-types',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('maps nested numeric facets correctly', () => {
+    const packagesData = [
+      {
+        package: { name: 'pkg-nested' },
+        directDeps: 12,
+        installSize: {
+          dependencyCount: 34,
+          totalSize: 1024,
+        },
+        vulnerabilities: {
+          count: 2,
+        },
+      },
+    ] as PackageComparisonData[]
+
+    expect(
+      buildCompareScatterChartDataset(
+        packagesData,
+        ['pkg-nested'],
+        'dependencies',
+        'totalDependencies',
+      ),
+    ).toEqual([
+      {
+        name: 'ellipsis(pkg-nested,14)',
+        fullName: 'pkg-nested',
+        color: undefined,
+        values: [
+          {
+            x: 12,
+            y: 34,
+            name: 'ellipsis(pkg-nested,14)',
+            fullName: 'pkg-nested',
+          },
+        ],
+      },
+    ])
+
+    expect(
+      buildCompareScatterChartDataset(
+        packagesData,
+        ['pkg-nested'],
+        'vulnerabilities',
+        'packageSize',
+      ),
+    ).toEqual([])
+  })
+
+  it('maps totalLikes and packageSize facets correctly', () => {
+    const packagesData = [
+      {
+        package: { name: 'metrics-package' },
+        totalLikes: 42,
+        packageSize: 2048,
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['metrics-package'],
+      'totalLikes',
+      'packageSize',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(metrics-package,14)',
+        fullName: 'metrics-package',
+        color: undefined,
+        values: [
+          {
+            x: 42,
+            y: 2048,
+            name: 'ellipsis(metrics-package,14)',
+            fullName: 'metrics-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('maps vulnerabilities and packageSize facets correctly when both are present', () => {
+    const packagesData = [
+      {
+        package: { name: 'security-package' },
+        packageSize: 512,
+        vulnerabilities: {
+          count: 3,
+        },
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['security-package'],
+      'vulnerabilities',
+      'packageSize',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(security-package,14)',
+        fullName: 'security-package',
+        color: undefined,
+        values: [
+          {
+            x: 3,
+            y: 512,
+            name: 'ellipsis(security-package,14)',
+            fullName: 'security-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('returns 100 freshness for a package updated just now', () => {
+    const now = new Date('2026-04-11T12:00:00.000Z')
+
+    const packagesData = [
+      {
+        package: { name: 'fresh-package' },
+        metadata: { lastUpdated: now.toISOString() },
+        downloads: 1000,
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['fresh-package'],
+      'lastUpdated',
+      'downloads',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(fresh-package,14)',
+        fullName: 'fresh-package',
+        color: undefined,
+        values: [
+          {
+            x: 100,
+            y: 1000,
+            name: 'ellipsis(fresh-package,14)',
+            fullName: 'fresh-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('returns 0 freshness for a package older than the maximum age window', () => {
+    const olderThanOneYear = new Date('2025-04-10T12:00:00.000Z')
+
+    const packagesData = [
+      {
+        package: { name: 'stale-package' },
+        metadata: { lastUpdated: olderThanOneYear.toISOString() },
+        downloads: 1000,
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['stale-package'],
+      'lastUpdated',
+      'downloads',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(stale-package,14)',
+        fullName: 'stale-package',
+        color: undefined,
+        values: [
+          {
+            x: 0,
+            y: 1000,
+            name: 'ellipsis(stale-package,14)',
+            fullName: 'stale-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('returns a proportional freshness score for partially old dates', () => {
+    const aboutHalfFresh = new Date('2025-10-11T12:00:00.000Z')
+
+    const packagesData = [
+      {
+        package: { name: 'mid-package' },
+        metadata: { lastUpdated: aboutHalfFresh.toISOString() },
+        downloads: 321,
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['mid-package'],
+      'lastUpdated',
+      'downloads',
+    )
+
+    expect(result).toHaveLength(1)
+    expect(result[0]?.values[0]?.x).toBeCloseTo(50.136986301369866)
+    expect(result[0]?.values[0]?.y).toBe(321)
+  })
+
+  it('skips entries when lastUpdated is invalid', () => {
+    const packagesData = [
+      {
+        package: { name: 'broken-date-package' },
+        metadata: { lastUpdated: 'not-a-date' },
+        downloads: 100,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['broken-date-package'],
+      'lastUpdated',
+      'downloads',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when lastUpdated is missing', () => {
+    const packagesData = [
+      {
+        package: { name: 'missing-date-package' },
+        metadata: {},
+        downloads: 100,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['missing-date-package'],
+      'lastUpdated',
+      'downloads',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('clamps freshness to 100 for future dates', () => {
+    const futureDate = new Date('2026-04-12T12:00:00.000Z')
+
+    const packagesData = [
+      {
+        package: { name: 'future-package' },
+        metadata: { lastUpdated: futureDate.toISOString() },
+        downloads: 100,
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['future-package'],
+      'lastUpdated',
+      'downloads',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(future-package,14)',
+        fullName: 'future-package',
+        color: undefined,
+        values: [
+          {
+            x: 100,
+            y: 100,
+            name: 'ellipsis(future-package,14)',
+            fullName: 'future-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('skips entries when an unsupported facet is provided', () => {
+    const packagesData = [
+      {
+        package: { name: 'unknown-facet-package' },
+        downloads: 10,
+        installSize: { totalSize: 20 },
+      },
+    ] as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['unknown-facet-package'],
+      'unknownFacet' as ComparisonFacet,
+      'installSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when installSize is missing', () => {
+    const packagesData = [
+      {
+        package: { name: 'missing-install-size-package' },
+        downloads: 100,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['missing-install-size-package'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('supports Date instances for lastUpdated', () => {
+    const packagesData = [
+      {
+        package: { name: 'date-instance-package' },
+        metadata: { lastUpdated: new Date('2026-04-11T12:00:00.000Z') },
+        downloads: 250,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['date-instance-package'],
+      'lastUpdated',
+      'downloads',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(date-instance-package,14)',
+        fullName: 'date-instance-package',
+        color: undefined,
+        values: [
+          {
+            x: 100,
+            y: 250,
+            name: 'ellipsis(date-instance-package,14)',
+            fullName: 'date-instance-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('returns 0 for types when analysis is missing entirely', () => {
+    const packagesData = [
+      {
+        package: { name: 'missing-analysis-package' },
+        downloads: 88,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['missing-analysis-package'],
+      'types',
+      'downloads',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(missing-analysis-package,14)',
+        fullName: 'missing-analysis-package',
+        color: undefined,
+        values: [
+          {
+            x: 0,
+            y: 88,
+            name: 'ellipsis(missing-analysis-package,14)',
+            fullName: 'missing-analysis-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('skips entries when totalDependencies is missing', () => {
+    const packagesData = [
+      {
+        package: { name: 'missing-total-dependencies-package' },
+        downloads: 100,
+        installSize: {
+          totalSize: 400,
+        },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['missing-total-dependencies-package'],
+      'downloads',
+      'totalDependencies',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when vulnerabilities count is missing', () => {
+    const packagesData = [
+      {
+        package: { name: 'missing-vulnerabilities-package' },
+        packageSize: 512,
+        vulnerabilities: {},
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['missing-vulnerabilities-package'],
+      'vulnerabilities',
+      'packageSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('returns 0 for types when kind is undefined', () => {
+    const packagesData = [
+      {
+        package: { name: 'undefined-kind-package' },
+        downloads: 91,
+        analysis: {
+          types: {},
+        },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['undefined-kind-package'],
+      'types',
+      'downloads',
+    )
+
+    expect(result).toEqual([
+      {
+        name: 'ellipsis(undefined-kind-package,14)',
+        fullName: 'undefined-kind-package',
+        color: undefined,
+        values: [
+          {
+            x: 0,
+            y: 91,
+            name: 'ellipsis(undefined-kind-package,14)',
+            fullName: 'undefined-kind-package',
+          },
+        ],
+      },
+    ])
+  })
+
+  it('skips entries when totalDependencies is Infinity', () => {
+    const packagesData = [
+      {
+        package: { name: 'infinite-total-dependencies-package' },
+        downloads: 100,
+        installSize: {
+          dependencyCount: Infinity,
+        },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['infinite-total-dependencies-package'],
+      'downloads',
+      'totalDependencies',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when vulnerabilities count is Infinity', () => {
+    const packagesData = [
+      {
+        package: { name: 'infinite-vulnerabilities-package' },
+        packageSize: 512,
+        vulnerabilities: {
+          count: Infinity,
+        },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['infinite-vulnerabilities-package'],
+      'vulnerabilities',
+      'packageSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when installSize is undefined for totalDependencies', () => {
+    const packagesData = [
+      {
+        package: { name: 'undefined-install-size-package' },
+        downloads: 100,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['undefined-install-size-package'],
+      'downloads',
+      'totalDependencies',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when vulnerabilities is undefined', () => {
+    const packagesData = [
+      {
+        package: { name: 'undefined-vulnerabilities-package' },
+        packageSize: 512,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['undefined-vulnerabilities-package'],
+      'vulnerabilities',
+      'packageSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when totalLikes is missing', () => {
+    const packagesData = [
+      {
+        package: { name: 'missing-total-likes-package' },
+        packageSize: 100,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['missing-total-likes-package'],
+      'totalLikes',
+      'packageSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when totalLikes is Infinity', () => {
+    const packagesData = [
+      {
+        package: { name: 'infinite-total-likes-package' },
+        totalLikes: Infinity,
+        packageSize: 100,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['infinite-total-likes-package'],
+      'totalLikes',
+      'packageSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when packageSize is missing', () => {
+    const packagesData = [
+      {
+        package: { name: 'missing-package-size-package' },
+        totalLikes: 42,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['missing-package-size-package'],
+      'totalLikes',
+      'packageSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when packageSize is Infinity', () => {
+    const packagesData = [
+      {
+        package: { name: 'infinite-package-size-package' },
+        totalLikes: 42,
+        packageSize: Infinity,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['infinite-package-size-package'],
+      'totalLikes',
+      'packageSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when installSize totalSize is Infinity', () => {
+    const packagesData = [
+      {
+        package: { name: 'infinite-install-size-package' },
+        downloads: 100,
+        installSize: {
+          totalSize: Infinity,
+        },
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['infinite-install-size-package'],
+      'downloads',
+      'installSize',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when directDeps is missing', () => {
+    const packagesData = [
+      {
+        package: { name: 'missing-direct-deps-package' },
+        downloads: 100,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['missing-direct-deps-package'],
+      'dependencies',
+      'downloads',
+    )
+
+    expect(result).toEqual([])
+  })
+
+  it('skips entries when directDeps is Infinity', () => {
+    const packagesData = [
+      {
+        package: { name: 'infinite-direct-deps-package' },
+        directDeps: Infinity,
+        downloads: 100,
+      },
+    ] as unknown as PackageComparisonData[]
+
+    const result = buildCompareScatterChartDataset(
+      packagesData,
+      ['infinite-direct-deps-package'],
+      'dependencies',
+      'downloads',
+    )
+
+    expect(result).toEqual([])
+  })
+})