Licheng Zhang

@dalide·5 public vizzes

Rendering Data with React & D3

This example shows the ten most populous countries from a 2019 UN population dataset, rendered as horizontal bars in an SVG chart. React 16 manages the component state and loading screen, while D3 v6 utilities (`csv`, `scaleBand`, `scaleLinear`, `max`) handle data fetching and scaling. The code converts each country’s 2020 population value to a numeric field and maps it to a bar width using a linear scale, with bands for each country name.

May 25, 2021

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a bubble chart of religious affiliations by country, based on data from the UCI Machine Learning Repository. The visualization maps country names to the x-axis, religion to the y-axis, and population to the size of each circle, with tooltips displaying exact population values. Built with the `vega-lite-api` library, it registers Vega and Vega-Lite, applies custom configuration for axis styling and label fonts, and loads data asynchronously via d3.csv. The chart fills the browser window using an autoresize fit setting.

May 24, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v6. It fetches a remote CSV file containing CSS named colors via `d3.csv`, then displays a summary of the parsed dataset: the file size in kilobytes, row count, and column count. The result is rendered as large text inside an HTML `<pre>` element. The data comes from a GitHub gist, and the code also includes commented-out alternatives using the Fetch API and `d3.csvParse`.

May 23, 2021

Loading thumbnail…

Smiley Face Part II

A single black circle follows the mouse cursor across a blank SVG canvas, responding to every movement with a one-to-one positional update. The React component tracks the pointer via the `onMouseMove` event and stores the coordinates in state using the `useState` hook, while `useCallback` optimizes the handler. ReactDOM renders the scene, and the circle's center is set directly to the cursor's clientX and clientY values, creating a simple, immediate interactive visualization.

May 23, 2021

Loading thumbnail…

Smiley Face Part I

A grid of yellow smiley faces is generated using React, where each face is a reusable component with randomly varied eye positions, eye radii, and mouth dimensions. The faces are rendered as SVG elements, with the background drawn as a circle, the mouth using a D3 arc path generator, and the layout derived from a D3 range array. The component structure separates the face into background, eyes, mouth, and a container that handles the SVG coordinate transformation.

May 23, 2021