Jeff Yeung

@JeffYYW·4 public vizzes

Fork of Stylized Bar Chart

This example displays the ten most populous countries as a horizontal bar chart, with country names on the y-axis and population on the x-axis. The code uses React and d3.scaleBand and d3.scaleLinear to position the bars, with SVG rectangles rendered from the United Nations World Population Prospects 2019 dataset. The axis components use d3.ticks for tick values, and tooltips reveal formatted population values via the d3.format function.

Sep 7, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a classic smiley face composed of a yellow circle, two black eyes, and a curved mouth, centered within an 960×500 SVG viewport. Built with React and D3 v5, it uses a `<g>` transform to position the face elements, static circle coordinates for the head and eyes, and a D3 `arc()` generator to create the mouth path. All geometry is hardcoded as constants, and the rendering occurs purely through SVG markup, with the app mounted to the DOM via `ReactDOM.render`.

Sep 7, 2022

Loading thumbnail…

Fork of Let's Make a Face Part II

A yellow circular face with a black outline and two black eye circles is rendered on a 960 by 500 pixel SVG canvas. The face, centered at (480, 250) with a radius of 245, uses SVG primitives directly—a main `circle` element with `fill="yellow"` and `stroke="black"` (stroke-width 10) for the head, plus two smaller `circle` elements for eyes at (350, 180) and (600, 180). The SVG is embedded inline in an HTML document with no external JavaScript or data, and the layout follows a static, hand-coded design.

Sep 7, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a simple SVG composition of three concentric circles on a coral background—a large circle with a thick black stroke and two smaller open circles positioned on either side. It demonstrates how to create a static vector graphic using inline SVG elements directly in an HTML page, with no JavaScript libraries. The circle elements use `fill`, `stroke`, and `stroke-width` attributes for styling, and the page sets `overflow: hidden` on the body for a clean viewport. It is a fork of the “Hello HTML” template, rendering at 960 by 500 pixels.

Sep 7, 2022