This example visualizes a punchcard chart using D3 v3 with SVG rendering, plotting four datasets (data-1 through data-4) across years from 2004 to 2010. Each dataset occupies a distinct horizontal row, with circular bubbles positioned along an x-axis representing years. Bubble size encodes the associated numeric value using a linear radius scale, and color intensity (from brighter to darker green) reflects value magnitude through a second linear scale. Hovering over a row label reveals the precise numeric values as text labels, while the bubbles hide; moving the mouse away restores the bubbles. The chart uses spatial region as the primary identity channel, separating the datasets into distinct rows, with bubbles as the core marks.