Xudong Zhang

@xudong-z·7 public vizzes

Fork of Axes with React & D3

This example uses React and D3 to render a horizontal bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. It shows the population values as bars with x- and y-axis tick marks and labels, generated manually using `xScale.ticks()`, `scaleBand`, and `scaleLinear`. The chart is drawn as an SVG, with loading state handled via React hooks (`useState`, `useEffect`) and data fetched asynchronously with `d3.csv`.

Apr 3, 2021

Loading thumbnail…

Fork of Mouse Follower

A circle of radius 30 follows the mouse cursor across an SVG canvas. Built with React, the app tracks pointer coordinates via the `onMouseMove` event and updates the circle's `cx` and `cy` attributes through the `useState` hook. The SVG occupies a fixed 960 by 500 pixel viewport, and the code uses ReactDOM to render the component.

Mar 30, 2021

Loading thumbnail…

Fork of Smiley Face Part V

This React and D3 example renders a classic smiley face using SVG. The visualization is built from modular React components, each defined in separate files: `BackgroundCircle` draws the yellow face, `Eyes` places two circles, and `Mouth` uses a D3 `arc` path to create a curved smile. The app centers the entire face using an SVG `<g>` transform and all measurements—eye offsets, radii, and stroke widths—are parameterized for easy adjustment.

Mar 29, 2021

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example demonstrates how to build a smiley face using React and D3.js, with a yellow background circle, a mouth drawn using the `d3.arc` generator, and transform-based positioning. The code organizes visual elements as React components, passing attributes like width, height, and eye offsets through props. A video tutorial is embedded in the README, while the visible rendering uses SVG elements created in JSX, combining D3's geometric utilities with React's declarative structure for fundamental DOM manipulation.

Mar 29, 2021

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles: a large yellow face and two smaller black eyes. The SVG is rendered directly with hardcoded `cx` and `cy` coordinates, positioning the eyes symmetrically on the face. The code uses raw SVG circle elements with explicit styling for fill, stroke, and stroke-width, and the entire graphic is a static composition without any interactivity or animation.

Mar 29, 2021

Loading thumbnail…

Hello HTML

This example shows the minimal structure of an HTML page, displaying the text "Hello HTML" centered in the browser window. It uses a plain HTML document with an inline `style` attribute on the `<h1>` element to control alignment. The page relies solely on standard HTML and CSS, with no external JavaScript libraries or data sources; the title is set via the `<title>` tag in the document head.

Mar 29, 2021

Loading thumbnail…

HTML Starter

This example demonstrates a minimal static visualization composed of a green circle and a wide rectangle rendered as SVG elements inside an HTML page. The SVG canvas is explicitly sized at 960 by 400 pixels. Styling is applied through a CSS rule that centers the body text and sets a large font size. A separate script tag logs a message to the browser console using the native `console.log` API. The visualization relies solely on raw HTML, CSS, and JavaScript with no external libraries, serving as a starting point for more complex projects.

Sep 19, 2020