Smiley Face with D3

I'll create a smiley face using the existing circles by repositioning and repurposing them. Here are the updated files: **viz.js** ```js import { select } from 'd3'; export const viz = (container) => { const width = container.clientWidth; const height = container.clientHeight; const svg = select(container) .selectAll('svg') .data([null]) .join('svg') .attr('width', width) .attr('height', height) .style('background', '#F0FFF4'); // Position circles to form a smiley face const data = [ // Left eye { x: width/2 - 50, y: height/2 - 30, r: 20, fill: '#000000' }, // Right eye { x: width/2 + 50, y: height/2 - 30, r: 20, fill: '#000000' }, // Face outline { x: width/2, y: height/2, r: 150, fill: '#FFD700' }, // Mouth (left part) { x: width/2 - 70, y: height/2 + 80, r: 30, fill: '#000000' }, // Mouth (right part) { x: width/2 + 70, y: height/2 + 80, r: 30, fill: '#000000' }, // Nose { x: width/2, y: height/2 + 30, r: 15, fill: '#000000' }, // Mouth (center part) { x: width/2, y: height/2 + 100, r: 40, fill: '#000000' }, ]; svg .selectAll('circle') .data(data) .join('circle') .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('r', (d) => d.r) .attr('fill', (d) => d.fill) .attr('opacity', 0.9); }; ``` **index.js** ```js import { viz } from './viz'; const container = document.getElementById('viz-container'); viz(container); ``` **index.html** ```html Smiley Face with D3

``` **README.md** ```markdown # Smiley Face Visualization This project creates a smiley face using D3.js circles. The circles are positioned and colored to form facial features: - Yellow circle for the face - Black circles for the eyes, nose, and mouth The visualization is responsive and will adapt to the size of the browser window. ``` The changes I made: 1. Repositioned all circles to form a smiley face using relative positioning based on container dimensions 2. Changed colors to create a classic yellow face with black features 3. Adjusted the opacity for better visibility 4. Updated the title and README to reflect the new smiley face visualization 5. Kept the same file structure and D3 implementation patterns

Sean Thornton Circles with D3

Sean Thornton

Smiley Face Visualization