Zac02

@Zac02·3 public vizzes

Smiley Face Project

This interactive visualization generates a grid of eighteen procedurally varied smiley faces using React and D3.js. Each face is composed of SVG primitives—a yellow background circle, two black eyes, a curved mouth, and rectangular eyebrows—whose dimensions and positions are randomized for every instance. The `Face` component assembles these parts, while the `FaceContainer` applies a rotation to the entire group. The mouth shape is created using D3's `arc` generator to produce a semicircular path, and the faces are rendered into an HTML canvas within a React application.

Mar 3, 2023

Loading thumbnail…

Animated Chart

A React component renders an SVG bar chart of annual values, with three bars for the years 2020 through 2022. A button click swaps the dataset, triggering a smooth transition where the bars animate their height and vertical position over one second using d3’s `transition`. The chart uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.selectAll` to build and update the visualization within a `useEffect` hook on data changes.

Mar 3, 2023

Loading thumbnail…

Basic Bar Chart

This example shows a basic bar chart comparing fruit categories (Apples, Oranges, Bananas, Pears) with corresponding numerical values. The chart renders as an SVG using React and D3 v5, employing `d3.scaleBand` for the x-axis positioning and `d3.scaleLinear` for the y-axis scaling. Bars appear in steelblue, with axes generated through `d3.axisBottom` and `d3.axisLeft`. The underlying data is hardcoded in the React component, and the visualization updates whenever the data prop changes.

Mar 3, 2023