Yuqi Liao (@yuqiliao), VizHub

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries using a stylized horizontal bar chart. It uses React to render the SVG markup and D3’s `scaleBand` and `scaleLinear` for positioning bars, with data from the United Nations World Population Prospects 2019. The code also formats tick labels with D3’s `format` and includes a native SVG `<title>` tooltip. The chart features a clean aesthetic with Poppins font and muted color accents.

Aug 15, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries using a stylized horizontal bar chart. It uses React to render the SVG markup and D3’s `scaleBand` and `scaleLinear` for positioning bars, with data from the United Nations World Population Prospects 2019. The code also formats tick labels with D3’s `format` and includes a native SVG `<title>` tooltip. The chart features a clean aesthetic with Poppins font and muted color accents.

Aug 5, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces, each rendered as an SVG circle with individual eye positions, radii, mouth arcs, and stroke widths. Built with React components and ES6 modules, the example composes separate `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` elements, while using D3’s `arc` generator for the mouth shape and `range` to create the repeated faces.

Jul 29, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This visualization displays a classic yellow smiley face with black eyes, a curved mouth, and a nose, all rendered as SVG shapes. The face is centered on a 960 by 500 canvas, with each facial feature positioned using fixed coordinates. The code combines React for component structure with D3’s `arc` generator to create the mouth and nose paths. The mouth uses an inner and outer radius with specified start and end angles, while the nose is drawn as a half-circle arc, demonstrating how D3 path generators integrate with React’s declarative rendering.

Jul 29, 2021

Loading thumbnail…

Fork of Hello HTML

This example presents a minimal, empty HTML page that serves as a starting point for web-based projects. The code contains no JavaScript libraries or data visualizations; it simply defines the basic document structure with a `<head>` and empty `<body>` using standard HTML. The rendering relies solely on the browser’s built-in HTML parser, with no external frameworks or APIs invoked. The embedded YouTube video in the README is the only external content, though it is not part of the rendered page itself.

Jul 26, 2021