Based on Tamara Munzner's "Visualization Analysis & Design," this D3.js example contrasts length and position encoding by rendering four horizontal lines with black tick marks at their endpoints and a square marker positioned along each line. The top two lines share a common x-axis scale, while the bottom two use unaligned scales, demonstrating how changes in square position can be read accurately on a common scale but become misleading when scales differ. The visualization uses d3.scaleLinear to map a 0–500 domain to a 0–500 pixel range, and SVG primitives (`line`, `rect`, `text`) are appended via d3.select and g.selectAll().data().enter(). Data is hardcoded as an array of coordinate objects.