diff --git a/src/charts/bubbleChart.ts b/src/charts/bubbleChart.ts
index 30b11f08e53e9494bd411360427c96527d5e61b4..e599d0ad4de75b30d695e44fc65bdc3dc6ce0205 100644
--- a/src/charts/bubbleChart.ts
+++ b/src/charts/bubbleChart.ts
@@ -102,7 +102,7 @@ export default class BubbleChart extends SearchableChart {
 
         const node = vis.chart
             .selectAll("g")
-            .data(vis.packRoot?.descendants())
+            .data(vis.packRoot?.leaves())
             .join(
                 (enter: any) => enter.append("g"),
                 (update: any) => update
@@ -113,6 +113,7 @@ export default class BubbleChart extends SearchableChart {
             )
 
         node.selectAll('circle')
+            .data((d: any) => [d])
             .transition()
             .duration(1000)
             .attr('fill', (d: any) => vis.getFillForNode(d))
@@ -126,16 +127,13 @@ export default class BubbleChart extends SearchableChart {
 
         const node = vis.chart
             .selectAll("g")
-            .data(vis.packRoot?.descendants())
+            .data(vis.packRoot?.leaves())
             .join("g")
             .attr("transform", (d: any) => `translate(${d.x},${d.y})`)
 
         node
-            .filter((d: any) => !d.children)
             .append('circle')
             .attr('fill', (d: any) => vis.getFillForNode(d))
-            .attr('stroke', 'none')
-            .attr('stroke-width', 2)
             .attr('r', (d: any) => d.r)
             .attr('data-player', (d: any) => d.data.player)
             .on('mouseover', (_: Event, d: any) => {
@@ -181,7 +179,9 @@ export default class BubbleChart extends SearchableChart {
             (
                 (d3.hierarchy(groupedData) as HierarchyNode<any>)
                     .sum((d: any) => this.config.sizeAccessor(d))
+                    .sort((d: any) => this.config.sizeAccessor(d))
             )
+
     }
 
     private getFillForNode(node: HierarchyNode<any>) {
diff --git a/src/main.ts b/src/main.ts
index 3f78f397f31fd2c213d94231abb610d7dded66a5..de991fb59dd0a5fbc8a4ea160965f58916c2c160 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -38,7 +38,7 @@ dsv(';', 'data/output.csv').then(data => {
             if (sliderBlocked) return
             zoomSlider.value = event.transform.k.toString()
         },
-        groupAccessor: (d: any) => d['team'],
+        groupAccessor: (d: any) => d['nation'],
     })
 
     bubbleChart.renderVis()
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1b73854f3a71bce6c7c474e3b35a388dadb7fb0a..12e690781c31774297ec960b2429941dba3b5551 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -71,6 +71,7 @@ h1 {
   border-radius: 8px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  user-select: none;
 }
 
 #app {