Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Create a face

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

d42180dfc20042d186e196acfb4b8d1f

Open

Create a face

1 star1🌍 Public
MMorris Muriithi
Last edited Jun 17, 2024
Created on Jun 14, 2024

Repeated SVG smiley faces are generated in a grid, each drawn with a yellow circular background, two black eyes, and a curved mouth. The code builds these faces using React to compose separate components, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is rendered using `d3.arc()`, which creates a path based on specified radius and angle parameters. Each face is rendered identically without variation in appearance, placement, or styling.

AI-generated description

The Penguins Dataset, loaded and parsed as CSV.

Fork and modify this template to import your data to VizHub and export it for use in other vizzes! To do that:

  • Fork this viz
  • Clear out the README
  • Update the README with details about your dataset (including original source)
  • Replace data.csv with your own data
  • Replace the parsing logic in index.js with your own
  • Set the custom URL so you can import from it easily

Challenge

  • Find 3 datasets on a topic you are interested in
  • For each of those, fork this viz and replace the data
  • Parse the quantitative attributes into numbers
  • Update README.md to indicate the original data source