Two SVG canvases demonstrate D3 data joins and selections. One canvas shows circles appended with fixed attributes, while the other begins with hard-coded rectangles that are re-selected, recolored red, and repositioned. The example then binds a small array of country weight objects to empty selections, joining circles whose radius and x-position derive from data properties. D3’s `select`, `selectAll`, `data`, `join`, and `attr` methods handle the DOM updates, with data transformations like doubling weights performed in plain JavaScript before rendering.