Fork of Fork of Let's make a face with D3.js!

index.js

import { select, arc } from 'd3';

const svg = select('svg');

const width = +svg.attr('width');

const height = +svg.attr('height');

const g = svg.append('g')

.attr('transform', `translate(${width / 2}, ${height / 2})`);

const circle = g.append('circle');

circle.attr('r', height / 2);

circle.attr('fill', 'yellow');

circle.attr('stroke', 'black');

const eyeSpacing = 100;

const eyeYOffset = -89;

const eyeRadius = 40;

const eyebrowWidth = 70;

const eyebrowHeight = 20;

const eyebrowYOffset = -70;

const eyesG = g

.append('g')

.attr('transform', `translate(0, ${eyeYOffset})`);

const leftEye = eyesG

.append('circle')

.attr('r', eyeRadius)

.attr('cx', -eyeSpacing);

const rightEye = eyesG

.append('circle')

.attr('r', eyeRadius)

13 views in last 90 days

Last edited Feb 21, 2023

Created on Feb 20, 2023

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed