Laura Spieker

@ljspiek·3 public vizzes

2019 Global Population Stylized Bar Chart

This example visualizes the top 10 most populous countries in 2019 using a horizontal bar chart, with population values on the x-axis and country names on the y-axis. Each bar includes a tooltip showing the formatted population value. The chart is built with React, rendering SVG elements, and uses D3.js scales (scaleBand and scaleLinear) with the d3.csv loader to fetch United Nations World Population Prospects data, while d3.format formats tick labels from billions to abbreviated strings.

Feb 1, 2022

Loading thumbnail…

Smiley Face Part II

This example renders a full-window smiley face as an SVG graphic using React 16.9. It positions a yellow circle with a black outline, two eyes, and a mouth via SVG `<circle>` elements. The code computes dimensions from `window.innerWidth` and `window.innerHeight`, centering the face and scaling its radius based on viewport height. ReactDOM renders the component into the `root` element, with all geometry defined through constants like `eyeOffsetX` and `mouthRadius`.

Jan 13, 2022

Loading thumbnail…

Smiley Face Part 1

This example displays a static yellow circle with two smaller black circles positioned inside it, creating the partial outline of a smiley face. The rendering uses an SVG canvas within an HTML page, drawing the shapes with the `<circle>` element and styling the main face with a black stroke and fill. The code defines explicit pixel coordinates for the center positions and radii, with no interactive or animated behavior.

Jan 13, 2022