Skip to main content
100%

D3: A simple packed Bubble Chart

✓ Published0🌍 Public
Aalokkshukla
Last edited Jul 30, 2017
Created on Jul 30, 2017

A packed bubble chart displays a static set of food items and their associated counts as proportionally sized, colored circles arranged in a tight cluster. The visualization uses D3 v4’s `d3.pack` layout on a hierarchical dataset, with each leaf node rendered as an SVG circle and labeled with its name and count. Color is assigned via `d3.scaleOrdinal` with `d3.schemeCategory20`, and text size scales relative to each circle’s radius.

AI-generated description

Simple Bubble Chart D3 v4


var color = d3.scaleOrdinal(d3.schemeCategory20);

var bubble = d3.pack(dataset)
            .size([diameter, diameter])
            .padding(1.5);

var node = svg.selectAll(".node")
            .data(bubble(nodes).descendants())
            .enter()
            .filter(function(d){
                return  !d.children
            })
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });

Update colors and labels .

Similar vizzes