rhona-o'neill

@RhonaON·3 public vizzes

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries using a "pathetic" bar chart that deliberately omits axes, scales, or labels. The bars are rendered as SVG rectangles positioned using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The React component uses `useState` and `useEffect` to fetch and process the data, then maps each country to a rectangle filled with the default black color.

May 4, 2022

Loading thumbnail…

Moon Calendar 2022

The Moon Calendar 2022 is an annual grid of moons, one per day, arranged by month (rows) and day (columns). Each cell displays the moon’s phase as a small orthographic projection of a sphere, with the lit portion rendered in light gray against a dark background. The phase is calculated using the “Simple” lunar-period formula from ben-daglish.net, given a reference new moon in 1970. The visualization uses `d3.timeDays` to generate daily data, `d3.geoPath` with a `d3.geoOrthographic` projection to draw each moon, and `d3.axisLeft`/`d3.axisTop`/`d3.axisBottom` for axes. Clicking the SVG triggers an animated expanding red ring around the current day’s moon via `transition().duration()`.

May 4, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn on a blank SVG canvas, with two black eye circles positioned on a larger face circle. The face consists of three SVG `<circle>` elements: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes. It uses raw SVG markup within an HTML file, with no JavaScript libraries or data sources, relying solely on explicit coordinate attributes (cx, cy, r) for placement.

Apr 21, 2022