This example demonstrates the 2D area size channel for ordered attributes by comparing square and circular markers scaled proportionally to their data values. A row of green rectangles increases in side length linearly, while a row of blue circles increases in radius using a square-root transformation, showing how area perception differs between shapes. The visualization uses D3 v4 with SVG rendering, employing d3.scaleLinear for x and y positions, and data binding via selectAll().data().enter().append() to generate the geometric primitives. Marker arrays are hardcoded in the script, with rectangles and circles positioned at fixed intervals for direct size comparison.