Search code examples
svgd3.js3dradial-gradientscircle-pack

Embellishing D3 SVG circle pack diagram

My D3 circle pack looks like this: (also accesible via jsfiddle)

enter image description here

However, I would like the diagram to look like this: (don't pay attention on labels, or circle pack placement, they are not essential for my case; I meant just co show "3d" looks of circles, and their coloring)

enter image description here

What would be the good way to achieve this?

After @Delapouite answer, I put together another jsfiddle:

enter image description here

The key code is:

var data2 = pack.nodes(data);

var grads = svg.append("defs").selectAll("radialGradient")
    .data(data2)
   .enter()
    .append("radialGradient")
    .attr("gradientUnits", "objectBoundingBox")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", "100%")
    .attr("id", function(d, i) { return "grad" + i; });

grads.append("stop").attr("offset", "0%").style("stop-color", "white");
grads.append("stop").attr("offset", "100%").style("stop-color", "navy");

and

var circles = vis.append("circle")
    .attr("stroke", "black")
    .attr("fill", function(d, i) {
        return !d.children ? "url(#grad" + i + ")" : "beige";
    })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; });
Solution

  • You can fake the 3D effect of each ball by applying a soft radial gradient to the fill property of the circles :

    https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients