Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Simple Circle Pack (d3 v4; CSV; 50 Lines)

Public visualization

Viewing a saved revision (read-only)

5b54f7483310455b942c1dd833f307e8

Simple Circle Pack (d3 v4; CSV; 50 Lines)

0 stars0🌍 Public
DDeanna Bosschert
Last edited Nov 18, 2019
Created on Nov 18, 2019
Forked from Hello VizHub

This circle packing visualization uses a hierarchical treemap-style layout to display car ownership data from a CSV file. It presents nested circles representing categories like "cars," "owned," and "traded," with leaf nodes sized according to their numerical values. The visualization uses d3.stratify() to build the hierarchy from the flat CSV, d3.hierarchy() with a sum aggregation to compute node sizes, and d3.pack() to calculate circle positions and radii. Fifty lines of code render the result as semi-transparent SVG circles with white strokes on a fixed 300×200 canvas.

AI-generated description