Xinya Gao

@ShinyaGao·3 public vizzes

Let's make a face with D3.js!

This example shows a grid of cartoon faces, each with randomly sized eyes, rendered as SVG in a React application. It demonstrates the use of D3 v6’s `arc` generator to construct the smiling mouth path, while React components compose the face from reusable parts like background circles and eye pairs. The data is generated with `d3.range`, and each face is positioned by a centered `<g>` transform. The rendering approach combines D3’s geometry utilities with React’s declarative SVG elements.

Dec 31, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and styling using CSS and inline attributes. It displays circles, rectangles, lines, and a path, with some shapes using explicit `fill` and `stroke` values while others inherit styles from CSS classes. The page renders a single SVG element with a `transform` scale, and a grouped set of shapes applies stroke settings via a `.lines` class. The code uses plain HTML and CSS, with no JavaScript libraries, and includes a React starter reference in the README.

Dec 31, 2020

Loading thumbnail…

Cars Report

This example displays a list of cars filtered by price, showing each vehicle’s year, make, model, and cost as plain text. The page initially shows “Loading...” while a simulated asynchronous call to `getCars()` resolves after two seconds. The `generateReport` function filters the JSON data for cars under $2,000 and formats each entry using `formatCar`, which constructs the output string. The result is written into a `<pre>` element via the DOM API, with styling applied through inline CSS in the HTML file.

Dec 27, 2020