GreatGayatri

@GreatGayatri·3 public vizzes

smiley face with D3.js

This example draws a smiley face entirely with SVG shapes using D3.js v7. It creates a yellow circle for the head, two black circles for the eyes, and a mouth generated with the `d3.arc` shape generator. The arc uses `innerRadius`, `outerRadius`, and angular start/end values to form a crescent-like smile. All shapes are positioned relative to the SVG's width and height attributes, with the mouth translated to the center of the canvas.

Aug 9, 2023

Loading thumbnail…

Fork of D3 Starter

This block renders the text “Hello D3 version 7” in the center of the page at a huge font size, using the D3 `select` API to target the `body` element and assign the string. The page loads D3 v7 from the unpkg CDN and applies a CSS rule for centered, 13em text. The example serves as a minimal starter template for D3 version 7, demonstrating basic DOM selection and text replacement without additional data or interaction.

Aug 9, 2023

Loading thumbnail…

Fork of Fork of Simley Face

A React and D3 v5 component assembles a stylized smiley face from individual SVG primitives. Separate modules define the background circle, eyes, mouth, and nose, which are composed within an SVG container using JSX. The mouth is generated with a d3 arc generator, while the face layout uses explicit coordinate and radius props like `centerX`, `eyeoffsetX`, and `mouthRadius`. The face is rendered with a yellow fill and black stroke, centered on a 360 by 360 canvas.

Aug 9, 2023