Let's make a face with D3.js!
This example demonstrates fundamental DOM manipulation in D3.js by rendering a smiley face from an array of fruit objects. The visualization starts with five red circles representing apples, positioned horizontally across an SVG canvas, then removes the last fruit from the data array, causing the corresponding circle to turn black through the exit selection. The code uses D3’s `select`, `range`, data joins with `enter` and `exit` methods, and SVG circle attributes to show how data bindings drive visual updates. The rendering is entirely SVG-based, with a fixed 960×500 viewport.