Matthew Rinaldi

@marinalid1·4 public vizzes

Fork of Making a Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using year 2018 estimates from the United Nations World Population Prospects. Population values are multiplied by 1000 and encoded as bar widths via `d3.scaleLinear`, while country names are placed on a `d3.scaleBand` y-axis. The chart customizes D3 axes by removing domain lines, adding tick marks, and formatting tick labels to abbreviate large numbers (e.g., “1.4B”). Data is loaded from a CSV using `d3.csv`, and the SVG is rendered with D3 v5 selections.

May 29, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face is rendered as an SVG graphic that fills the entire browser window, with a yellow circular head, two black eyes, and an implied mouth area. The visualization adjusts its size dynamically based on the viewport dimensions. The code uses React to create and manage SVG elements, calculating the center coordinates and scaling the face components relative to the window's width and height. ReactDOM mounts the App component, which defines the circle shapes for the face.

Apr 28, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face rendered using React and SVG, with the face dynamically centered and scaled to fit the browser window. The code uses React 16.9 and ReactDOM to create SVG circle elements for the face, eyes, and mouth, with coordinates calculated from the window’s dimensions. It draws a yellow face with a black stroke, two black eyes, and a partial mouth outline, all transformed as a group to the center of the viewport. The rendering approach relies on JSX syntax and inline SVG properties.

Mar 5, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a simple vector smiley face, consisting of a large yellow circle with a black outline and two smaller black circles for eyes. The visualization is rendered using static Scalable Vector Graphics (SVG) markup, with shapes defined directly in the HTML file. It uses no JavaScript libraries or data sources, relying solely on inline SVG elements—specifically `circle` elements—to compose the graphic. The page is styled minimally to hide margins and prevent scrolling, keeping the focus on the centered face.

Mar 4, 2022