zhangweihua1

@zhangweihua1·3 public vizzes

Smiley Face Part I

A static smiley face rendered with React and D3’s `arc` generator. The SVG layers a yellow circle for the head, two black circles for eyes, and a mouth path drawn with an arc whose inner and outer radii and angular range define a wide smile. The face is centered via a translated group, with dimensions and offsets set as constants. D3 version 6 provides the arc, while React 17 handles the JSX-based element creation and mounting to the DOM.

May 4, 2021

Loading thumbnail…

Hello HTML

This example displays a static yellow circle centered on a plain white SVG canvas. It demonstrates the minimal structure of an HTML document embedding Scalable Vector Graphics, with no external JavaScript or data libraries. The circle is rendered directly through the SVG `<circle>` element, its size and position set via the `cx`, `cy`, and `r` attributes, while styling is applied through a CSS rule in the page header.

Apr 25, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a simple face using basic SVG shapes with D3.js. It creates a yellow circle as the head, positioned in the center of the canvas, and adds two black circles for eyes, placed symmetrically around the center. The code uses D3’s `select` and `append` APIs to manipulate the SVG elements, setting attributes like radius and fill directly. The rendering relies on D3 v6 through a bundled JavaScript file, with the SVG canvas defined at 960 by 500 pixels.

Oct 27, 2020