D3 force bubble chart

D3.js Force Simulation Bubble Chart

This skill covers how to build interactive, clustered bubble charts using D3 v6 force simulation.

Key Components

1. Force Simulation Setup

Create a force simulation that organizes bubbles into sector clusters:

const simulation = d3.forceSimulation(data)
  .force("x", d3.forceX()
    .strength(0.05)
    .x(d => xPositionBySector(d.sector)))
  .force("y", d3.forceY()
    .strength(0.05)
    .y(d => yPositionBySector(d.sector)))
  .force("collide", d3.forceCollide()
    .radius(d => d.radius + 2))
  .force("charge", d3.forceManyBody().strength(-30))
  .on("tick", updatePositions);

Why these forces:

• forceX/forceY: Pull bubbles toward sector-specific positions, creating clusters
• forceCollide: Prevents bubble overlap by pushing circles apart when they collide
• forceManyBody: Adds repulsion to prevent tight clustering (negative strength = repulsion)

2. Sector Clustering Strategy

Define center positions for each sector. Common approaches:

Grid layout (simple, predictable):

function getSectorPosition(sector, sectors) {
  const index = sectors.indexOf(sector);
  const cols = Math.ceil(Math.sqrt(sectors.length));
  const x = (index % cols) * (width / cols) + width / (cols * 2);
  const y = Math.floor(index / cols) * (height / 2) + height / 4;
  return {x, y};
}

Circle layout (more compact):

function getSectorPosition(sector, sectors) {
  const index = sectors.indexOf(sector);
  const angle = (index / sectors.length) * 2 * Math.PI;
  const radius = 150;
  return {
    x: width / 2 + radius * Math.cos(angle),
    y: height / 2 + radius * Math.sin(angle)
  };
}

3. Bubble Sizing

Size bubbles proportionally to numeric values (market cap):

const radiusScale = d3.scaleSqrt()
  .domain([0, d3.max(data, d => d.marketCap || 0)])
  .range([3, 40]);

data.forEach(d => {
  d.radius = d.marketCap ? radiusScale(d.marketCap) : 20; // Default for ETFs
});

Why scaleSqrt: Area scales linearly with value (perceived area = value)

4. Color by Sector

const colorScale = d3.scaleOrdinal()
  .domain(sectors)
  .range(d3.schemeSet2); // or d3.schemeCategory10, etc.

5. Labels Inside Bubbles

Ensure text remains readable inside bubbles:

svg.selectAll("text")
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("text-anchor", "middle")
  .attr("dy", "0.3em")
  .attr("font-size", d => Math.max(10, d.radius * 0.4) + "px")
  .attr("pointer-events", "none")
  .text(d => d.ticker);

6. Handling Missing Data

For ETFs (no market cap):

• Set to default radius: d.radius = 20
• Still cluster by sector
• Don't exclude from visualization
• Optionally use different styling (stroke, opacity) to indicate missing data

7. Hover Tooltips

circles.on("mouseover", function(event, d) {
  if (!d.marketCap) return; // Skip ETFs

  const tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .html(`<strong>${d.ticker}</strong><br/>${d.name}<br/>${d.sector}`);

  tooltip
    .style("left", (event.pageX + 10) + "px")
    .style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function() {
  d3.selectAll(".tooltip").remove();
});

Performance Tips

• Use simulation.alpha(0) after manual positioning to skip initial layout
• Limit to 100-200 nodes for smooth animations; beyond that, optimize with quadtrees
• Cache radius calculations instead of computing in loops

Testing Checklist

• Bubbles cluster by sector visually
• No overlapping bubbles (forceCollide working)
• Bubbles sized proportionally to market cap
• Text labels fit inside bubbles
• ETFs sized uniformly, no tooltips shown
• Sector colors distinct and consistent with legend