Florian Maas

@fpgmaas·7 public vizzes

Stylized bar chart

This stylized bar chart displays the populations of the top 10 countries from a 2019 UN dataset, using a horizontal layout with green rectangles. The visualization is built with React and D3 v5, leveraging `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG rendering draws axes, tick marks, and a population label, while tooltips appear on hover through `title` elements. The chart resizes to fill the browser window, and the Roboto font provides a clean, minimal aesthetic.

Feb 25, 2022

Loading thumbnail…

Refactored Fork of Bar chart UN data

This example displays a horizontal bar chart of United Nations population data for the top 10 countries. It uses React with D3 v5's `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. The chart is rendered directly as SVG elements, with axes built from D3's tick marks, and it loads its dataset from a CSV file using D3's `csv` function. The visualization maintains a fixed layout.

Feb 25, 2022

Loading thumbnail…

Bar chart UN data

This example shows a horizontal bar chart displaying the top ten countries by 2020 population, as sourced from UN population data. The bars are rendered as green SVG rectangles, with the bar lengths proportional to population values from the CSV file. Built with React and D3 v5, the chart uses D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The visualization includes axis ticks, labels, and a gridline.

Feb 24, 2022

Loading thumbnail…

Lading data with React and D3

This example displays a full-screen, color-coded pie chart built with React and D3. Clicking the mouse triggers a reload of the data, which is fetched from a CSV file of named CSS colors using `d3.csv`. The chart is rendered as SVG paths, with each slice’s color derived from the `RGB hex value` field and sized using `d3.arc` and `d3.pie`. A loading state shows plain text while data is being fetched.

Feb 24, 2022

Loading thumbnail…

Mouse Follower And Resizer

A green circle follows the mouse cursor across a full-screen SVG canvas. Clicking the mouse grows the circle’s radius by 10 pixels, while shift-clicking shrinks it, with a minimum size of zero. Built with React components and event handlers, the code uses React’s `useState` and `useCallback` hooks to track mouse position and radius, rendering the circle via SVG elements and updating on each mouse event.

Feb 23, 2022

Loading thumbnail…

Fork of Smiley Face Part II

The visualization is a grid of 18 smiley faces, each rendered with a yellow circular background, two black eyes, and a curved mouth. Each face is a self-contained React component that composes smaller React components for the background, eyes, and mouth. The code uses the D3.js `arc` API to generate the mouth shape and React to build the SVG structure. The faces vary randomly in eye size, creating a subtle field of similar but slightly different expressions.

Feb 23, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face rendered as a static SVG graphic using React. The drawing consists of three circles: a large yellow circle for the face and two smaller black circles for the eyes, all placed within a 960 by 500 pixel SVG canvas. The code uses React and ReactDOM to render the SVG elements, with styles defined in CSS. The visualization demonstrates basic React component structure and declarative SVG circle creation without any interactive or data-driven behavior.

Feb 21, 2022