kl7g

@kl7g·3 public vizzes

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a series of unlabeled, axis-less bars rendered as SVG rectangles. The bars stretch horizontally across the viewport based on each country’s 2020 population estimate, with no tick marks, scales, or other chart furniture. The visualization uses React hooks (useState, useEffect) to fetch and parse United Nations World Population Prospects 2019 data via d3.csv, then applies d3.scaleBand for vertical country positioning and d3.scaleLinear for bar widths. While loading, a large “Loading...” message appears in place of the chart.

Oct 2, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

Twelve smiling faces appear in a grid, each rendered with a yellow circle, two black eyes, and a curved mouth that spans a half-circle. Each face randomly varies in stroke thickness, eye size, eye offset, and mouth radius. Built with React components for modular structure, the visualization uses D3 v5’s `arc` API to generate the mouth path, while the SVG container translates the face group to the center. Random parameters are applied per face, producing subtle variation across the repeated smiley pattern.

Sep 26, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a React component that renders a classic smiley face as an SVG graphic. The face consists of a yellow circle for the head, two black eye circles, and an arc-shaped mouth created using D3’s `arc()` generator. React manages the SVG elements, while D3’s `arc` API defines the mouth’s path geometry with specified inner and outer radii and angular ranges. The code uses hardcoded constants for positions and dimensions, and the rendering approach is purely declarative via JSX, with D3 only used for path generation.

Sep 26, 2022